/* ============================================================
   GLOBALINK — STYLE.CSS  v3.0
   ============================================================ */

/* ── 1. VARIABLES ─────────────────────────────────────────── */
:root {
    --primary:#7f2da0;
    --primary-dark:#6a2488;
    --secondary:#a02d99;
    --gradient:linear-gradient(135deg,#c639b8,#1e8ee9);
    --gradient-soft:linear-gradient(135deg,rgba(198,57,184,.15),rgba(30,142,233,.1));

    --bg:#f0f2f5;
    --bg-card:#ffffff;
    --bg-input:#f5f5f5;
    --bg-sidebar:#ffffff;
    --bg-hover:rgba(127,45,160,.08);
    --text:#1c1c1c;
    --text-secondary:#65676b;
    --text-muted:#aaaaaa;
    --border:rgba(0,0,0,.07);
    --shadow:0 2px 12px rgba(0,0,0,.07);
    --shadow-md:0 8px 30px rgba(0,0,0,.10);

    --sidebar-width:260px;
    --right-sidebar-width:280px;
    --header-height:60px;
    --mobile-nav-height:60px;
}

[data-theme="dark"] {
    --bg:#0e0e0e;
    --bg-card:#1a1a1a;
    --bg-input:#252525;
    --bg-sidebar:#121212;
    --bg-hover:rgba(198,57,184,.12);
    --text:#f0f0f0;
    --text-secondary:#b0b3b8;
    --text-muted:#666;
    --border:rgba(255,255,255,.07);
    --shadow:0 2px 12px rgba(0,0,0,.3);
    --shadow-md:0 8px 30px rgba(0,0,0,.4);
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
html,body {
    font-family:'Outfit','Poppins',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    -webkit-tap-highlight-color:transparent;
    transition:background .3s,color .3s;
}
input,textarea { user-select:text; font-family:inherit; }
button { cursor:pointer; font-family:inherit; }
img { max-width:100%; }

/* ── 3. LANDING ───────────────────────────────────────────── */
#landingPage {
    width:100%; min-height:100vh;
    background:linear-gradient(135deg,#070711 0%,#0a0a1e 30%,#0d0820 55%,#0c0a1a 75%,#090716 100%);
    position:relative; overflow:hidden;
}

/* Canvas partículas + glows — capas base del landing */
#glCanvas {
    position:fixed; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:0;
}
.gl-glow-layer {
    position:fixed; inset:0; pointer-events:none; z-index:1;
}
.gl-gb {
    position:absolute; border-radius:50%; filter:blur(90px);
    animation:glHeroP 3.2s ease-in-out infinite;
    /* FIX (Lighthouse: Avoid non-composited animations) — sin esto, el
       navegador recalculaba el desenfoque en cada fotograma en vez de
       solo mover una capa ya compuesta en GPU. Mismo resultado visual. */
    will-change: transform, opacity;
}
.gl-gb.c { width:60vw;height:60vw;top:-15%;right:-10%;
    background:radial-gradient(circle,rgba(0,210,255,.12) 0%,transparent 70%); }
.gl-gb.m { width:55vw;height:55vw;top:25%;left:-12%;
    background:radial-gradient(circle,rgba(198,57,184,.10) 0%,transparent 70%);
    animation-delay:-1.6s; }
.gl-gb.w { width:35vw;height:35vw;top:40%;left:35%;
    background:radial-gradient(circle,rgba(100,60,255,.08) 0%,transparent 65%);
    animation-delay:-.8s; }
@keyframes glHeroP {
    0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.18)}
}

nav#mainNav {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 8%;
    background:rgba(7,7,17,.55);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    border-bottom:1px solid rgba(255,255,255,.07);
    transition:.3s;
}
[data-theme="dark"] nav#mainNav { background:rgba(7,7,17,.7); border-bottom-color:rgba(255,255,255,.05); }

.logo { width:140px; }
.nav-links { list-style:none; }
.nav-links li { display:inline-block; margin:0 15px; }
.nav-item { text-decoration:none; color:rgba(255,255,255,.45); font-weight:500; transition:.3s; }
[data-theme="dark"] .nav-item { color:rgba(255,255,255,.45); }
.nav-item:hover { color:#fff; }
.nav-btns { display:flex; align-items:center; }

/* Botón Entrar — degradado en texto */
.logn-btn {
    background:linear-gradient(135deg,#6a1fa8,#c639b8);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-right:10px; font-weight:700;
    border:1.5px solid rgba(198,57,184,.4); padding:8px 20px; border-radius:30px;
    background-color:transparent; transition:.3s; font-size:14px; cursor:pointer;
}
.logn-btn:hover { border-color:rgba(198,57,184,.8); }

.btn-join {
    color:#fff; background:var(--gradient); padding:9px 24px; border-radius:50px;
    font-weight:700; border:none; transition:.3s;
    box-shadow:0 4px 15px rgba(198,57,184,.3); font-size:14px; cursor:pointer;
}
.btn-join:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(198,57,184,.45); }

.hero {
    width:100%; min-height:100vh;
    padding:calc(100px + env(safe-area-inset-top)) 8% 50px;
    padding-bottom:env(safe-area-inset-bottom);
    position:relative; overflow:hidden; z-index:5;
}
.main-content { display:flex; align-items:center; justify-content:space-between; }
.text-side { flex:1; z-index:5; display:flex; flex-direction:column; align-items:center; text-align:center; }
.text-side h1 {
    font-size:clamp(42px,7vw,82px); line-height:1.1;
    margin-bottom:20px; font-weight:900;
    /* "Conecta con" — degradado magenta→azul */
    background:linear-gradient(135deg,#c639b8 0%,#6a1fa8 50%,#1e8ee9 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-side h1 .white-part { color:#fff; -webkit-text-fill-color:#fff; background:none; }
.text-side p { font-size:18px; color:rgba(255,255,255,.45); margin-bottom:35px; max-width:480px; line-height:1.6; }
[data-theme="dark"] .text-side p { color:rgba(255,255,255,.45); }

/* Botón Saber más — degradado en texto */
#heroSaberMas {
    background:transparent;
    border:1.5px solid rgba(198,57,184,.35);
    border-radius:28px; padding:11px 24px; font-size:14px; font-weight:700;
    cursor:pointer; font-family:inherit; transition:border-color .2s; margin-left:12px;
    background-image:linear-gradient(135deg,#c639b8,#1e8ee9);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
#heroSaberMas:hover { border-color:rgba(198,57,184,.7); }

/* Estadísticas */
.hero-stats { display:flex; gap:36px; justify-content:center; margin-top:36px; }
.hero-stat-n {
    font-size:22px; font-weight:900; text-align:center;
    background:linear-gradient(135deg,#c639b8,#1e8ee9);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-stat-l { font-size:10px; color:rgba(255,255,255,.28); margin-top:3px; letter-spacing:.5px; text-align:center; }

.image-side {
    flex:1; position:relative; height:600px;
    display:flex; align-items:center; justify-content:center; z-index:1;
    overflow:hidden;
}
/* Imagen sin estirar — contain dentro del contenedor */
.back-img {
    width:auto; height:auto;
    max-width:92%; max-height:88%;
    object-fit:contain;
    position:relative; z-index:2;
    border-radius:12px;
    animation:glImgIn 1s ease both;
}
@keyframes glImgIn { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }

/* Canvas de partículas propio de la imagen */
#imgParticleCanvas {
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:3;
}
/* Glows sobre la imagen */
.img-glow {
    position:absolute; border-radius:50%; filter:blur(60px);
    pointer-events:none; animation:glHeroP 2.8s ease-in-out infinite;
    /* FIX (Lighthouse: Avoid non-composited animations) — mismo motivo
       que .gl-gb arriba. */
    will-change: transform, opacity;
}
.img-glow.c { width:70%;height:70%;top:5%;left:10%;
    background:radial-gradient(circle,rgba(0,210,255,.18) 0%,transparent 65%); z-index:1; }
.img-glow.m { width:60%;height:60%;bottom:5%;right:5%;
    background:radial-gradient(circle,rgba(198,57,184,.16) 0%,transparent 65%);
    animation-delay:-1.4s; z-index:1; }
.img-glow.w { width:40%;height:40%;top:40%;left:40%;
    background:radial-gradient(circle,rgba(120,80,255,.12) 0%,transparent 65%);
    animation-delay:-.7s; z-index:1; }
/* Fundido con el fondo en los bordes */
.image-side::before {
    content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
    background:
        linear-gradient(to right,#070711 0%,rgba(7,7,17,.65) 5%,rgba(7,7,17,.12) 14%,transparent 26%),
        linear-gradient(to top,#070711 0%,rgba(7,7,17,.4) 5%,transparent 14%),
        linear-gradient(to bottom,#070711 0%,rgba(7,7,17,.25) 4%,transparent 11%),
        linear-gradient(to left,#070711 0%,rgba(7,7,17,.2) 3%,transparent 9%);
}
.feature-img { width:85%; max-width:480px; z-index:2; position:relative; border-radius:20px; transition:transform .1s linear; }

.anim { opacity:0; transform:translateY(35px); filter:blur(5px); transition:all .8s cubic-bezier(.22,1,.36,1); }
.anim.show { opacity:1; transform:translateY(0); filter:blur(0); }
.hidden { display:none !important; }

/* ── 4. APP LAYOUT ───────────────────────────────────────── */
#socialApp { display:flex; min-height:100vh; background:var(--bg); }

/* Sidebar izquierdo */
.sidebar-left {
    position:fixed; top:0; left:0;
    width:var(--sidebar-width); height:100vh;
    background:var(--bg-sidebar); border-right:1px solid var(--border);
    display:flex; flex-direction:column; z-index:900;
    transition:background .3s; overflow:hidden;
}
.sidebar-logo { padding:22px 20px 10px; border-bottom:1px solid var(--border); }
.sidebar-nav { flex:1; padding:12px; overflow-y:auto; }
.nav-group { display:flex; flex-direction:column; gap:4px; }

.sidebar-item {
    display:flex; align-items:center; gap:14px;
    padding:11px 14px; border-radius:14px; cursor:pointer;
    transition:all .25s ease; color:var(--text-secondary);
    font-weight:500; font-size:15px; position:relative;
}
.sidebar-item:hover { background:var(--bg-hover); color:var(--primary); transform:translateX(4px); }
.sidebar-item.active { background:var(--gradient-soft); color:var(--primary); font-weight:700; }

.sidebar-icon-wrap {
    width:42px; height:42px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px; background:var(--bg-input);
    transition:all .25s ease; position:relative; flex-shrink:0;
}
.sidebar-item.active .sidebar-icon-wrap { background:var(--gradient); color:#fff; box-shadow:0 4px 12px rgba(198,57,184,.3); }
.sidebar-item:hover .sidebar-icon-wrap i { transform:scale(1.15); }

.badge {
    position:absolute; top:-6px; right:-6px;
    background:var(--secondary); color:#fff; font-size:10px; font-weight:700;
    width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--bg-sidebar);
    animation:badgePop .3s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes badgePop { from { transform:scale(0); } to { transform:scale(1); } }

.sidebar-profile { padding:15px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.mini-avatar {
    width:38px; height:38px; border-radius:50%; background:var(--gradient);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:14px; overflow:hidden; flex-shrink:0;
}
.mini-avatar img { width:100%; height:100%; object-fit:cover; }
.mini-info { flex:1; overflow:hidden; }
.mini-info span { display:block; font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-info small { font-size:11px; color:var(--text-muted); }
.logout-btn { background:none; border:none; color:var(--text-muted); font-size:16px; padding:5px; transition:color .2s; }
.logout-btn:hover { color:#ff4d4d; }

/* ── 5. APP MAIN ─────────────────────────────────────────── */
.app-main {
    margin-left:var(--sidebar-width);
    margin-right:var(--right-sidebar-width);
    min-height:100vh; display:flex; flex-direction:column;
}
.app-header {
    position:sticky; top:0;
    background:var(--bg-card); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    padding:0 25px; height:var(--header-height);
    display:flex; align-items:center; justify-content:space-between;
    z-index:800; transition:background .3s;
}

/* Botón buscar en header: oculto en desktop, visible en móvil */
.header-search-btn { display:none; background:none; border:none; color:var(--text); cursor:pointer; width:36px; height:36px; border-radius:50%; align-items:center; justify-content:center; font-size:16px; transition:.2s; }
.header-search-btn:hover { background:var(--bg-hover); }

/* Logo en header: oculto en desktop (se ve en sidebar), visible en móvil */
.header-logo-mobile { display:none; }

/* Botón logout en header: oculto en desktop (está en sidebar), visible en móvil */
.logout-btn-mobile {
    display:none;
    background:none; border:none; color:var(--text-muted);
    font-size:18px; padding:8px; cursor:pointer;
    border-radius:50%; width:36px; height:36px;
    display:none; align-items:center; justify-content:center;
    transition:color .2s, background .2s;
}
.logout-btn-mobile:hover { color:#ff4d4d; background:rgba(255,77,77,.1); }
.section-title {
    font-size:20px; font-weight:700;
    background:var(--gradient); -webkit-background-clip:text;
    -webkit-text-fill-color:transparent; background-clip:text;
}
.header-actions { display:flex; align-items:center; gap:10px; }
.theme-toggle {
    width:40px; height:40px; border-radius:50%; border:none;
    background:var(--bg-input); color:var(--text); font-size:17px;
    display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.theme-toggle:hover { background:var(--bg-hover); color:var(--primary); transform:rotate(20deg); }
.content-area { flex:1; padding:20px 25px; max-width:750px; margin:0 auto; width:100%; }
/* Reels necesita todo el ancho sin restricciones del content-area */
.content-area:has(.reels-player-container),
.content-area:has(#reelsPlayer) {
    padding:0 !important;
    max-width:100% !important;
    margin:0 !important;
}

/* ── 6. SIDEBAR DERECHO ──────────────────────────────────── */
.sidebar-right {
    position:fixed; right:0; top:0;
    width:var(--right-sidebar-width); height:100vh;
    background:var(--bg-sidebar); border-left:1px solid var(--border);
    overflow-y:auto; z-index:800; transition:background .3s;
}
.right-sidebar-inner { padding:20px 16px; }
.sidebar-section-title { font-size:13px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.8px; margin:0 0 12px; }

.contact-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; cursor:pointer; transition:.2s; margin-bottom:4px; }
.contact-item:hover { background:var(--bg-hover); }
.contact-avatar { width:38px; height:38px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; overflow:hidden; flex-shrink:0; position:relative; }
.contact-avatar img { width:100%; height:100%; object-fit:cover; }
.status-dot { width:11px; height:11px; border-radius:50%; border:2px solid var(--bg-sidebar); position:absolute; bottom:1px; right:1px; }
.online { background:#4caf50; }
.offline { background:#9e9e9e; }
.contact-name { font-size:14px; font-weight:500; }

.suggestion-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; margin-bottom:8px; }
.suggestion-avatar { width:38px; height:38px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; overflow:hidden; flex-shrink:0; }
.suggestion-avatar img { width:100%; height:100%; object-fit:cover; }
.suggestion-info { flex:1; min-width:0; }
.suggestion-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.suggestion-meta { font-size:11px; color:var(--text-muted); }
.btn-follow { background:none; border:1.5px solid var(--primary); color:var(--primary); padding:4px 12px; border-radius:15px; font-size:12px; font-weight:600; transition:all .2s; white-space:nowrap; }
.btn-follow:hover { background:var(--primary); color:#fff; }

/* ── 7. STORIES ──────────────────────────────────────────── */
.stories-row { display:flex; gap:12px; overflow-x:auto; padding:5px 0 15px; scrollbar-width:none; margin-bottom:5px; }
.stories-row::-webkit-scrollbar { display:none; }
.story-item { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; flex-shrink:0; transition:transform .2s; }
.story-item:hover { transform:scale(1.05); }
.story-ring { width:68px; height:68px; border-radius:50%; padding:3px; background:var(--gradient); position:relative; }
.story-ring.seen { background:#ccc; }
.story-ring.add-story { background:var(--bg-input); border:2px dashed var(--primary); }
.story-ring-inner { width:100%; height:100%; border-radius:50%; background:var(--bg-card); padding:3px; overflow:hidden; }
.story-ring-inner img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.story-add-icon { position:absolute; bottom:0; right:0; width:22px; height:22px; background:var(--gradient); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; border:2px solid var(--bg-card); }
.story-name { font-size:11px; color:var(--text-secondary); max-width:70px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.story-modal { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:5000; display:flex; align-items:center; justify-content:center; }
.story-modal-content { position:relative; width:100%; max-width:380px; height:680px; border-radius:20px; overflow:hidden; background:#111; }
.story-progress-bar { position:absolute; top:0; left:0; width:100%; height:4px; background:rgba(255,255,255,.3); z-index:10; }
.story-progress-fill { height:100%; background:#fff; animation:progressStory 5s linear forwards; }
@keyframes progressStory { from { width:0%; } to { width:100%; } }
.story-modal-header { position:absolute; top:10px; left:0; right:0; padding:10px 15px; display:flex; align-items:center; justify-content:space-between; z-index:10; }
.story-modal-avatar { width:40px; height:40px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; overflow:hidden; }
.story-modal-body { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#222; }
.story-modal-body img { width:100%; height:100%; object-fit:cover; }
.story-text-content { padding:30px; text-align:center; color:#fff; font-size:22px; font-weight:600; background:var(--gradient); width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

/* ── 8. POSTS ────────────────────────────────────────────── */
.create-post-card { background:var(--bg-card); border-radius:18px; padding:18px; box-shadow:var(--shadow); border:1px solid var(--border); margin-bottom:18px; }
.create-post-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.create-post-card textarea { width:100%; border:1px solid var(--border); padding:12px 15px; border-radius:12px; resize:none; font-size:15px; background:var(--bg-input); color:var(--text); outline:none; min-height:80px; transition:border .2s; }
.create-post-card textarea:focus { border-color:var(--primary); }
.create-post-bottom { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.post-media-actions { display:flex; gap:8px; flex-wrap:wrap; }
.btn-media { background:var(--bg-input); border:none; padding:8px 14px; border-radius:20px; font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:6px; transition:all .2s; }
.btn-media:hover { background:var(--bg-hover); color:var(--primary); }

.media-preview-container { margin-top:12px; border-radius:12px; overflow:hidden; position:relative; display:none; border:2px dashed var(--border); }
.media-preview-container img,.media-preview-container video { width:100%; display:block; max-height:300px; object-fit:contain; background:#000; }
.remove-media-btn { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); color:#fff; border:none; width:28px; height:28px; border-radius:50%; font-size:16px; display:flex; align-items:center; justify-content:center; transition:.2s; }
.remove-media-btn:hover { background:#ff4d4d; }

.post-card { background:var(--bg-card); border-radius:18px; padding:18px; box-shadow:var(--shadow); border:1px solid var(--border); margin-bottom:18px; transition:box-shadow .2s; }
.post-card:hover { box-shadow:var(--shadow-md); }
.post-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.post-author-info { display:flex; gap:10px; align-items:center; }
.post-author-avatar { width:44px; height:44px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; overflow:hidden; flex-shrink:0; }
.post-author-avatar img { width:100%; height:100%; object-fit:cover; }
.post-author-name { font-weight:700; font-size:15px; }
.post-date { font-size:12px; color:var(--text-muted); }
.post-menu { display:flex; gap:6px; }
.post-menu i { padding:7px; border-radius:50%; cursor:pointer; color:var(--text-muted); transition:all .2s; font-size:14px; }
.post-menu .fa-trash:hover { background:rgba(255,77,77,.1); color:#ff4d4d; }
.post-menu .fa-pen:hover { background:var(--bg-hover); color:var(--primary); }
.post-content { font-size:15px; color:var(--text); line-height:1.6; margin-bottom:10px; }
.post-media-content { width:100%; border-radius:12px; margin-top:10px; cursor:pointer; transition:transform .2s; max-height:500px; object-fit:cover; }
.post-media-content:hover { transform:scale(1.01); }

.post-actions { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); display:flex; gap:6px; flex-wrap:wrap; }
.action-btn { display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:20px; border:none; background:none; font-size:13px; color:var(--text-secondary); font-weight:500; transition:all .2s; }
.action-btn:hover { background:var(--bg-hover); color:var(--primary); }
.action-btn.liked { color:var(--primary); }
.action-btn i { font-size:15px; }

/* Reaction bar */
.reaction-wrapper { position:relative; display:inline-block; }
.reaction-bar {
    position:absolute; bottom:calc(100% + 8px); left:0;
    background:var(--bg-card); border:1px solid var(--border); border-radius:30px;
    padding:6px 10px; display:flex; gap:4px; box-shadow:var(--shadow-md);
    opacity:0; pointer-events:none;
    transform:translateY(8px) scale(.9);
    transition:all .2s cubic-bezier(.175,.885,.32,1.275);
    z-index:200; white-space:nowrap;
}
.reaction-bar.visible { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }
.reaction-emoji-btn { background:none; border:none; font-size:24px; padding:4px; border-radius:50%; transition:transform .15s ease; line-height:1; }
.reaction-emoji-btn:hover { transform:scale(1.4) translateY(-4px); }
.reaction-emoji-btn.active { transform:scale(1.2); }

/* Comment thread */
.comment-thread { margin-bottom:2px; }
/* ── Emoji 3D animaciones globales ── */
@keyframes emojiFlyUp{0%{transform:translateY(0) scale(1);opacity:1;}60%{transform:translateY(-50px) scale(1.6);opacity:.8;}100%{transform:translateY(-90px) scale(2.2);opacity:0;}}
@keyframes emoji3dPop{0%{transform:scale(0) rotate(-25deg);opacity:0;}50%{transform:scale(1.6) rotate(8deg);opacity:1;}75%{transform:scale(.88) rotate(-4deg);}100%{transform:scale(1) rotate(0deg);opacity:1;}}
.video-react-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:12px;background:rgba(198,57,184,.2);border:1px solid rgba(198,57,184,.35);font-size:13px;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 1px 4px rgba(0,0,0,.3));animation:emoji3dPop .4s cubic-bezier(.34,1.56,.64,1);}
.video-react-chip.mine{background:rgba(198,57,184,.4);border-color:rgba(198,57,184,.7);box-shadow:0 0 10px rgba(198,57,184,.4);}

/* ── 9. AMIGOS ───────────────────────────────────────────── */
.friends-tabs { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.friend-tab { padding:8px 18px; border-radius:20px; border:none; background:var(--bg-input); color:var(--text-secondary); font-weight:600; font-size:14px; transition:all .2s; }
.friend-tab.active { background:var(--gradient); color:#fff; }
.friend-tab:hover:not(.active) { background:var(--bg-hover); color:var(--primary); }

.friends-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.friend-card { background:var(--bg-card); border-radius:16px; padding:18px 14px; text-align:center; border:1px solid var(--border); box-shadow:var(--shadow); transition:all .2s; }
.friend-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.friend-card-avatar { width:62px; height:62px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:22px; margin:0 auto 10px; overflow:hidden; }
.friend-card-avatar img { width:100%; height:100%; object-fit:cover; }
.friend-card-name { font-weight:700; font-size:14px; margin-bottom:10px; }
.btn-message-friend { background:var(--bg-input); border:none; padding:7px 14px; border-radius:15px; font-size:12px; font-weight:600; color:var(--text-secondary); width:100%; transition:all .2s; margin-bottom:4px; }
.btn-message-friend:hover { background:var(--bg-hover); color:var(--primary); }

.friend-request-card { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--bg-card); border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow); margin-bottom:10px; flex-wrap:wrap; }
.request-actions { display:flex; gap:8px; margin-left:auto; flex-shrink:0; }
.btn-accept { background:var(--gradient); color:#fff; border:none; padding:10px 18px; border-radius:15px; font-size:14px; font-weight:600; transition:all .2s; cursor:pointer; min-height:44px; touch-action:manipulation; font-family:inherit; }
.btn-reject { background:var(--bg-input); color:var(--text-secondary); border:none; padding:10px 18px; border-radius:15px; font-size:14px; font-weight:600; transition:all .2s; cursor:pointer; min-height:44px; touch-action:manipulation; font-family:inherit; }
.btn-accept:hover { transform:translateY(-1px); }
.btn-reject:hover { background:rgba(255,77,77,.1); color:#ff4d4d; }

/* ── 10. NOTIFICACIONES ──────────────────────────────────── */
.notif-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px; margin-bottom:8px; background:var(--bg-card); border:1px solid var(--border); transition:.2s; cursor:pointer; }
.notif-item.unread { background:var(--bg-hover); border-color:rgba(198,57,184,.2); }
.notif-item:hover { background:var(--bg-hover); }
.notif-icon { width:40px; height:40px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; flex-shrink:0; }
.notif-text { flex:1; font-size:14px; color:var(--text); }
.notif-text strong { color:var(--primary); }
.notif-time { font-size:11px; color:var(--text-muted); white-space:nowrap; }
.notif-dot { width:10px; height:10px; border-radius:50%; background:var(--primary); flex-shrink:0; }

/* ── 11. MENSAJES ────────────────────────────────────────── */
.messages-layout { display:flex; background:var(--bg-card); border-radius:18px; border:1px solid var(--border); overflow:hidden; height:calc(100dvh - 130px); box-shadow:var(--shadow); }
.messages-list-panel { width:280px; border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
.messages-panel-header { padding:16px; font-weight:700; font-size:16px; border-bottom:1px solid var(--border); }
.messages-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.message-preview-item { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; transition:.2s; border-bottom:1px solid var(--border); }
.message-preview-item:hover,.message-preview-item.active { background:var(--bg-hover); }
.msg-preview-avatar { width:42px; height:42px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; overflow:hidden; flex-shrink:0; }
.msg-preview-avatar img { width:100%; height:100%; object-fit:cover; }
.msg-preview-info { flex:1; overflow:hidden; }
.msg-preview-name { font-weight:600; font-size:14px; }
.msg-preview-last { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-unread-dot { width:10px; height:10px; border-radius:50%; background:var(--primary); flex-shrink:0; }

.messages-chat-panel { flex:1; display:flex; flex-direction:column; }
.chat-panel-header { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; font-weight:700; }
.chat-panel-messages { flex:1; padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; background:var(--bg); }
.chat-panel-input { padding:10px 14px; display:flex; gap:8px; align-items:center; border-top:1px solid var(--border); background:var(--bg-card); }
.chat-panel-input input { flex:1; border:1.5px solid var(--border); padding:10px 14px; border-radius:20px; font-size:14px; outline:none; background:var(--bg-input); color:var(--text); }
.chat-panel-input input:focus { border-color:var(--primary); }
.chat-panel-emoji { background:none; border:none; font-size:20px; color:var(--text-muted); transition:color .2s; }
.chat-panel-emoji:hover { color:var(--primary); }
.chat-panel-send { width:38px; height:38px; border-radius:50%; background:var(--gradient); color:#fff; border:none; font-size:14px; display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.chat-panel-send:hover { transform:scale(1.1); }
.no-chat-selected { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:var(--text-muted); }
.no-chat-selected i { font-size:50px; opacity:.3; }

/* ── 12. CHAT FLOTANTE ───────────────────────────────────── */
.chat-window { position:fixed; bottom:20px; right:300px; width:340px; background:var(--bg-card); border-radius:18px; box-shadow:0 10px 40px rgba(0,0,0,.2); display:flex; flex-direction:column; z-index:3000; overflow:hidden; border:1px solid var(--border); animation:slideUpChat .3s cubic-bezier(.22,1,.36,1); }
.chat-window.minimized { width:260px; }
.chat-window.minimized #chatBody { display:none; }
.chat-window.minimized #chatMinimizeBtn { transform:rotate(180deg); }
@keyframes slideUpChat { from { transform:translateY(20px);opacity:0; } to { transform:translateY(0);opacity:1; } }
/* ── STORY STUDIO ────────────────────────────────────────── */
#reelEditorOverlay { align-items:center; justify-content:center; }
#storyStudio { font-family:'Outfit',sans-serif; }
#studioDrawCanvas { touch-action:none; }
#studioTextEl, #studioStickerEl { will-change:transform; -webkit-user-select:none; user-select:none; }
/* En móvil el studio ocupa pantalla completa */
@media (max-width:600px) {
    #reelEditorOverlay { align-items:stretch; justify-content:stretch; padding:0; }
    #reelEditorOverlay .reel-editor-box { border-radius:0; max-height:100vh; }
    #storyStudio { max-width:100% !important; height:100dvh !important; max-height:100dvh !important; border-radius:0 !important; }
}
/* Fix 1: Story image - always complete */
.story-ring-inner img, .story-ring-inner video { width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* Fix 7: Fullscreen zoom transition */
#fullscreenImg { transition:transform .15s ease; transform-origin:center center; }
/* Fix 8: Stats item hover */
.stat-item:hover { background:var(--bg-hover); border-radius:12px; }
/* Live Stream animations */
@keyframes recBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes floatUp { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-120px);opacity:0} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
/* Post image - show full */
.post-media-img { transition:filter .3s ease; }
.post-media-img:hover { cursor:zoom-in; }
.voice-recording { animation:voicePulse .8s infinite; background:rgba(255,77,77,.1) !important; }
/* Preview bar voz */
#voicePreviewBar { display:flex; }
.chat-panel-input { padding:8px 10px; display:flex; gap:6px; align-items:center; border-top:1px solid var(--border); background:var(--bg-card); flex-wrap:nowrap; overflow:hidden; min-height:52px; }
/* En pantallas pequeñas, el input del panel puede ocupar su propio row */
@media (max-width:480px) {
    .chat-panel-input { flex-wrap:wrap; padding:6px 8px; gap:4px; }
    .chat-panel-input input { flex:1 1 calc(100% - 120px); min-width:80px; order:0; }
    .chat-panel-input label { order:-1; }
}
.chat-header { background:var(--gradient); color:#fff; padding:12px 15px; display:flex; justify-content:space-between; align-items:center; }
.chat-avatar { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; overflow:hidden; }
.chat-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-close-btn { background:none; border:none; color:#fff; font-size:22px; line-height:1; padding:0; transition:transform .2s; }
.chat-close-btn:hover { transform:scale(1.2); }
.chat-messages { height:300px; padding:12px; overflow-y:auto; background:var(--bg); display:flex; flex-direction:column; gap:8px; }
.msg { max-width:78%; padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.4; word-break:break-word; }
.msg-me { align-self:flex-end; background:var(--gradient); color:#fff; border-bottom-right-radius:4px; }
.msg-them { align-self:flex-start; background:var(--bg-card); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:4px; }
.msg-time { font-size:10px; opacity:.6; margin-top:3px; text-align:right; }
.chat-input-area { padding:8px 10px; display:flex; gap:6px; align-items:center; border-top:1px solid var(--border); background:var(--bg-card); }
.chat-input-area input { flex:1; border:1px solid var(--border); padding:9px 13px; border-radius:20px; outline:none; font-size:14px; background:var(--bg-input); color:var(--text); }
.chat-input-area input:focus { border-color:var(--primary); }
.emoji-trigger-btn { background:none; border:none; font-size:20px; color:var(--text-muted); padding:5px; transition:color .2s; line-height:1; }
.emoji-trigger-btn:hover { color:var(--primary); }
.send-btn { width:36px; height:36px; border-radius:50%; background:var(--gradient); color:#fff; border:none; font-size:14px; display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.send-btn:hover { transform:scale(1.1); }
.emoji-picker { border-top:1px solid var(--border); background:var(--bg-card); padding:10px; max-height:180px; overflow-y:auto; }
.emoji-grid { display:flex; flex-wrap:wrap; gap:4px; }
.emoji-btn { background:none; border:none; font-size:22px; padding:4px; border-radius:8px; transition:background .15s; line-height:1; }
.emoji-btn:hover { background:var(--bg-hover); }

/* ── 13. PERFIL ──────────────────────────────────────────── */
.profile-cover { width:100%; height:200px; background:var(--gradient); border-radius:18px; position:relative; overflow:hidden; margin-bottom:60px; }
.profile-pic-wrap { position:absolute; bottom:-45px; left:25px; }
.profile-pic { width:90px; height:90px; border-radius:50%; border:4px solid var(--bg-card); background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:30px; overflow:hidden; }
.profile-pic img { width:100%; height:100%; object-fit:cover; }
.edit-pic-btn { position:absolute; bottom:3px; right:3px; width:28px; height:28px; background:var(--gradient); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; border:2px solid var(--bg-card); }
.profile-info-card { background:var(--bg-card); border-radius:18px; padding:20px; box-shadow:var(--shadow); border:1px solid var(--border); margin-bottom:18px; }
.profile-name { font-size:22px; font-weight:800; margin-bottom:4px; }
.profile-username { font-size:14px; color:var(--text-muted); margin-bottom:10px; }
.profile-bio-text { font-size:14px; color:var(--text-secondary); margin-bottom:14px; }
.profile-stats { display:flex; gap:20px; padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:14px; flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-count { font-size:20px; font-weight:800; color:var(--primary); }
.stat-label { font-size:12px; color:var(--text-muted); }
.profile-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn-outline { background:none; border:1.5px solid var(--border); padding:9px 20px; border-radius:20px; font-size:14px; font-weight:600; color:var(--text); transition:all .2s; display:flex; align-items:center; gap:6px; }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.bio-edit-area { width:100%; border:1.5px solid var(--border); border-radius:12px; padding:10px 14px; font-size:14px; resize:none; background:var(--bg-input); color:var(--text); outline:none; transition:border .2s; margin-top:8px; }
.bio-edit-area:focus { border-color:var(--primary); }

/* ── 14. BUSCAR ──────────────────────────────────────────── */
.search-page-box { background:var(--bg-card); border-radius:18px; padding:20px; box-shadow:var(--shadow); border:1px solid var(--border); }
.search-input-wrap { position:relative; margin-bottom:20px; }
.search-input-wrap i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.search-big-input { width:100%; padding:12px 12px 12px 40px; border:1.5px solid var(--border); border-radius:14px; font-size:15px; background:var(--bg-input); color:var(--text); outline:none; transition:border .2s; }
.search-big-input:focus { border-color:var(--primary); }
.search-results { display:flex; flex-direction:column; gap:10px; }
.search-user-card { display:flex; align-items:center; gap:12px; padding:12px 15px; border-radius:14px; background:var(--bg-input); transition:.2s; }
.search-user-card:hover { background:var(--bg-hover); }
.search-user-avatar { width:48px; height:48px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:18px; overflow:hidden; flex-shrink:0; }
.search-user-avatar img { width:100%; height:100%; object-fit:cover; }
.search-user-info { flex:1; }
.search-user-name { font-weight:700; font-size:15px; }
.search-user-handle { font-size:13px; color:var(--text-muted); }
.btn-add-friend { background:var(--gradient); color:#fff; border:none; padding:8px 16px; border-radius:20px; font-size:13px; font-weight:600; transition:all .2s; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.btn-add-friend:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(198,57,184,.3); }
.btn-add-friend.sent { background:var(--bg-input); color:var(--text-muted); pointer-events:none; }
.btn-add-friend.friends { background:none; border:1.5px solid #4caf50; color:#4caf50; pointer-events:none; }

/* ── 15. REELS ───────────────────────────────────────────── */
.reels-player-container { display:flex; flex-direction:column; height:calc(100vh - var(--header-height) - 40px); min-height:500px; }
.reels-header { display:flex; justify-content:space-between; align-items:center; padding:0 0 16px; flex-shrink:0; }
.reels-scroll { flex:1; overflow-y:auto; scroll-snap-type:y mandatory; scrollbar-width:none; overscroll-behavior-y:contain; }
.reels-scroll::-webkit-scrollbar { display:none; }

.reel-card-full {
    position:relative; width:100%; max-width:100%;
    height:calc(100vh - var(--header-height) - 80px);
    min-height:480px; max-height:none;
    margin:0 auto 20px; border-radius:20px; background:#111;
    overflow:hidden; scroll-snap-align:start;
    box-shadow:0 8px 30px rgba(0,0,0,.3);
}
.reel-video-frame { position:absolute; inset:0; border-radius:20px; overflow:hidden; background:#000; }
.reel-thumb-placeholder { width:100%; height:100%; position:relative; cursor:pointer; }
.reel-thumb-placeholder img { width:100%; height:100%; object-fit:cover; }

/* Video en reel */
.reel-video-element { width:100%; height:100%; object-fit:cover; display:block; background:#000; }

.reel-play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.2); transition:background .2s; z-index:4; cursor:pointer; }
.reel-play-overlay.hidden-overlay { background:transparent; pointer-events:none; }
.reel-play-btn { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.25); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; padding-left:4px; transition:transform .2s; border:2px solid rgba(255,255,255,.5); }
.reel-play-btn:hover { transform:scale(1.1); }

/* Progress bar del video en reel */
.reel-progress-bar { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.3); z-index:10; cursor:pointer; }
.reel-progress-fill { height:100%; background:#fff; width:0%; transition:width .1s linear; pointer-events:none; }

/* Volume control */
.reel-volume-btn { position:absolute; top:14px; right:14px; background:rgba(0,0,0,.5); border:none; color:#fff; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; z-index:8; transition:background .2s; }
.reel-volume-btn:hover { background:rgba(0,0,0,.8); }
.reel-volume-slider-wrap { position:absolute; top:14px; right:56px; z-index:8; display:none; align-items:center; background:rgba(0,0,0,.6); border-radius:20px; padding:6px 10px; }
.reel-volume-slider-wrap.show { display:flex; }
.reel-volume-slider { width:80px; -webkit-appearance:none; height:4px; border-radius:2px; background:rgba(255,255,255,.4); outline:none; cursor:pointer; }
.reel-volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; cursor:pointer; }

/* Seek bar (double tap area) */
.reel-seek-left,.reel-seek-right { position:absolute; top:0; bottom:60px; width:30%; z-index:7; cursor:pointer; }
.reel-seek-left { left:0; }
.reel-seek-right { right:0; }

.reel-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.15) 40%,transparent 70%); pointer-events:none; border-radius:20px; z-index:5; }

.reel-card-info { position:absolute; bottom:24px; left:16px; right:76px; pointer-events:all; z-index:6; }
.reel-author-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.reel-music-bar { display:flex; align-items:center; gap:6px; margin-top:8px; }
.reel-music-icon { width:28px; height:28px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; animation:spinSlow 4s linear infinite; flex-shrink:0; }
@keyframes spinSlow { to { transform:rotate(360deg); } }
.reel-music-title { font-size:12px; color:rgba(255,255,255,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }

.reel-side-actions { position:absolute; right:12px; bottom:70px; display:flex; flex-direction:column; gap:18px; align-items:center; z-index:6; }
.reel-action-btn { display:flex; flex-direction:column; align-items:center; gap:4px; color:#fff; cursor:pointer; font-size:12px; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.5); transition:transform .2s; }
.reel-action-btn:hover { transform:scale(1.15); }
.reel-like-icon.fa-solid { color:#ff4d4d !important; }

.reels-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; gap:16px; color:var(--text-muted); font-size:14px; min-height:200px; }
.reels-spinner { width:36px; height:36px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Prefs modal */
.prefs-grid { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; }
.pref-chip { padding:9px 16px; border-radius:25px; border:2px solid var(--border); background:var(--bg-input); color:var(--text-secondary); font-size:14px; font-weight:500; cursor:pointer; transition:all .2s ease; user-select:none; display:flex; align-items:center; gap:4px; }
.pref-chip:hover { border-color:var(--primary); color:var(--primary); background:var(--bg-hover); transform:translateY(-1px); }
.pref-chip.selected { background:var(--gradient); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(198,57,184,.3); }
.music-subs-container { width:100%; display:flex; flex-wrap:wrap; gap:8px; padding:8px 0 4px 16px; animation:fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0;transform:translateY(-6px); } to { opacity:1;transform:translateY(0); } }
.sub-chip { font-size:12px !important; padding:6px 12px !important; border-radius:20px !important; border-color:rgba(198,57,184,.3) !important; }

/* Reel comments panel */
.reel-comments-panel { background:var(--bg-card); border-radius:20px; padding:20px; width:92%; max-width:460px; max-height:80vh; overflow-y:auto; }
.reel-comments-panel h3 { margin-bottom:16px; font-size:17px; }
.reel-comment-item { display:flex; gap:10px; margin-bottom:14px; align-items:flex-start; }
.reel-comment-body { background:var(--bg-input); border-radius:12px; padding:8px 12px; flex:1; font-size:13px; }
.reel-comment-body strong { font-size:13px; display:block; margin-bottom:2px; }
.reel-comment-input-row { display:flex; gap:8px; margin-top:12px; }
.reel-comment-input-row input { flex:1; border:1.5px solid var(--border); border-radius:20px; padding:9px 14px; font-size:14px; background:var(--bg-input); color:var(--text); outline:none; }
.reel-comment-input-row input:focus { border-color:var(--primary); }

/* Reel editor modal */
.reel-editor-box { background:var(--bg-card); border-radius:20px; padding:24px; width:92%; max-width:500px; max-height:90vh; overflow-y:auto; }
.reel-editor-box h2 { margin-bottom:20px; }
.reel-editor-preview { width:100%; aspect-ratio:9/16; background:#000; border-radius:12px; overflow:hidden; position:relative; margin-bottom:16px; max-height:300px; }
.reel-editor-preview video { width:100%; height:100%; object-fit:contain; }
.reel-text-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:22px; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.7); text-align:center; pointer-events:none; max-width:90%; word-break:break-word; }
.reel-editor-controls { display:flex; flex-direction:column; gap:12px; }
.editor-label { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:4px; display:block; }
.editor-input { width:100%; border:1.5px solid var(--border); border-radius:12px; padding:10px 14px; font-size:14px; background:var(--bg-input); color:var(--text); outline:none; }
.editor-input:focus { border-color:var(--primary); }
.editor-row { display:flex; gap:10px; align-items:center; }
.volume-control { display:flex; align-items:center; gap:8px; }
.volume-control i { color:var(--text-muted); font-size:14px; }
.volume-control input[type=range] { flex:1; -webkit-appearance:none; height:4px; border-radius:2px; background:var(--border); outline:none; cursor:pointer; }
.volume-control input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--primary); cursor:pointer; }

/* ── 16. MODALES ─────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); display:none; justify-content:center; align-items:center; z-index:4000; }
.modal-box { background:var(--bg-card); padding:36px 32px; border-radius:24px; text-align:center; width:92%; max-width:480px; max-height:92vh; overflow-y:auto; transform:scale(.85); opacity:0; transition:.4s cubic-bezier(.175,.885,.32,1.275); }
.modal-overlay.active .modal-box { transform:scale(1); opacity:1; }
.modal-box h2 { margin-bottom:20px; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.modal-box input:not([type="checkbox"]):not([type="radio"]),.modal-box select,.modal-box textarea { width:100%; padding:13px 16px; margin:8px 0; border:1.5px solid var(--border); border-radius:14px; background:var(--bg-input); color:var(--text); outline:none; font-size:15px; transition:.2s; font-family:inherit; }
.modal-box input[type="date"] { color:var(--text); }
.modal-box input:not([type="checkbox"]):not([type="radio"]):focus,.modal-box select:focus { border-color:var(--primary); }
.modal-box select { appearance:none; -webkit-appearance:none; cursor:pointer; }
/* Checkboxes en modal: tamaño y estilo propios, NO afectados por la regla de inputs */
.modal-box input[type="checkbox"],.modal-box input[type="radio"] {
    width:20px; height:20px; margin:0;
    accent-color:var(--primary);
    cursor:pointer;
    flex-shrink:0;
    touch-action:manipulation;
}
.close-text { margin-top:14px; cursor:pointer; color:var(--text-muted); font-size:14px; transition:color .2s; }
.close-text:hover { color:var(--primary); }
#recoveryModal { z-index:5000; }
#recoveryModal .modal-box { border:2px solid var(--primary); }
.img-fullscreen { position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:6000; display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
.img-fullscreen img { max-width:95vw; max-height:95vh; object-fit:contain; border-radius:12px; }

/* ── 17. MISC ────────────────────────────────────────────── */
.empty-state { text-align:center; padding:50px 20px; color:var(--text-muted); }
.empty-state i { font-size:48px; margin-bottom:14px; opacity:.3; display:block; }
.empty-state p { font-size:15px; }
.user-avatar { width:44px; height:44px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; overflow:hidden; flex-shrink:0; }
.user-avatar img { width:100%; height:100%; object-fit:cover; }
.toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px); background:#1c1c1c; color:#fff; padding:12px 24px; border-radius:30px; font-size:14px; font-weight:500; z-index:9999; opacity:0; transition:all .3s; pointer-events:none; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── 18. DARK MODE EXTRAS ────────────────────────────────── */
[data-theme="dark"] .reaction-bar { background:#222; border-color:#333; }
[data-theme="dark"] .pref-chip { background:#252525; border-color:#333; color:#aaa; }
[data-theme="dark"] .pref-chip:hover { background:var(--bg-hover); }
[data-theme="dark"] .reel-editor-box,[data-theme="dark"] .reel-comments-panel { background:#1a1a1a; }

/* ── 19. MOBILE BOTTOM NAV ───────────────────────────────── */
.mobile-bottom-nav { display:none; }

@media (max-width:860px) {
    .mobile-bottom-nav {
        display:flex; position:fixed; bottom:0; left:0; right:0;
        height:var(--mobile-nav-height); background:var(--bg-card);
        border-top:1px solid var(--border); z-index:900;
        padding-bottom:env(safe-area-inset-bottom);
        backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    }
    .nav-tab {
        flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:3px; color:var(--text-muted); font-size:10px; font-weight:600;
        cursor:pointer; transition:color .2s; position:relative;
        -webkit-tap-highlight-color:transparent;
        min-height:44px;
    }
    .nav-tab i { font-size:20px; transition:transform .2s; }
    .nav-tab.active { color:var(--primary); }
    .nav-tab.active i { transform:scale(1.15); }
}

/* ── 20. RESPONSIVE ──────────────────────────────────────── */

/* Tablet: ocultar sidebar derecho */
@media (max-width:1100px) {
    .sidebar-right { display:none; }
    .app-main { margin-right:0; }
}

/* Tablet: sidebar izquierdo compacto */
@media (max-width:860px) and (min-width:601px) {
    :root { --sidebar-width:68px; }
    .sidebar-item { justify-content:center; padding:11px; gap:0; }
    .sidebar-item span { display:none; }
    .sidebar-logo { display:flex; justify-content:center; padding:16px 0; }
    .sidebar-logo img { width:32px !important; }
    .mini-info { display:none; }
    .sidebar-profile { justify-content:center; padding:10px 0; }
}

/* Móvil: sin sidebar izquierdo */
@media (max-width:600px) {
    :root { --sidebar-width:0px; --right-sidebar-width:0px; --header-height:56px; }
    .sidebar-left { display:none; }
    .app-main {
        margin-left:0; margin-right:0;
        padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px);
    }
    .content-area { padding:12px; max-width:100%; }

    /* Header móvil: logo en lugar de texto */
    .app-header {
        padding:0 14px;
        height:var(--header-height);
    }
    .header-logo-mobile {
        display:flex;
        align-items:center;
    }
    /* Mostrar buscar en header móvil */
    .header-search-btn {
        display:flex !important;
    }
    .header-title-desktop { display:none !important; }

    /* Logout en header, visible en móvil */
    .logout-btn-mobile {
        display:flex !important;
    }

    /* Nav con 6 tabs */
    .mobile-bottom-nav { padding:0; }
    .nav-tab { flex:1; min-width:0; padding:6px 2px 4px; }
    .nav-tab span { font-size:9px; }
}

/* Móvil: landing */
@media (max-width:600px) {
    nav#mainNav { padding: 12px 5%; }
    .logo { width:110px; }
    .nav-links { display:none !important; }
    .logn-btn { padding:7px 14px; font-size:13px; margin-right:6px; }
    .btn-join  { padding:8px 18px; font-size:13px; }

    .hero {
        padding-top: calc(80px + env(safe-area-inset-top));
        padding-left: 5%; padding-right: 5%; padding-bottom: 40px;
        min-height: 100vh;
        display: flex; align-items: center; justify-content: center; overflow: visible;
    }
    .main-content {
        flex-direction: column; text-align: center;
        align-items: center; justify-content: center;
        gap: 0; width: 100%; margin-top: -40px;
    }
    /* Imagen arriba en móvil */
    .image-side {
        width: 100%; height: 52vw; min-height: 200px; max-height: 300px;
        flex-shrink: 0; margin-bottom: 20px;
        order: -1; position: relative; overflow: hidden;
    }
    .image-side::before {
        background:
            linear-gradient(to bottom,#070711 0%,rgba(7,7,17,.2) 10%,transparent 30%,transparent 65%,#070711 100%),
            linear-gradient(to right,#070711 0%,transparent 12%),
            linear-gradient(to left,#070711 0%,transparent 12%);
    }
    .back-img {
        max-width: 88%; max-height: 88%;
    }
    /* FIX (Lighthouse — Minimize main-thread work, móvil): el desenfoque
       grande sobre elementos animados es lo más caro de este efecto —
       se reduce el radio y se apaga el glow más pequeño (el de menor
       impacto visual), solo en pantallas chicas. Escritorio sin cambios. */
    .gl-gb { filter: blur(50px); }
    .img-glow { filter: blur(35px); }
    .gl-gb.w, .img-glow.w { display: none; }
    .text-side {
        width: 100%; display: flex; flex-direction: column;
        align-items: center; order: 0;
    }
    .text-side h1 { font-size: clamp(26px,7.5vw,40px); margin-bottom: 12px; line-height: 1.2; }
    .text-side p { font-size: 14px; margin: 0 auto 24px; max-width: 290px; line-height: 1.55; }
    #heroStartBtn {
        display: inline-flex; width: auto; min-width: 160px;
        justify-content: center; margin: 0 auto; position: static;
    }
    #heroSaberMas { margin-left: 0; margin-top: 10px; }
    .hero-stats { gap: 20px; margin-top: 24px; }
    .hero-stat-n { font-size: 18px; }
}

/* Móvil: stories */
@media (max-width:600px) {
    .stories-row { gap:10px; margin:0 -12px; padding-left:12px; padding-right:12px; }
    .story-ring { width:60px; height:60px; }
    .story-name { font-size:10px; max-width:62px; }
    .story-modal-content { width:100vw; height:100vh; max-width:100%; border-radius:0; }
}

/* Móvil: posts */
@media (max-width:600px) {
    .post-card { padding:14px; border-radius:16px; margin-bottom:14px; }
    .create-post-card { padding:14px; border-radius:16px; }
    .create-post-card textarea { font-size:14px; min-height:70px; }
    .post-author-avatar { width:38px; height:38px; font-size:14px; }
    .post-actions { gap:4px; }
    .action-btn { padding:6px 10px; font-size:12px; gap:4px; }
    .action-btn i { font-size:14px; }
    .reaction-bar { left:-10px; }
}

/* Móvil: perfil */
@media (max-width:600px) {
    .profile-cover { height:150px; border-radius:14px; margin-bottom:50px; }
    .profile-pic-wrap { bottom:-40px; left:16px; }
    .profile-pic { width:78px; height:78px; font-size:26px; }
    .profile-info-card { padding:14px; border-radius:14px; }
    .profile-name { font-size:18px; }
    .profile-stats { gap:14px; }
    .stat-count { font-size:17px; }
    .btn-outline { padding:8px 14px; font-size:13px; }
}

/* Móvil: amigos */
@media (max-width:600px) {
    .friends-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .friend-card { padding:14px 10px; border-radius:14px; }
    .friend-card-avatar { width:54px; height:54px; font-size:18px; }
    .friend-card-name { font-size:13px; }
    .friend-request-card { padding:12px; gap:10px; }
    .request-actions { margin-left:0; width:100%; justify-content:stretch; gap:10px; }
    .btn-accept, .btn-reject { flex:1; text-align:center; justify-content:center; padding:12px 10px; font-size:14px; }
}

/* Móvil: mensajes */
@media (max-width:860px) {

    /* Quitar padding del content-area cuando tiene mensajes */
    .content-area:has(#msgsWrap),
    .content-area:has(.messages-layout) {
        padding: 0 !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* Layout principal mensajes: columna */
    #msgsWrap,
    .messages-layout {
        flex-direction: column !important;
        height: calc(100dvh - var(--header-height) - var(--mobile-nav-height)) !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Strip de amigos arriba */
    #msgsStrip,
    .messages-list-panel {
        width: 100% !important;
        flex-shrink: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        height: 82px !important;
        min-height: 82px !important;
        max-height: 82px !important;
        overflow: hidden !important;
        display: block !important;
    }

    .messages-panel-header { display: none !important; }

    /* Lista de avatares: fila horizontal con scroll */
    #messagesList,
    .messages-list {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 8px 12px !important;
        gap: 10px !important;
        align-items: center !important;
        height: 82px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        touch-action: pan-x !important;
        flex-wrap: nowrap !important;
        flex: none !important;
    }
    #messagesList::-webkit-scrollbar,
    .messages-list::-webkit-scrollbar { display: none !important; }

    /* Panel chat: ocupa el resto */
    #messagesChatPanel,
    .messages-chat-panel {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        height: calc(100dvh - var(--header-height) - var(--mobile-nav-height) - 82px) !important;
    }

    .message-preview-item {
        flex-direction: column !important;
        align-items: center !important;
        min-width: 60px !important;
        flex-shrink: 0 !important;
        border-bottom: none !important;
        gap: 4px !important;
        padding: 4px 2px !important;
    }
    .msg-preview-last { display: none !important; }
    .msg-preview-avatar { width: 46px !important; height: 46px !important; border-radius: 50% !important; }
    .msg-preview-avatar img { width: 46px !important; height: 46px !important; border-radius: 50% !important; object-fit: cover !important; }

    .chat-panel-header { flex-shrink: 0 !important; padding: 10px 14px !important; }
    .chat-panel-messages { flex: 1 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; padding: 10px 12px !important; gap: 6px !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; background: var(--bg) !important; }
    .chat-panel-input { flex-shrink: 0 !important; }
    .msg { max-width: 82% !important; font-size: 13px !important; padding: 8px 11px !important; }

    .chat-panel-input { flex-shrink: 0 !important; padding: 8px 10px !important; gap: 6px !important; flex-wrap: nowrap !important; overflow-x: auto !important; min-height: 54px !important; align-items: center !important; scrollbar-width: none !important; }
    .chat-panel-input input { flex: 1 !important; min-width: 90px !important; font-size: 13px !important; padding: 9px 12px !important; }
    #voicePreviewBar { padding: 8px 10px !important; gap: 6px !important; }
    #voicePreviewBar audio { height: 32px !important; }
    #panelEmojiPicker   { max-height: 140px !important; }
    #panelStickerPicker { max-height: 160px !important; }
    #panelStickerPicker #stickerGrid { grid-template-columns: repeat(5,1fr) !important; gap: 3px !important; }
}

/* Móvil: chat flotante */
@media (max-width:600px) {
    .chat-window { right:0; left:0; bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px); width:100%; border-radius:18px 18px 0 0; max-height:70vh; }
    .chat-window.minimized { width:100%; left:0; right:0; }
    .chat-messages { height:240px; }
}

/* Móvil: reels — experiencia TikTok pantalla completa */
@media (max-width:600px) {
    .reels-player-container { height:calc(100vh - var(--header-height) - var(--mobile-nav-height)); min-height:0; padding:0; }
    .reels-scroll { padding:0; }
    .reels-header { position:absolute; top:0; left:0; right:0; z-index:20; background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent); padding:12px 14px 24px; margin:0; }
    .reel-card-full { max-width:100%; width:100%; height:calc(100vh - var(--header-height) - var(--mobile-nav-height)); min-height:0; max-height:none; border-radius:0; margin:0; box-shadow:none; }
    .reel-video-frame { border-radius:0; }
    .reel-card-overlay { border-radius:0; }
    .reel-side-actions { bottom:60px; right:10px; gap:16px; }
    .reel-card-info { bottom:16px; left:12px; right:60px; }
}

/* Móvil: modales */
@media (max-width:600px) {
    .modal-box { padding:22px 16px; border-radius:20px; width:96%; max-height:92vh; }
    .modal-box h2 { font-size:18px; margin-bottom:10px; }
    .modal-box input:not([type="checkbox"]):not([type="radio"]),.modal-box select,.modal-box textarea { padding:11px 12px; font-size:14px; border-radius:12px; margin:4px 0; }
    .prefs-grid { gap:8px; }
    .pref-chip { padding:8px 13px; font-size:13px; }
    .reel-editor-box { padding:16px; }
    .reel-editor-preview { max-height:220px; }
}

/* Safe area */
@media (max-width:860px) {
    nav#mainNav { padding-top:calc(12px + env(safe-area-inset-top)); }
    .mobile-menu { padding-top:calc(72px + env(safe-area-inset-top)); }
    .mobile-bottom-nav { padding-bottom:env(safe-area-inset-bottom); height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
    .toast { bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 14px); }
}

/* Landscape móvil */
@media (max-width:900px) and (orientation:landscape) {
    .hero { min-height:auto; padding-top:calc(80px + env(safe-area-inset-top)); padding-bottom:30px; }
    .main-content { flex-direction:row; text-align:left; }
    .image-side { height:200px; }
    .reel-card-full { height:88vh; }
    .story-modal-content { max-width:380px; height:96vh; }
}

/* Scrollbar */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(198,57,184,.3); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* Touch */
* { -webkit-tap-highlight-color:transparent; }
html,body,.reels-scroll,.chat-messages,.stories-row { touch-action:pan-y; }
/* messages-list: por defecto pan-y (desktop vertical), en móvil se sobreescribe a pan-x */
button,input,select,textarea,label,.sidebar-item,.nav-tab,.story-item,.action-btn,.reel-action-btn { touch-action:manipulation; }
.reel-video-element { touch-action:manipulation; cursor:pointer; }
/* YouTube iframes: pointer-events:none globalmente, pero los de reels se sobreescriben inline */
iframe { pointer-events:none; }

/* ── COOKIE BANNER (RGPD/LSSI) ──────────────────────────── */
#cookieBanner {
    position:fixed; bottom:0; left:0; right:0;
    background:var(--bg-card);
    border-top:1px solid var(--border);
    box-shadow:0 -4px 20px rgba(0,0,0,.15);
    z-index:9000;
    padding:16px 24px;
    animation:slideUpCookie .4s cubic-bezier(.22,1,.36,1);
}
@keyframes slideUpCookie { from { transform:translateY(100%); } to { transform:translateY(0); } }
.cookie-banner-inner { max-width:900px; margin:0 auto; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cookie-banner-text { flex:1; min-width:260px; }
.cookie-banner-btns { display:flex; gap:10px; flex-shrink:0; }

/* ── LEGAL MODAL ─────────────────────────────────────────── */
#legalModal .modal-box { max-width:640px; max-height:88vh; overflow-y:auto; text-align:left; padding:32px; }
.legal-section { margin-bottom:22px; }
.legal-section h3 { font-size:15px; font-weight:700; color:var(--text); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.legal-section p,.legal-section li { font-size:13px; color:var(--text-secondary); line-height:1.75; margin-bottom:6px; }
.legal-section ul { padding-left:18px; }
.legal-section strong { color:var(--text); }
.legal-badge { display:inline-flex; align-items:center; gap:6px; background:var(--bg-hover); border:1px solid rgba(198,57,184,.25); color:var(--primary); border-radius:20px; padding:4px 12px; font-size:12px; font-weight:600; margin:0 4px 12px 0; }
.legal-toc { background:var(--bg-input); border-radius:12px; padding:14px 16px; margin-bottom:20px; }
.legal-toc span { font-size:12px; color:var(--text-muted); display:block; margin-bottom:6px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.legal-nav-item { font-size:13px; color:var(--primary); cursor:pointer; display:block; padding:2px 0; }
.legal-nav-item:hover { text-decoration:underline; }

@media (max-width:600px) {
    #cookieBanner { padding:14px 16px; }
    .cookie-banner-inner { gap:12px; }
    .cookie-banner-btns { width:100%; justify-content:flex-end; }
    #legalModal .modal-box { padding:18px 12px; }
}

/* ── MENÚ HAMBURGUESA MÓVIL ──────────────────────────────── */
.hamburger-btn {
    display: none;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: var(--gradient);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-left: 8px;
    font-size: 17px;
    color: #fff;
    transition: opacity .2s, transform .2s;
    flex-shrink: 0;
}
.hamburger-btn:hover { opacity: .85; }
.hamburger-btn:active { transform: scale(.93); }
.hamburger-btn span { display: none; } /* ocultar spans — usamos icono FA */

/* Menú desplegable móvil */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(198,57,184,.2);
    padding-top: calc(72px + env(safe-area-inset-top));
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 16px;
    z-index: 998;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    max-height: 80vh;
    overflow-y: auto;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .3s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.mobile-menu.open {
    clip-path: inset(0 0 0% 0);
    pointer-events: auto;
}
.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background .2s;
    flex-shrink: 0;
}
.mobile-menu-item:hover,
.mobile-menu-item:active { background: var(--bg-hover); }
.mobile-menu-item i {
    width: 20px;
    text-align: center;
    color: var(--primary);
    font-size: 15px;
    flex-shrink: 0;
}
.mobile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .hamburger-btn { display: flex; }
    .mobile-menu   { display: flex; }
}

/* ============================================================


/* ================================================================
   GLOBALINK — RESPONSIVE DESKTOP / 2K / 4K / ULTRAWIDE
   Fase: GF15 Responsive
   Todas las reglas están bajo min-width — no afectan mobile.
================================================================ */

/* ══════════════════════════════════════════════════════════
   TEMAS DE COLOR COMPLETOS — Degradado en fondo + acento
   Cada tema modifica: bg, cards, sidebar, bordes, gradiente,
   hover y texto secundario. Modo oscuro/claro heredado.
   ══════════════════════════════════════════════════════════ */

/* Azul Globalink */
[data-color-theme="blue"] {
    --primary:#1e6fe8; --primary-dark:#1658c4; --secondary:#1e8ee9;
    --gradient:linear-gradient(135deg,#1e6fe8,#1e8ee9);
    --gradient-soft:linear-gradient(135deg,rgba(30,111,232,.18),rgba(30,142,233,.10));
    --bg-hover:rgba(30,111,232,.12);
}
[data-color-theme="blue"][data-theme="dark"] {
    --bg:#050e1f; --bg-card:#0a1628; --bg-sidebar:#070f1c; --bg-input:#0d1a2e;
    --border:rgba(30,111,232,.18);
    --shadow:0 2px 12px rgba(30,111,232,.18); --shadow-md:0 8px 30px rgba(30,111,232,.25);
}
[data-color-theme="blue"][data-theme="light"] {
    --bg:#e8f0fe; --bg-card:#f0f6ff; --bg-sidebar:#dce8fd; --bg-input:#e4edfb;
    --border:rgba(30,111,232,.15);
}

/* Verde Esmeralda */
[data-color-theme="green"] {
    --primary:#10b981; --primary-dark:#059669; --secondary:#34d399;
    --gradient:linear-gradient(135deg,#10b981,#34d399);
    --gradient-soft:linear-gradient(135deg,rgba(16,185,129,.18),rgba(52,211,153,.10));
    --bg-hover:rgba(16,185,129,.12);
}
[data-color-theme="green"][data-theme="dark"] {
    --bg:#03110c; --bg-card:#071a10; --bg-sidebar:#051410; --bg-input:#0a1f14;
    --border:rgba(16,185,129,.18);
    --shadow:0 2px 12px rgba(16,185,129,.18); --shadow-md:0 8px 30px rgba(16,185,129,.22);
}
[data-color-theme="green"][data-theme="light"] {
    --bg:#e6faf3; --bg-card:#f0fdf8; --bg-sidebar:#d8f5ec; --bg-input:#e2fbf4;
    --border:rgba(16,185,129,.15);
}

/* Morado Premium */
[data-color-theme="purple"] {
    --primary:#7c3aed; --primary-dark:#6d28d9; --secondary:#a78bfa;
    --gradient:linear-gradient(135deg,#7c3aed,#a78bfa);
    --gradient-soft:linear-gradient(135deg,rgba(124,58,237,.18),rgba(167,139,250,.10));
    --bg-hover:rgba(124,58,237,.12);
}
[data-color-theme="purple"][data-theme="dark"] {
    --bg:#0a0516; --bg-card:#110820; --bg-sidebar:#0d061c; --bg-input:#160b28;
    --border:rgba(124,58,237,.18);
    --shadow:0 2px 12px rgba(124,58,237,.2); --shadow-md:0 8px 30px rgba(124,58,237,.28);
}
[data-color-theme="purple"][data-theme="light"] {
    --bg:#ede9fe; --bg-card:#f5f3ff; --bg-sidebar:#e4dffe; --bg-input:#ede9fe;
    --border:rgba(124,58,237,.15);
}

/* Naranja Creativo */
[data-color-theme="orange"] {
    --primary:#f97316; --primary-dark:#ea6c0a; --secondary:#fb923c;
    --gradient:linear-gradient(135deg,#f97316,#fbbf24);
    --gradient-soft:linear-gradient(135deg,rgba(249,115,22,.18),rgba(251,191,36,.10));
    --bg-hover:rgba(249,115,22,.12);
}
[data-color-theme="orange"][data-theme="dark"] {
    --bg:#100700; --bg-card:#1a0d00; --bg-sidebar:#140900; --bg-input:#1e1000;
    --border:rgba(249,115,22,.18);
    --shadow:0 2px 12px rgba(249,115,22,.18); --shadow-md:0 8px 30px rgba(249,115,22,.22);
}
[data-color-theme="orange"][data-theme="light"] {
    --bg:#fff7ed; --bg-card:#fffbf5; --bg-sidebar:#fdecd5; --bg-input:#fef3e2;
    --border:rgba(249,115,22,.15);
}

/* Rojo Energía */
[data-color-theme="red"] {
    --primary:#ef4444; --primary-dark:#dc2626; --secondary:#f87171;
    --gradient:linear-gradient(135deg,#ef4444,#f97316);
    --gradient-soft:linear-gradient(135deg,rgba(239,68,68,.18),rgba(249,115,22,.10));
    --bg-hover:rgba(239,68,68,.12);
}
[data-color-theme="red"][data-theme="dark"] {
    --bg:#0f0303; --bg-card:#1c0505; --bg-sidebar:#160404; --bg-input:#200606;
    --border:rgba(239,68,68,.18);
    --shadow:0 2px 12px rgba(239,68,68,.18); --shadow-md:0 8px 30px rgba(239,68,68,.22);
}
[data-color-theme="red"][data-theme="light"] {
    --bg:#fef2f2; --bg-card:#fff5f5; --bg-sidebar:#fde8e8; --bg-input:#feeaea;
    --border:rgba(239,68,68,.15);
}

/* Dorado Elite */
[data-color-theme="gold"] {
    --primary:#d97706; --primary-dark:#b45309; --secondary:#fbbf24;
    --gradient:linear-gradient(135deg,#d97706,#fbbf24);
    --gradient-soft:linear-gradient(135deg,rgba(217,119,6,.18),rgba(251,191,36,.10));
    --bg-hover:rgba(217,119,6,.12);
}
[data-color-theme="gold"][data-theme="dark"] {
    --bg:#0d0900; --bg-card:#1a1200; --bg-sidebar:#150e00; --bg-input:#1f1500;
    --border:rgba(217,119,6,.18);
    --shadow:0 2px 12px rgba(217,119,6,.2); --shadow-md:0 8px 30px rgba(217,119,6,.28);
}
[data-color-theme="gold"][data-theme="light"] {
    --bg:#fffbeb; --bg-card:#fefce8; --bg-sidebar:#fdf6d8; --bg-input:#fef9e7;
    --border:rgba(217,119,6,.15);
}

/* Turquesa Moderno */
[data-color-theme="teal"] {
    --primary:#0d9488; --primary-dark:#0f766e; --secondary:#2dd4bf;
    --gradient:linear-gradient(135deg,#0d9488,#2dd4bf);
    --gradient-soft:linear-gradient(135deg,rgba(13,148,136,.18),rgba(45,212,191,.10));
    --bg-hover:rgba(13,148,136,.12);
}
[data-color-theme="teal"][data-theme="dark"] {
    --bg:#020f0e; --bg-card:#051614; --bg-sidebar:#041210; --bg-input:#071b18;
    --border:rgba(13,148,136,.18);
    --shadow:0 2px 12px rgba(13,148,136,.18); --shadow-md:0 8px 30px rgba(13,148,136,.22);
}
[data-color-theme="teal"][data-theme="light"] {
    --bg:#f0fdfa; --bg-card:#f5fffe; --bg-sidebar:#e4faf7; --bg-input:#ebfdf9;
    --border:rgba(13,148,136,.15);
}

/* Gris Profesional */
[data-color-theme="gray"] {
    --primary:#6b7280; --primary-dark:#4b5563; --secondary:#9ca3af;
    --gradient:linear-gradient(135deg,#6b7280,#9ca3af);
    --gradient-soft:linear-gradient(135deg,rgba(107,114,128,.18),rgba(156,163,175,.10));
    --bg-hover:rgba(107,114,128,.12);
}
[data-color-theme="gray"][data-theme="dark"] {
    --bg:#0a0a0a; --bg-card:#141414; --bg-sidebar:#111111; --bg-input:#1a1a1a;
    --border:rgba(156,163,175,.12);
    --shadow:0 2px 12px rgba(0,0,0,.4); --shadow-md:0 8px 30px rgba(0,0,0,.5);
}
[data-color-theme="gray"][data-theme="light"] {
    --bg:#f3f4f6; --bg-card:#f9fafb; --bg-sidebar:#e5e7eb; --bg-input:#eef0f2;
    --border:rgba(107,114,128,.15);
}

/* ── PANEL SELECTOR DE TEMAS ───────────────────────────────── */
.color-theme-panel {
    position:fixed; top:0; right:0; height:100vh; width:280px;
    background:var(--bg-card); border-left:1px solid var(--border);
    z-index:9500; transform:translateX(100%);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:-8px 0 32px rgba(0,0,0,.2);
}
.color-theme-panel.open { transform:translateX(0); }
.color-theme-panel-header {
    padding:20px 18px 14px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
}
/* ══════════════════════════════════════════════════════════
   TEMAS DEGRADADO MULTICOLOR
   Cada uno define fondo degradado completo + acento
   ══════════════════════════════════════════════════════════ */

/* Aurora — violeta → azul → cian */
[data-color-theme="aurora"] {
    --primary:#6a11cb; --primary-dark:#5a0db5; --secondary:#2575fc;
    --gradient:linear-gradient(135deg,#6a11cb,#2575fc,#00d2ff);
    --gradient-soft:linear-gradient(135deg,rgba(106,17,203,.18),rgba(37,117,252,.10));
    --bg-hover:rgba(106,17,203,.12);
}
[data-color-theme="aurora"][data-theme="dark"] {
    --bg:#04010f; --bg-card:#0a0520; --bg-sidebar:#07031a; --bg-input:#0e0828;
    --border:rgba(106,17,203,.2); --shadow:0 2px 12px rgba(106,17,203,.2); --shadow-md:0 8px 30px rgba(106,17,203,.28);
}
[data-color-theme="aurora"][data-theme="light"] {
    --bg:#ede8ff; --bg-card:#f4f0ff; --bg-sidebar:#e4dcff; --bg-input:#ece5ff;
    --border:rgba(106,17,203,.15);
}

/* Sunset — rojo → amarillo → rosa */
[data-color-theme="sunset"] {
    --primary:#f83600; --primary-dark:#d42e00; --secondary:#fc5c7d;
    --gradient:linear-gradient(135deg,#f83600,#f9d423,#fc5c7d);
    --gradient-soft:linear-gradient(135deg,rgba(248,54,0,.18),rgba(252,92,125,.10));
    --bg-hover:rgba(248,54,0,.12);
}
[data-color-theme="sunset"][data-theme="dark"] {
    --bg:#100300; --bg-card:#1c0500; --bg-sidebar:#160400; --bg-input:#200600;
    --border:rgba(248,54,0,.2); --shadow:0 2px 12px rgba(248,54,0,.2); --shadow-md:0 8px 30px rgba(248,54,0,.25);
}
[data-color-theme="sunset"][data-theme="light"] {
    --bg:#fff3ee; --bg-card:#fff8f5; --bg-sidebar:#ffe8de; --bg-input:#fdeee8;
    --border:rgba(248,54,0,.15);
}

/* Ocean — azul marino → cian → verde */
[data-color-theme="ocean"] {
    --primary:#1a2980; --primary-dark:#141f60; --secondary:#26d0ce;
    --gradient:linear-gradient(135deg,#1a2980,#26d0ce,#11998e);
    --gradient-soft:linear-gradient(135deg,rgba(26,41,128,.18),rgba(38,208,206,.10));
    --bg-hover:rgba(26,41,128,.12);
}
[data-color-theme="ocean"][data-theme="dark"] {
    --bg:#010610; --bg-card:#030d1e; --bg-sidebar:#020918; --bg-input:#041126;
    --border:rgba(26,208,206,.18); --shadow:0 2px 12px rgba(26,41,128,.2); --shadow-md:0 8px 30px rgba(26,208,206,.22);
}
[data-color-theme="ocean"][data-theme="light"] {
    --bg:#e8f4f8; --bg-card:#f0f9fc; --bg-sidebar:#d8eef5; --bg-input:#e2f4f9;
    --border:rgba(26,208,206,.2);
}

/* Candy — magenta → granate → salmón */
[data-color-theme="candy"] {
    --primary:#f953c6; --primary-dark:#d940a8; --secondary:#ff6e7f;
    --gradient:linear-gradient(135deg,#f953c6,#b91d73,#ff6e7f);
    --gradient-soft:linear-gradient(135deg,rgba(249,83,198,.18),rgba(255,110,127,.10));
    --bg-hover:rgba(249,83,198,.12);
}
[data-color-theme="candy"][data-theme="dark"] {
    --bg:#0f0008; --bg-card:#1c0012; --bg-sidebar:#16000e; --bg-input:#220016;
    --border:rgba(249,83,198,.2); --shadow:0 2px 12px rgba(249,83,198,.2); --shadow-md:0 8px 30px rgba(249,83,198,.25);
}
[data-color-theme="candy"][data-theme="light"] {
    --bg:#ffeef8; --bg-card:#fff5fb; --bg-sidebar:#ffdff3; --bg-input:#ffebf7;
    --border:rgba(249,83,198,.18);
}

/* Forest — verde oscuro → verde claro → ámbar */
[data-color-theme="forest"] {
    --primary:#134e5e; --primary-dark:#0e3c4a; --secondary:#71b280;
    --gradient:linear-gradient(135deg,#134e5e,#71b280,#f0c040);
    --gradient-soft:linear-gradient(135deg,rgba(19,78,94,.18),rgba(113,178,128,.10));
    --bg-hover:rgba(19,78,94,.12);
}
[data-color-theme="forest"][data-theme="dark"] {
    --bg:#010e0a; --bg-card:#031a12; --bg-sidebar:#02140e; --bg-input:#052018;
    --border:rgba(113,178,128,.18); --shadow:0 2px 12px rgba(19,78,94,.2); --shadow-md:0 8px 30px rgba(113,178,128,.22);
}
[data-color-theme="forest"][data-theme="light"] {
    --bg:#eaf4ee; --bg-card:#f2faf4; --bg-sidebar:#d9ede0; --bg-input:#e4f5e9;
    --border:rgba(113,178,128,.2);
}

/* Cosmic — negro → índigo → magenta */
[data-color-theme="cosmic"] {
    --primary:#302b63; --primary-dark:#241f50; --secondary:#c639b8;
    --gradient:linear-gradient(135deg,#0f0c29,#302b63,#c639b8);
    --gradient-soft:linear-gradient(135deg,rgba(48,43,99,.2),rgba(198,57,184,.10));
    --bg-hover:rgba(198,57,184,.12);
}
[data-color-theme="cosmic"][data-theme="dark"] {
    --bg:#03020a; --bg-card:#08061a; --bg-sidebar:#060414; --bg-input:#0c0822;
    --border:rgba(198,57,184,.2); --shadow:0 2px 12px rgba(198,57,184,.2); --shadow-md:0 8px 30px rgba(198,57,184,.3);
}
[data-color-theme="cosmic"][data-theme="light"] {
    --bg:#ede8ff; --bg-card:#f5f2ff; --bg-sidebar:#e2dafe; --bg-input:#eae5ff;
    --border:rgba(198,57,184,.15);
}

/* Neon — verde eléctrico → azul → magenta */
[data-color-theme="neon"] {
    --primary:#00f260; --primary-dark:#00c94e; --secondary:#0575e6;
    --gradient:linear-gradient(135deg,#00f260,#0575e6,#c639b8);
    --gradient-soft:linear-gradient(135deg,rgba(0,242,96,.15),rgba(5,117,230,.10));
    --bg-hover:rgba(0,242,96,.1);
}
[data-color-theme="neon"][data-theme="dark"] {
    --bg:#010a04; --bg-card:#021508; --bg-sidebar:#011006; --bg-input:#031c0a;
    --border:rgba(0,242,96,.2); --shadow:0 2px 12px rgba(0,242,96,.18); --shadow-md:0 8px 30px rgba(0,242,96,.22);
}
[data-color-theme="neon"][data-theme="light"] {
    --bg:#e8fff2; --bg-card:#f2fff7; --bg-sidebar:#d5ffe8; --bg-input:#dfffee;
    --border:rgba(0,242,96,.2);
}

/* Fire — rojo → naranja → amarillo */
[data-color-theme="fire"] {
    --primary:#f12711; --primary-dark:#cc2010; --secondary:#f5af19;
    --gradient:linear-gradient(135deg,#f12711,#f5af19,#fff200);
    --gradient-soft:linear-gradient(135deg,rgba(241,39,17,.18),rgba(245,175,25,.10));
    --bg-hover:rgba(241,39,17,.12);
}
[data-color-theme="fire"][data-theme="dark"] {
    --bg:#0f0200; --bg-card:#1e0400; --bg-sidebar:#180300; --bg-input:#240500;
    --border:rgba(241,39,17,.2); --shadow:0 2px 12px rgba(241,39,17,.2); --shadow-md:0 8px 30px rgba(245,175,25,.22);
}
[data-color-theme="fire"][data-theme="light"] {
    --bg:#fff4e8; --bg-card:#fff9f0; --bg-sidebar:#ffe8cc; --bg-input:#fef2de;
    --border:rgba(241,39,17,.15);
}

/* Ice — aguamarina → cian claro → azul cielo */
[data-color-theme="ice"] {
    --primary:#4fc3f7; --primary-dark:#29b6f6; --secondary:#74ebd5;
    --gradient:linear-gradient(135deg,#a8edea,#74ebd5,#4fc3f7);
    --gradient-soft:linear-gradient(135deg,rgba(79,195,247,.18),rgba(116,235,213,.10));
    --bg-hover:rgba(79,195,247,.12);
}
[data-color-theme="ice"][data-theme="dark"] {
    --bg:#010d10; --bg-card:#03181e; --bg-sidebar:#021418; --bg-input:#041e26;
    --border:rgba(79,195,247,.2); --shadow:0 2px 12px rgba(79,195,247,.18); --shadow-md:0 8px 30px rgba(116,235,213,.22);
}
[data-color-theme="ice"][data-theme="light"] {
    --bg:#e8fafe; --bg-card:#f0fdff; --bg-sidebar:#d8f8fd; --bg-input:#e2fbfe;
    --border:rgba(79,195,247,.2);
}

/* Midnight — negro puro → azul marino profundo */
[data-color-theme="midnight"] {
    --primary:#4f46e5; --primary-dark:#4338ca; --secondary:#818cf8;
    --gradient:linear-gradient(135deg,#0a0a0a,#1a1a2e,#16213e);
    --gradient-soft:linear-gradient(135deg,rgba(79,70,229,.18),rgba(129,140,248,.10));
    --bg-hover:rgba(79,70,229,.12);
}
[data-color-theme="midnight"][data-theme="dark"] {
    --bg:#010106; --bg-card:#080812; --bg-sidebar:#05050e; --bg-input:#0c0c18;
    --border:rgba(79,70,229,.2); --shadow:0 2px 12px rgba(79,70,229,.2); --shadow-md:0 8px 30px rgba(79,70,229,.28);
}
[data-color-theme="midnight"][data-theme="light"] {
    --bg:#eeeeff; --bg-card:#f5f5ff; --bg-sidebar:#e2e2f8; --bg-input:#ebebff;
    --border:rgba(79,70,229,.15);
}

/* Rose — rosa pálido → salmón → coral */
[data-color-theme="rose"] {
    --primary:#f6416c; --primary-dark:#e03560; --secondary:#ff9a9e;
    --gradient:linear-gradient(135deg,#ff9a9e,#fad0c4,#f6416c);
    --gradient-soft:linear-gradient(135deg,rgba(246,65,108,.18),rgba(255,154,158,.10));
    --bg-hover:rgba(246,65,108,.12);
}
[data-color-theme="rose"][data-theme="dark"] {
    --bg:#0f020a; --bg-card:#1e0515; --bg-sidebar:#180410; --bg-input:#23061a;
    --border:rgba(246,65,108,.2); --shadow:0 2px 12px rgba(246,65,108,.2); --shadow-md:0 8px 30px rgba(246,65,108,.25);
}
[data-color-theme="rose"][data-theme="light"] {
    --bg:#fff0f5; --bg-card:#fff7fa; --bg-sidebar:#ffe2ec; --bg-input:#ffeaf2;
    --border:rgba(246,65,108,.15);
}

/* Galaxy — negro espacial → violeta → fucsia */
[data-color-theme="galaxy"] {
    --primary:#6600cc; --primary-dark:#5200a8; --secondary:#ff00ff;
    --gradient:linear-gradient(135deg,#0d0221,#6600cc,#ff00ff);
    --gradient-soft:linear-gradient(135deg,rgba(102,0,204,.18),rgba(255,0,255,.10));
    --bg-hover:rgba(102,0,204,.12);
}
[data-color-theme="galaxy"][data-theme="dark"] {
    --bg:#050007; --bg-card:#0c0018; --bg-sidebar:#090012; --bg-input:#110020;
    --border:rgba(255,0,255,.18); --shadow:0 2px 12px rgba(102,0,204,.25); --shadow-md:0 8px 30px rgba(255,0,255,.28);
}
[data-color-theme="galaxy"][data-theme="light"] {
    --bg:#f5e8ff; --bg-card:#fbf2ff; --bg-sidebar:#eddbff; --bg-input:#f3e6ff;
    --border:rgba(102,0,204,.15);
}

.color-theme-panel-header h3 { font-size:15px; font-weight:700; margin:0; }
.color-theme-panel-close {
    background:none; border:none; color:var(--text-muted); font-size:18px;
    cursor:pointer; width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:.2s;
}
.color-theme-panel-close:hover { background:var(--bg-hover); color:var(--text); }
.color-theme-panel-body { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:20px; }
.color-theme-section-title { font-size:11px; font-weight:700; letter-spacing:1.5px; color:var(--text-muted); text-transform:uppercase; margin-bottom:10px; }

/* Modo claro/oscuro */
.color-theme-mode-row { display:flex; gap:8px; }
.color-theme-mode-btn {
    flex:1; padding:10px; border-radius:12px; border:1.5px solid var(--border);
    background:var(--bg-input); color:var(--text); font-size:12px; font-weight:600;
    cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center; gap:6px;
    font-family:inherit;
}
.color-theme-mode-btn:hover { border-color:var(--primary); }
.color-theme-mode-btn.active { border-color:var(--primary); background:var(--gradient-soft); color:var(--primary); }

/* Paletas de color */
.color-theme-swatches { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.color-theme-swatch {
    aspect-ratio:1; border-radius:12px; cursor:pointer; border:2px solid transparent;
    transition:transform .15s, border-color .15s; position:relative;
    display:flex; align-items:center; justify-content:center;
}
.color-theme-swatch:hover { transform:scale(1.08); }
.color-theme-swatch.active { border-color:#fff; box-shadow:0 0 0 2px var(--primary); }
.color-theme-swatch .swatch-check {
    position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    color:#fff; font-size:16px; text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.color-theme-swatch.active .swatch-check { display:flex; }
.color-theme-swatch-label { font-size:10px; color:var(--text-muted); text-align:center; margin-top:4px; }

/* Botón para abrir el panel desde el header */
.btn-color-theme {
    width:36px; height:36px; border-radius:50%; border:none;
    background:var(--bg-input); color:var(--text); font-size:15px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
}
.btn-color-theme:hover { background:var(--bg-hover); color:var(--primary); transform:rotate(30deg); }

/* ── LAYOUT DESKTOP GENERAL ────────────────────────────────── */
@media (min-width:861px) {
    /* Feed centrado con ancho máximo cómodo */
    .content-area { max-width:680px; }

    /* Reels — estilo TikTok Web: columna centrada */
    .reels-player-container {
        display:grid;
        grid-template-rows:auto 1fr;
        height:calc(100vh - var(--header-height) - 32px);
    }
    .reels-scroll { overflow-y:scroll; }

    /* Card de reel: centrada, ancho fijo tipo TikTok */
    .reel-card-full {
        width:380px !important;
        max-width:380px !important;
        margin:0 auto 16px !important;
        border-radius:18px !important;
        height:calc(100vh - var(--header-height) - 100px) !important;
        max-height:720px !important;
    }

    /* ChatG en desktop */
    .messages-layout {
        height:calc(100vh - var(--header-height) - 48px);
        max-height:none;
        border-radius:20px;
    }
    .messages-list-panel { width:320px; }
}

/* ── LAYOUT 1280px ──────────────────────────────────────────── */
@media (min-width:1280px) {
    .content-area { max-width:720px; }
    .reel-card-full {
        width:400px !important;
        max-width:400px !important;
        max-height:780px !important;
    }
    .messages-list-panel { width:340px; }
}

/* ── LAYOUT FULL HD 1920px ─────────────────────────────────── */
@media (min-width:1920px) {
    :root {
        --sidebar-width:280px;
        --right-sidebar-width:300px;
    }
    .content-area { max-width:800px; }
    .reel-card-full {
        width:430px !important;
        max-width:430px !important;
        max-height:820px !important;
    }
    .messages-layout { max-width:1100px; margin:0 auto; }
    .messages-list-panel { width:380px; }
    .msg { max-width:70%; }
}

/* ── LAYOUT 2K 2560px ──────────────────────────────────────── */
@media (min-width:2560px) {
    :root {
        --sidebar-width:300px;
        --right-sidebar-width:320px;
    }
    .content-area { max-width:900px; }
    .reel-card-full {
        width:460px !important;
        max-width:460px !important;
        max-height:860px !important;
    }
    .messages-layout { max-width:1300px; margin:0 auto; }
    .messages-list-panel { width:420px; }
}

/* ── LAYOUT 4K 3840px ──────────────────────────────────────── */
@media (min-width:3840px) {
    :root {
        --sidebar-width:340px;
        --right-sidebar-width:360px;
        font-size:20px;
    }
    .content-area { max-width:1100px; }
    .reel-card-full {
        width:520px !important;
        max-width:520px !important;
        max-height:960px !important;
    }
    .messages-layout { max-width:1600px; margin:0 auto; }
    .messages-list-panel { width:480px; }
}

/* ── ULTRAWIDE ≥ 2100px ────────────────────────────────────── */
@media (min-width:2100px) and (max-width:2559px) {
    .content-area { max-width:860px; }
    .reel-card-full {
        width:440px !important;
        max-width:440px !important;
    }
    .messages-layout { max-width:1200px; margin:0 auto; }
}

/* ── ChatG DESKTOP — layout completo tipo Telegram/WhatsApp Web ── */
@media (min-width:861px) {
    /* El contenedor principal de mensajes hereda bien el espacio */
    .messages-layout {
        border-radius:18px;
        overflow:hidden;
    }
    /* Lista de conversaciones con scroll suave */
    .messages-list { overflow-y:auto; }
    /* Área de mensajes con fondo diferenciado */
    .chat-panel-messages {
        background:var(--bg);
        padding:20px 24px;
    }
    /* Input más cómodo en desktop */
    .chat-panel-input {
        padding:12px 18px;
        gap:10px;
    }
    .chat-panel-input input {
        padding:11px 16px;
        font-size:14px;
    }
}

/* ══════════════════════════════════════════════════════════════
   FONDOS DEGRADADOS REALES — colores saturados + glow en el cruce
   Cada tema usa sus 3 colores reales con luminosidad visible.
   Glow radial en el punto de cruce + shimmer diagonal tipo botón.
   body::after inyecta las capas de efecto sin afectar el layout.
   ══════════════════════════════════════════════════════════════ */

[data-color-theme="aurora"][data-theme="dark"] body,
[data-color-theme="aurora"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#1a0545,#0d2a8a,#003d5c) !important;
    background-attachment: fixed !important;
}
[data-color-theme="aurora"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(100,180,255,.55) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="aurora"][data-theme="dark"] .app-main,
[data-color-theme="aurora"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="aurora"][data-theme="dark"] .sidebar-left,
[data-color-theme="aurora"][data-theme="dark"] .sidebar-right,
[data-color-theme="aurora"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="aurora"][data-theme="dark"] .post-card,
[data-color-theme="aurora"][data-theme="dark"] .card,
[data-color-theme="aurora"][data-theme="dark"] .story-bar,
[data-color-theme="aurora"][data-theme="dark"] .messages-layout,
[data-color-theme="aurora"][data-theme="dark"] .modal-box,
[data-color-theme="aurora"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="aurora"][data-theme="light"] body,
[data-color-theme="aurora"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#c4aaff,#aaccff,#a0e8ff) !important;
    background-attachment: fixed !important;
}
[data-color-theme="aurora"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(130,150,255,.35) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="aurora"][data-theme="light"] .app-main,
[data-color-theme="aurora"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="aurora"][data-theme="light"] .sidebar-left,
[data-color-theme="aurora"][data-theme="light"] .sidebar-right,
[data-color-theme="aurora"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="aurora"][data-theme="light"] .post-card,
[data-color-theme="aurora"][data-theme="light"] .card,
[data-color-theme="aurora"][data-theme="light"] .story-bar,
[data-color-theme="aurora"][data-theme="light"] .messages-layout,
[data-color-theme="aurora"][data-theme="light"] .modal-box,
[data-color-theme="aurora"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="sunset"][data-theme="dark"] body,
[data-color-theme="sunset"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#5c1400,#5c4800,#5c1830) !important;
    background-attachment: fixed !important;
}
[data-color-theme="sunset"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(255,210,80,.5) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="sunset"][data-theme="dark"] .app-main,
[data-color-theme="sunset"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="sunset"][data-theme="dark"] .sidebar-left,
[data-color-theme="sunset"][data-theme="dark"] .sidebar-right,
[data-color-theme="sunset"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="sunset"][data-theme="dark"] .post-card,
[data-color-theme="sunset"][data-theme="dark"] .card,
[data-color-theme="sunset"][data-theme="dark"] .story-bar,
[data-color-theme="sunset"][data-theme="dark"] .messages-layout,
[data-color-theme="sunset"][data-theme="dark"] .modal-box,
[data-color-theme="sunset"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="sunset"][data-theme="light"] body,
[data-color-theme="sunset"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#ffbda0,#ffe89a,#ffb8cc) !important;
    background-attachment: fixed !important;
}
[data-color-theme="sunset"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(255,200,80,.3) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="sunset"][data-theme="light"] .app-main,
[data-color-theme="sunset"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="sunset"][data-theme="light"] .sidebar-left,
[data-color-theme="sunset"][data-theme="light"] .sidebar-right,
[data-color-theme="sunset"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="sunset"][data-theme="light"] .post-card,
[data-color-theme="sunset"][data-theme="light"] .card,
[data-color-theme="sunset"][data-theme="light"] .story-bar,
[data-color-theme="sunset"][data-theme="light"] .messages-layout,
[data-color-theme="sunset"][data-theme="light"] .modal-box,
[data-color-theme="sunset"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="ocean"][data-theme="dark"] body,
[data-color-theme="ocean"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#080f33,#0a4a48,#043830) !important;
    background-attachment: fixed !important;
}
[data-color-theme="ocean"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(38,208,206,.5) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="ocean"][data-theme="dark"] .app-main,
[data-color-theme="ocean"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="ocean"][data-theme="dark"] .sidebar-left,
[data-color-theme="ocean"][data-theme="dark"] .sidebar-right,
[data-color-theme="ocean"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="ocean"][data-theme="dark"] .post-card,
[data-color-theme="ocean"][data-theme="dark"] .card,
[data-color-theme="ocean"][data-theme="dark"] .story-bar,
[data-color-theme="ocean"][data-theme="dark"] .messages-layout,
[data-color-theme="ocean"][data-theme="dark"] .modal-box,
[data-color-theme="ocean"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="ocean"][data-theme="light"] body,
[data-color-theme="ocean"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#a0b8ff,#a0f0ee,#8cddc8) !important;
    background-attachment: fixed !important;
}
[data-color-theme="ocean"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(30,200,200,.3) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="ocean"][data-theme="light"] .app-main,
[data-color-theme="ocean"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="ocean"][data-theme="light"] .sidebar-left,
[data-color-theme="ocean"][data-theme="light"] .sidebar-right,
[data-color-theme="ocean"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="ocean"][data-theme="light"] .post-card,
[data-color-theme="ocean"][data-theme="light"] .card,
[data-color-theme="ocean"][data-theme="light"] .story-bar,
[data-color-theme="ocean"][data-theme="light"] .messages-layout,
[data-color-theme="ocean"][data-theme="light"] .modal-box,
[data-color-theme="ocean"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="candy"][data-theme="dark"] body,
[data-color-theme="candy"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#4a1040,#3a0825,#4a1828) !important;
    background-attachment: fixed !important;
}
[data-color-theme="candy"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(255,80,180,.55) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="candy"][data-theme="dark"] .app-main,
[data-color-theme="candy"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="candy"][data-theme="dark"] .sidebar-left,
[data-color-theme="candy"][data-theme="dark"] .sidebar-right,
[data-color-theme="candy"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="candy"][data-theme="dark"] .post-card,
[data-color-theme="candy"][data-theme="dark"] .card,
[data-color-theme="candy"][data-theme="dark"] .story-bar,
[data-color-theme="candy"][data-theme="dark"] .messages-layout,
[data-color-theme="candy"][data-theme="dark"] .modal-box,
[data-color-theme="candy"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="candy"][data-theme="light"] body,
[data-color-theme="candy"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#ffaaee,#ff80c0,#ffb0bc) !important;
    background-attachment: fixed !important;
}
[data-color-theme="candy"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(255,80,160,.3) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="candy"][data-theme="light"] .app-main,
[data-color-theme="candy"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="candy"][data-theme="light"] .sidebar-left,
[data-color-theme="candy"][data-theme="light"] .sidebar-right,
[data-color-theme="candy"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="candy"][data-theme="light"] .post-card,
[data-color-theme="candy"][data-theme="light"] .card,
[data-color-theme="candy"][data-theme="light"] .story-bar,
[data-color-theme="candy"][data-theme="light"] .messages-layout,
[data-color-theme="candy"][data-theme="light"] .modal-box,
[data-color-theme="candy"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="forest"][data-theme="dark"] body,
[data-color-theme="forest"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#071e25,#1a3d20,#3d2e00) !important;
    background-attachment: fixed !important;
}
[data-color-theme="forest"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(140,210,120,.5) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="forest"][data-theme="dark"] .app-main,
[data-color-theme="forest"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="forest"][data-theme="dark"] .sidebar-left,
[data-color-theme="forest"][data-theme="dark"] .sidebar-right,
[data-color-theme="forest"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="forest"][data-theme="dark"] .post-card,
[data-color-theme="forest"][data-theme="dark"] .card,
[data-color-theme="forest"][data-theme="dark"] .story-bar,
[data-color-theme="forest"][data-theme="dark"] .messages-layout,
[data-color-theme="forest"][data-theme="dark"] .modal-box,
[data-color-theme="forest"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="forest"][data-theme="light"] body,
[data-color-theme="forest"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#8cccd8,#aaddb0,#f5dfa0) !important;
    background-attachment: fixed !important;
}
[data-color-theme="forest"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(130,200,100,.3) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="forest"][data-theme="light"] .app-main,
[data-color-theme="forest"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="forest"][data-theme="light"] .sidebar-left,
[data-color-theme="forest"][data-theme="light"] .sidebar-right,
[data-color-theme="forest"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="forest"][data-theme="light"] .post-card,
[data-color-theme="forest"][data-theme="light"] .card,
[data-color-theme="forest"][data-theme="light"] .story-bar,
[data-color-theme="forest"][data-theme="light"] .messages-layout,
[data-color-theme="forest"][data-theme="light"] .modal-box,
[data-color-theme="forest"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="cosmic"][data-theme="dark"] body,
[data-color-theme="cosmic"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#0f0c29,#302b63,#5c1a54) !important;
    background-attachment: fixed !important;
}
[data-color-theme="cosmic"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(198,57,184,.55) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="cosmic"][data-theme="dark"] .app-main,
[data-color-theme="cosmic"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="cosmic"][data-theme="dark"] .sidebar-left,
[data-color-theme="cosmic"][data-theme="dark"] .sidebar-right,
[data-color-theme="cosmic"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="cosmic"][data-theme="dark"] .post-card,
[data-color-theme="cosmic"][data-theme="dark"] .card,
[data-color-theme="cosmic"][data-theme="dark"] .story-bar,
[data-color-theme="cosmic"][data-theme="dark"] .messages-layout,
[data-color-theme="cosmic"][data-theme="dark"] .modal-box,
[data-color-theme="cosmic"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="cosmic"][data-theme="light"] body,
[data-color-theme="cosmic"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#c8c4ff,#d8d4ff,#f0aaec) !important;
    background-attachment: fixed !important;
}
[data-color-theme="cosmic"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(180,50,170,.3) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="cosmic"][data-theme="light"] .app-main,
[data-color-theme="cosmic"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="cosmic"][data-theme="light"] .sidebar-left,
[data-color-theme="cosmic"][data-theme="light"] .sidebar-right,
[data-color-theme="cosmic"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="cosmic"][data-theme="light"] .post-card,
[data-color-theme="cosmic"][data-theme="light"] .card,
[data-color-theme="cosmic"][data-theme="light"] .story-bar,
[data-color-theme="cosmic"][data-theme="light"] .messages-layout,
[data-color-theme="cosmic"][data-theme="light"] .modal-box,
[data-color-theme="cosmic"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="neon"][data-theme="dark"] body,
[data-color-theme="neon"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#003d18,#022a5c,#3d0f38) !important;
    background-attachment: fixed !important;
}
[data-color-theme="neon"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(0,242,96,.5) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="neon"][data-theme="dark"] .app-main,
[data-color-theme="neon"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="neon"][data-theme="dark"] .sidebar-left,
[data-color-theme="neon"][data-theme="dark"] .sidebar-right,
[data-color-theme="neon"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="neon"][data-theme="dark"] .post-card,
[data-color-theme="neon"][data-theme="dark"] .card,
[data-color-theme="neon"][data-theme="dark"] .story-bar,
[data-color-theme="neon"][data-theme="dark"] .messages-layout,
[data-color-theme="neon"][data-theme="dark"] .modal-box,
[data-color-theme="neon"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="neon"][data-theme="light"] body,
[data-color-theme="neon"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#a0ffd0,#a0c8ff,#f0aaee) !important;
    background-attachment: fixed !important;
}
[data-color-theme="neon"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(0,220,90,.3) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="neon"][data-theme="light"] .app-main,
[data-color-theme="neon"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="neon"][data-theme="light"] .sidebar-left,
[data-color-theme="neon"][data-theme="light"] .sidebar-right,
[data-color-theme="neon"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="neon"][data-theme="light"] .post-card,
[data-color-theme="neon"][data-theme="light"] .card,
[data-color-theme="neon"][data-theme="light"] .story-bar,
[data-color-theme="neon"][data-theme="light"] .messages-layout,
[data-color-theme="neon"][data-theme="light"] .modal-box,
[data-color-theme="neon"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="fire"][data-theme="dark"] body,
[data-color-theme="fire"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#4a0a00,#4a3000,#3d3800) !important;
    background-attachment: fixed !important;
}
[data-color-theme="fire"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(255,200,30,.55) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="fire"][data-theme="dark"] .app-main,
[data-color-theme="fire"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="fire"][data-theme="dark"] .sidebar-left,
[data-color-theme="fire"][data-theme="dark"] .sidebar-right,
[data-color-theme="fire"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="fire"][data-theme="dark"] .post-card,
[data-color-theme="fire"][data-theme="dark"] .card,
[data-color-theme="fire"][data-theme="dark"] .story-bar,
[data-color-theme="fire"][data-theme="dark"] .messages-layout,
[data-color-theme="fire"][data-theme="dark"] .modal-box,
[data-color-theme="fire"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="fire"][data-theme="light"] body,
[data-color-theme="fire"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#ffb0a0,#ffe090,#ffff90) !important;
    background-attachment: fixed !important;
}
[data-color-theme="fire"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(255,190,20,.35) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="fire"][data-theme="light"] .app-main,
[data-color-theme="fire"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="fire"][data-theme="light"] .sidebar-left,
[data-color-theme="fire"][data-theme="light"] .sidebar-right,
[data-color-theme="fire"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="fire"][data-theme="light"] .post-card,
[data-color-theme="fire"][data-theme="light"] .card,
[data-color-theme="fire"][data-theme="light"] .story-bar,
[data-color-theme="fire"][data-theme="light"] .messages-layout,
[data-color-theme="fire"][data-theme="light"] .modal-box,
[data-color-theme="fire"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="ice"][data-theme="dark"] body,
[data-color-theme="ice"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#0a2a28,#083a28,#0a2840) !important;
    background-attachment: fixed !important;
}
[data-color-theme="ice"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(116,235,213,.5) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="ice"][data-theme="dark"] .app-main,
[data-color-theme="ice"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="ice"][data-theme="dark"] .sidebar-left,
[data-color-theme="ice"][data-theme="dark"] .sidebar-right,
[data-color-theme="ice"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="ice"][data-theme="dark"] .post-card,
[data-color-theme="ice"][data-theme="dark"] .card,
[data-color-theme="ice"][data-theme="dark"] .story-bar,
[data-color-theme="ice"][data-theme="dark"] .messages-layout,
[data-color-theme="ice"][data-theme="dark"] .modal-box,
[data-color-theme="ice"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="ice"][data-theme="light"] body,
[data-color-theme="ice"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#c8f5f2,#b0f0e0,#aadeff) !important;
    background-attachment: fixed !important;
}
[data-color-theme="ice"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(100,220,200,.3) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="ice"][data-theme="light"] .app-main,
[data-color-theme="ice"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="ice"][data-theme="light"] .sidebar-left,
[data-color-theme="ice"][data-theme="light"] .sidebar-right,
[data-color-theme="ice"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="ice"][data-theme="light"] .post-card,
[data-color-theme="ice"][data-theme="light"] .card,
[data-color-theme="ice"][data-theme="light"] .story-bar,
[data-color-theme="ice"][data-theme="light"] .messages-layout,
[data-color-theme="ice"][data-theme="light"] .modal-box,
[data-color-theme="ice"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="midnight"][data-theme="dark"] body,
[data-color-theme="midnight"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#050510,#0d0d20,#1a1870) !important;
    background-attachment: fixed !important;
}
[data-color-theme="midnight"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(79,70,229,.55) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="midnight"][data-theme="dark"] .app-main,
[data-color-theme="midnight"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="midnight"][data-theme="dark"] .sidebar-left,
[data-color-theme="midnight"][data-theme="dark"] .sidebar-right,
[data-color-theme="midnight"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="midnight"][data-theme="dark"] .post-card,
[data-color-theme="midnight"][data-theme="dark"] .card,
[data-color-theme="midnight"][data-theme="dark"] .story-bar,
[data-color-theme="midnight"][data-theme="dark"] .messages-layout,
[data-color-theme="midnight"][data-theme="dark"] .modal-box,
[data-color-theme="midnight"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="midnight"][data-theme="light"] body,
[data-color-theme="midnight"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#c0c0e8,#d0d0f4,#b0aeff) !important;
    background-attachment: fixed !important;
}
[data-color-theme="midnight"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(70,60,220,.3) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="midnight"][data-theme="light"] .app-main,
[data-color-theme="midnight"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="midnight"][data-theme="light"] .sidebar-left,
[data-color-theme="midnight"][data-theme="light"] .sidebar-right,
[data-color-theme="midnight"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="midnight"][data-theme="light"] .post-card,
[data-color-theme="midnight"][data-theme="light"] .card,
[data-color-theme="midnight"][data-theme="light"] .story-bar,
[data-color-theme="midnight"][data-theme="light"] .messages-layout,
[data-color-theme="midnight"][data-theme="light"] .modal-box,
[data-color-theme="midnight"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="rose"][data-theme="dark"] body,
[data-color-theme="rose"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#4a1020,#4a2818,#4a0820) !important;
    background-attachment: fixed !important;
}
[data-color-theme="rose"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(255,150,160,.55) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="rose"][data-theme="dark"] .app-main,
[data-color-theme="rose"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="rose"][data-theme="dark"] .sidebar-left,
[data-color-theme="rose"][data-theme="dark"] .sidebar-right,
[data-color-theme="rose"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="rose"][data-theme="dark"] .post-card,
[data-color-theme="rose"][data-theme="dark"] .card,
[data-color-theme="rose"][data-theme="dark"] .story-bar,
[data-color-theme="rose"][data-theme="dark"] .messages-layout,
[data-color-theme="rose"][data-theme="dark"] .modal-box,
[data-color-theme="rose"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="rose"][data-theme="light"] body,
[data-color-theme="rose"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#ffccd0,#fdeae0,#ffaac0) !important;
    background-attachment: fixed !important;
}
[data-color-theme="rose"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(255,130,140,.3) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="rose"][data-theme="light"] .app-main,
[data-color-theme="rose"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="rose"][data-theme="light"] .sidebar-left,
[data-color-theme="rose"][data-theme="light"] .sidebar-right,
[data-color-theme="rose"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="rose"][data-theme="light"] .post-card,
[data-color-theme="rose"][data-theme="light"] .card,
[data-color-theme="rose"][data-theme="light"] .story-bar,
[data-color-theme="rose"][data-theme="light"] .messages-layout,
[data-color-theme="rose"][data-theme="light"] .modal-box,
[data-color-theme="rose"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="galaxy"][data-theme="dark"] body,
[data-color-theme="galaxy"][data-theme="dark"] #socialApp {
    background: linear-gradient(135deg,#0d0221,#2a0055,#550055) !important;
    background-attachment: fixed !important;
}
[data-color-theme="galaxy"][data-theme="dark"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(200,0,255,.55) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, rgba(255,255,255,.06) 52%, transparent 70%);
}
[data-color-theme="galaxy"][data-theme="dark"] .app-main,
[data-color-theme="galaxy"][data-theme="dark"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="galaxy"][data-theme="dark"] .sidebar-left,
[data-color-theme="galaxy"][data-theme="dark"] .sidebar-right,
[data-color-theme="galaxy"][data-theme="dark"] .app-header {
    background: rgba(0,0,0,.32) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="galaxy"][data-theme="dark"] .post-card,
[data-color-theme="galaxy"][data-theme="dark"] .card,
[data-color-theme="galaxy"][data-theme="dark"] .story-bar,
[data-color-theme="galaxy"][data-theme="dark"] .messages-layout,
[data-color-theme="galaxy"][data-theme="dark"] .modal-box,
[data-color-theme="galaxy"][data-theme="dark"] .admin-card {
    background: rgba(0,0,0,.28) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

[data-color-theme="galaxy"][data-theme="light"] body,
[data-color-theme="galaxy"][data-theme="light"] #socialApp {
    background: linear-gradient(135deg,#c8a0ff,#e0b0ff,#ffc0ff) !important;
    background-attachment: fixed !important;
}
[data-color-theme="galaxy"][data-theme="light"] body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(180,0,240,.3) 0%, transparent 72%),
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.18) 52%, transparent 70%);
}
[data-color-theme="galaxy"][data-theme="light"] .app-main,
[data-color-theme="galaxy"][data-theme="light"] .content-area {
    background: transparent !important; position: relative; z-index: 1;
}
[data-color-theme="galaxy"][data-theme="light"] .sidebar-left,
[data-color-theme="galaxy"][data-theme="light"] .sidebar-right,
[data-color-theme="galaxy"][data-theme="light"] .app-header {
    background: rgba(255,255,255,.42) !important;
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    position: relative; z-index: 2;
}
[data-color-theme="galaxy"][data-theme="light"] .post-card,
[data-color-theme="galaxy"][data-theme="light"] .card,
[data-color-theme="galaxy"][data-theme="light"] .story-bar,
[data-color-theme="galaxy"][data-theme="light"] .messages-layout,
[data-color-theme="galaxy"][data-theme="light"] .modal-box,
[data-color-theme="galaxy"][data-theme="light"] .admin-card {
    background: rgba(255,255,255,.48) !important;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: relative; z-index: 1;
}

/* ================================================================
   CENTRO DE CONFIGURACIÓN GLOBALINK
   Todos los estilos con prefijo .cfg- para cero colisiones
================================================================ */

.cfg-wrap {
    display: flex;
    gap: 0;
    min-height: calc(100vh - var(--header-height) - 32px);
    max-width: 900px;
    margin: 0 auto;
    animation: gfFadeIn .25s ease;
}

/* ── Sidebar de tabs ─────────────────────────────────────── */
.cfg-sidebar {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 12px 20px 0;
    border-right: 1px solid var(--border);
}

.cfg-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
    font-family: inherit;
    width: 100%;
}
.cfg-tab i { font-size: 14px; width: 18px; text-align: center; }
.cfg-tab:hover { background: var(--bg-hover); color: var(--text); }
.cfg-tab--active {
    background: var(--gradient-soft);
    color: var(--primary);
    font-weight: 700;
}

/* ── Cuerpo del panel ────────────────────────────────────── */
.cfg-body {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
}

.cfg-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}
.cfg-spinner {
    width: 32px; height: 32px;
    border: 3px solid rgba(198,57,184,.3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: gfSpin .8s linear infinite;
}

/* ── Secciones ───────────────────────────────────────────── */
.cfg-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.cfg-section:last-child { border-bottom: none; margin-bottom: 0; }
.cfg-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 14px;
}

/* ── Campos ──────────────────────────────────────────────── */
.cfg-field { margin-bottom: 12px; }
.cfg-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 5px; font-weight: 500; }
.cfg-field--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: 10px;
    margin-bottom: 6px;
}
.cfg-field--row label { margin: 0; color: var(--text); font-size: 13px; }

.cfg-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.cfg-input:focus { border-color: var(--primary); }
.cfg-textarea { min-height: 80px; resize: vertical; }

.cfg-select {
    padding: 7px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}
.cfg-select:focus { border-color: var(--primary); }

/* ── Toggle switch ───────────────────────────────────────── */
.cfg-toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.cfg-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cfg-toggle-slider {
    position: absolute; inset: 0;
    background: var(--border);
    border-radius: 24px;
    cursor: pointer;
    transition: background .2s;
}
.cfg-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}
.cfg-toggle input:checked + .cfg-toggle-slider { background: var(--primary); }
.cfg-toggle input:checked + .cfg-toggle-slider::before { transform: translateX(20px); }

/* ── Botones ─────────────────────────────────────────────── */
.cfg-btn-primary {
    padding: 10px 22px;
    background: var(--gradient);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
    margin-top: 8px;
}
.cfg-btn-primary:hover { opacity: .88; }
.cfg-btn-sm {
    padding: 6px 14px;
    background: var(--gradient-soft);
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: .15s;
}
.cfg-btn-sm:hover { background: var(--primary); color: #fff; }
.cfg-btn-danger-sm {
    padding: 5px 12px;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 8px;
    color: #ef4444;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}
.cfg-btn-danger-sm:hover { background: #ef4444; color: #fff; }

/* ── Mensaje inline ──────────────────────────────────────── */
.cfg-msg {
    font-size: 12px;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-input);
    border-radius: 8px;
}
.cfg-error { color: #ef4444; font-size: 13px; padding: 20px; }

/* ── Apariencia — Modo ───────────────────────────────────── */
.cfg-mode-row { display: flex; gap: 8px; }
.cfg-mode-btn {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    font-family: inherit;
}
.cfg-mode-btn.active { border-color: var(--primary); background: var(--gradient-soft); color: var(--primary); }

/* ── Apariencia — Swatches ───────────────────────────────── */
.cfg-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.cfg-swatch-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cfg-swatch {
    width: 48px; height: 48px;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .15s, border-color .15s;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.cfg-swatch:hover { transform: scale(1.08); }
.cfg-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--primary); transform: scale(1.06); }
.cfg-swatch-check { display: none; color: #fff; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.cfg-swatch.active .cfg-swatch-check { display: block; }
.cfg-swatch-label { font-size: 10px; color: var(--text-muted); text-align: center; }

/* ── Seguridad ───────────────────────────────────────────── */
.cfg-security-row { display: flex; flex-direction: column; gap: 8px; }
.cfg-security-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    background: var(--bg-input);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.cfg-security-item i { font-size: 18px; color: var(--primary); width: 22px; text-align: center; }
.cfg-security-item div { flex: 1; }
.cfg-security-item strong { display: block; font-size: 13px; color: var(--text); }
.cfg-security-item small { font-size: 11px; color: var(--text-muted); }

.cfg-session-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px;
    background: var(--bg-input);
    border-radius: 10px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
}
.cfg-session-info { display: flex; flex-direction: column; gap: 2px; }
.cfg-session-info span { font-size: 12px; color: var(--text); font-weight: 500; }
.cfg-session-info small { font-size: 11px; color: var(--text-muted); }

/* ── Responsive móvil ────────────────────────────────────── */
@media (max-width: 600px) {
    .cfg-wrap { flex-direction: column; }
    .cfg-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 12px 0 8px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        gap: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cfg-sidebar::-webkit-scrollbar { display: none; }
    .cfg-tab { padding: 8px 12px; white-space: nowrap; font-size: 12px; }
    .cfg-tab span { display: none; }
    .cfg-tab i { font-size: 16px; width: auto; }
    .cfg-body { padding: 16px 12px; }
    .cfg-swatches { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
}

/* ── Botón configuración en header ──────────────────────── */
#headerConfigBtn:hover {
    background: var(--bg-hover);
    color: var(--primary);
}
#headerConfigBtn.active {
    color: var(--primary);
    background: var(--gradient-soft);
}

/* ================================================================
   GLOBALINK — SISTEMA EN VIVO (live.js)
   Prefijo .live- para cero colisiones
================================================================ */

.live-wrap { padding: 16px; max-width: 960px; margin: 0 auto; }

/* ── Tabs ────────────────────────────────────────────────── */
.live-tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.live-tab {
    padding:9px 18px; border-radius:20px;
    border:1.5px solid var(--border);
    background:var(--bg-input); color:var(--text-muted);
    font-size:13px; font-weight:600; cursor:pointer;
    transition:.15s; font-family:inherit;
}
.live-tab:hover { border-color:var(--primary); color:var(--text); }
.live-tab.active { background:var(--gradient); color:#fff; border-color:transparent; }

/* ── Grid de cards ───────────────────────────────────────── */
.live-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }

.live-stream-card {
    border-radius:14px; overflow:hidden; cursor:pointer;
    background:var(--bg-card); border:1px solid var(--border);
    transition:transform .15s, box-shadow .15s;
}
.live-stream-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }

.live-thumb {
    height:140px; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
}
.live-badge-live {
    position:absolute; top:8px; left:8px;
    background:rgba(239,68,68,.9); color:#fff;
    font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px;
    animation:livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.live-viewers-badge {
    position:absolute; top:8px; right:8px;
    background:rgba(0,0,0,.6); color:#fff;
    font-size:10px; padding:3px 8px; border-radius:20px;
    backdrop-filter:blur(4px);
}
.live-card-info { display:flex; gap:10px; padding:10px 12px; align-items:flex-start; }
.live-card-meta { flex:1; }
.live-card-meta strong { display:block; font-size:13px; font-weight:700; color:var(--text); }
.live-card-meta span { font-size:11px; color:var(--primary); }
.live-card-meta small { display:block; font-size:10px; color:var(--text-muted); margin-top:2px; }

/* ── Estado vacío ────────────────────────────────────────── */
.live-empty { text-align:center; padding:60px 20px; color:var(--text-muted); }
.live-empty span { font-size:48px; display:block; margin-bottom:12px; }
.live-empty p { font-size:14px; }
.live-loading { display:flex; justify-content:center; padding:60px; }
.live-spinner {
    width:32px; height:32px; border-radius:50%;
    border:3px solid rgba(198,57,184,.3); border-top-color:var(--primary);
    animation:gfSpin .8s linear infinite;
}
.live-error { color:#ef4444; font-size:13px; padding:20px; text-align:center; }

/* ── Programados ─────────────────────────────────────────── */
.live-scheduled-list { display:flex; flex-direction:column; gap:8px; }
.live-scheduled-item {
    display:flex; align-items:center; gap:12px; padding:12px 14px;
    background:var(--bg-input); border-radius:12px; border:1px solid var(--border);
}
.live-sched-info strong { display:block; font-size:13px; color:var(--text); }
.live-sched-info span   { font-size:11px; color:var(--primary); }
.live-sched-info small  { font-size:11px; color:var(--text-muted); }

/* ── Formulario de crear ─────────────────────────────────── */
.live-create-form { max-width:520px; }
.live-create-title { font-size:18px; font-weight:800; margin-bottom:20px; }
.live-form-field { margin-bottom:14px; }
.live-form-field label { display:block; font-size:12px; color:var(--text-muted); margin-bottom:5px; font-weight:500; }
.live-input {
    width:100%; padding:10px 14px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:10px; color:var(--text); font-size:13px;
    font-family:inherit; outline:none; transition:border-color .15s;
    box-sizing:border-box;
}
.live-input:focus { border-color:var(--primary); }
.live-textarea { min-height:80px; resize:vertical; }
.live-select {
    width:100%; padding:10px 14px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:10px; color:var(--text); font-size:13px;
    font-family:inherit; outline:none; cursor:pointer;
}
.live-form-actions { display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
.live-msg { font-size:12px; margin-top:8px; padding:8px 12px; background:var(--bg-input); border-radius:8px; }

/* ── Botones ─────────────────────────────────────────────── */
.live-btn-primary {
    padding:11px 24px; background:linear-gradient(135deg,#ef4444,#f97316);
    border:none; border-radius:10px; color:#fff;
    font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
    transition:opacity .15s;
}
.live-btn-primary:hover { opacity:.88; }
.live-btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.live-btn-secondary {
    padding:11px 24px; background:var(--bg-input);
    border:1.5px solid var(--border); border-radius:10px; color:var(--text);
    font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s;
}
.live-btn-secondary:hover { border-color:var(--primary); color:var(--primary); }
.live-btn-end {
    width:100%; padding:12px; margin-top:16px;
    background:rgba(239,68,68,.15); border:1.5px solid rgba(239,68,68,.4);
    border-radius:10px; color:#ef4444; font-size:13px; font-weight:700;
    cursor:pointer; font-family:inherit; transition:.15s;
}
.live-btn-end:hover { background:#ef4444; color:#fff; }
.live-btn-like, .live-btn-gift {
    padding:9px 18px; border-radius:20px; font-size:13px; font-weight:600;
    cursor:pointer; font-family:inherit; transition:.15s; border:none;
}
.live-btn-like { background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.3); }
.live-btn-like:hover { background:#ef4444; color:#fff; }
.live-btn-gift { background:var(--gradient-soft); color:var(--primary); border:1px solid var(--primary); margin-left:8px; }
.live-btn-gift:hover { background:var(--gradient); color:#fff; }
.live-btn-send {
    padding:8px 14px; background:var(--gradient); border:none;
    border-radius:10px; color:#fff; font-size:14px; cursor:pointer; flex-shrink:0;
}
.live-back-btn {
    background:none; border:none; color:var(--text-muted);
    font-size:13px; cursor:pointer; font-family:inherit; font-weight:600;
}
.live-back-btn:hover { color:var(--primary); }

/* ── Panel streamer ──────────────────────────────────────── */
.live-streamer-panel { padding:0; }
.live-stream-header { padding:14px 0 12px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.live-stream-header h2 { font-size:18px; font-weight:800; margin:8px 0 0; }
.live-streamer-body { display:grid; grid-template-columns:1fr 320px; gap:16px; }
.live-video-area { display:flex; flex-direction:column; gap:10px; }
.live-streamer-stats { display:flex; gap:16px; flex-wrap:wrap; }
.live-streamer-stats span { font-size:13px; font-weight:600; color:var(--text-muted); }

/* ── Panel de chat ───────────────────────────────────────── */
.live-chat-panel { display:flex; flex-direction:column; background:var(--bg-card); border-radius:14px; border:1px solid var(--border); overflow:hidden; height:380px; }
.live-chat-msgs { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:6px; }
.live-chat-msg { font-size:12px; color:var(--text); line-height:1.4; }
.live-chat-msg strong { color:var(--primary); margin-right:4px; }
.live-chat-msg.mine strong { color:var(--secondary); }
.live-chat-input-row { display:flex; gap:6px; padding:8px 10px; border-top:1px solid var(--border); }

/* ── Visor ───────────────────────────────────────────────── */
.live-viewer { position:relative; }
.live-viewer-header { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.live-host-info { display:flex; align-items:center; gap:10px; flex:1; }
.live-host-info strong { display:block; font-size:14px; font-weight:700; }
.live-viewer-stats { display:flex; gap:12px; font-size:12px; color:var(--text-muted); font-weight:600; }
.live-viewer-body { display:grid; grid-template-columns:1fr 300px; gap:16px; }
.live-stream-area { display:flex; flex-direction:column; gap:10px; }
.live-viewer-actions { display:flex; margin-top:4px; }

/* ── Panel de regalos ────────────────────────────────────── */
.live-gift-panel {
    position:absolute; bottom:60px; right:0; width:300px;
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:16px; z-index:100; box-shadow:var(--shadow-md);
    overflow:hidden; animation:gfFadeIn .2s ease;
}
.live-gift-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-bottom:1px solid var(--border);
    font-size:13px; font-weight:700;
}
.live-gift-panel-header button { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:16px; }
.live-gift-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px; }
.live-gift-item { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; padding:8px 4px; border-radius:10px; transition:.15s; }
.live-gift-item:hover { background:var(--bg-hover); }
.live-gift-emoji { font-size:24px; }
.live-gift-name { font-size:9px; color:var(--text-muted); text-align:center; }
.live-gift-cost { font-size:9px; color:var(--primary); font-weight:700; }

/* ── Animación regalo ────────────────────────────────────── */
.live-gift-anim {
    position:fixed; top:30%; left:50%; transform:translate(-50%,-50%);
    background:rgba(0,0,0,.8); color:#fff; border-radius:16px;
    padding:16px 24px; text-align:center; z-index:9999;
    animation:liveGiftBounce .5s ease, gfFadeIn .2s ease;
    pointer-events:none;
}
.live-gift-anim span { font-size:48px; display:block; }
.live-gift-anim small { font-size:12px; opacity:.8; }
@keyframes liveGiftBounce { 0%{transform:translate(-50%,-50%) scale(.5)} 70%{transform:translate(-50%,-50%) scale(1.1)} 100%{transform:translate(-50%,-50%) scale(1)} }

/* ── Modal ───────────────────────────────────────────────── */
.live-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,.75);
    backdrop-filter:blur(8px); z-index:9999;
    display:flex; align-items:center; justify-content:center;
}
.live-modal {
    background:var(--bg-card); border-radius:18px; padding:24px;
    width:90%; max-width:380px; border:1px solid var(--border);
}
.live-modal h3 { font-size:16px; font-weight:800; margin:0 0 16px; }
.live-modal-actions { display:flex; gap:10px; margin-top:16px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:768px) {
    .live-streamer-body,
    .live-viewer-body { grid-template-columns:1fr; }
    .live-chat-panel { height:280px; }
    .live-gift-panel { width:260px; }
    .live-gift-grid { grid-template-columns:repeat(3,1fr); }
}