.reel-form{

    background:transparent;

    border:0;

    padding:0;

    margin:0 0 18px;

}

.reel-text{

    width:100%;
    height:90px;
    background:#2a2a2a;
    border:none;
    border-radius:10px;
    padding:12px;
    color:#fff;
    font-size:15px;
    resize:none;
    outline:none;
    box-sizing:border-box;

}

.reel-actions{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:15px;

}

.btn-video{

    background:#2563eb;
    color:#fff;
    padding:10px 18px;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
    transition:.2s;

}

.btn-video:hover{

    background:#1d4ed8;

}

.btn-publicar{

    background:#16a34a;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:10px;
    cursor:pointer;
    font-weight:bold;
    transition:.2s;

}

.btn-publicar:hover{

    background:#15803d;

}

#reel-status{

    margin:15px 0;
    color:#facc15;
    font-weight:bold;

}

#reels-feed{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.ss-reel{

    width:100%;
    max-width:100%;
    margin:0;
    background:#171717;
    border-radius:0;
    overflow:hidden;

}

.ss-video{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:0;

    background:#000;

    display:block;

}

.ss-header{

    position:absolute;

    top:0;

    left:0;

    right:0;

    z-index:100;

    display:flex;

    align-items:flex-start;

    padding:28px 18px 18px;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.70),
        rgba(0,0,0,.25),
        transparent
    );

}

.ss-avatar{

    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;

    border:2px solid #D4AF37;

    box-shadow:
        0 0 8px rgba(212,175,55,.8),
        0 0 18px rgba(212,175,55,.5);

    animation:avatarGlow 2.5s ease-in-out infinite;

}

@keyframes avatarGlow{

    0%,100%{

        box-shadow:
            0 0 8px rgba(212,175,55,.6),
            0 0 18px rgba(212,175,55,.3);

    }

    50%{

        box-shadow:
            0 0 14px rgba(212,175,55,1),
            0 0 28px rgba(212,175,55,.8);

    }

}

.ss-user{

    font-size:18px;
    font-weight:700;
    color:#fff;

}

.ss-desc{

    position:absolute;

    left:18px;
    right:80px;
    bottom:20px;

    z-index:500;

    color:#fff;

    font-size:17px;
    font-weight:500;
    line-height:1.45;

    text-shadow:0 2px 8px rgba(0,0,0,.90);
	transform:translateY(-50px);

}
@media(max-width:768px){

    .ss-reel{

        max-width:100%;
        border-radius:12px;

    }

}
.reel-reactions{

    display:flex;
    justify-content:space-around;
    align-items:flex-start;
    padding:6px 4px;
    gap:4px;
    transform:scale(2.15);
}

.reel-react{

    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    user-select:none;
    font-size:26px;
    transition:0,25s;
 
}

.reel-react:not(.active){

    filter:grayscale(100%);
    opacity:.45;

}

.reel-react:not(.active) small{

    opacity:1 !important;
    color:#ffffff !important;

}

.reel-react small{

    display:block;
    margin-top:4px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    opacity:1;

}

.reel-react:hover{

    opacity:1;
    transform:scale(1.15);

}

.reel-react.active{

    opacity:1;
    transform:scale(1.15);
    filter:drop-shadow(0 0 6px #ff3366);

}

.reel-react.active small{

    color:#ffd700;

}

.reel-comments{

    padding:15px;

    border-top:1px solid rgba(255,255,255,.08);

}

.reel-comments-list{

    max-height:220px;

    overflow-y:auto;

    margin-bottom:12px;

}

.reel-comment{

    display:flex;

    gap:10px;

    margin-bottom:12px;

}

.reel-comment-avatar{

    width:38px;
    height:38px;
    border-radius:50%;
    object-fit:cover;

    border:2px solid #D4AF37;

    animation:avatarGlow 2.5s ease-in-out infinite;

}

.reel-comment-form{

    display:flex;

    gap:10px;

}

.reel-comment-input{

    flex:1;

    border:none;

    border-radius:20px;

    background:#2b2b2b;

    color:#fff;

    padding:10px 15px;

    outline:none;

}

.reel-comment-send{

    border:none;

    background:#2563eb;

    color:#fff;

    border-radius:50%;

    width:42px;

    height:42px;

    cursor:pointer;

    font-size:18px;

}
.reel-comments-toggle{

    padding:12px 15px;

    cursor:pointer;

    color:#bbb;

    font-weight:bold;

    border-top:1px solid rgba(255,255,255,.08);

    transition:.2s;

}

.reel-comments-toggle:hover{

    color:#fff;

}

.reel-comments-list{

    display:none;

    padding:10px 15px;

}
.reel-comment-user{

    color:#fff;

    text-decoration:none;

    font-weight:bold;

}

.reel-comment-user:hover{

    color:#3b82f6;

}
.reel-comment,
.reel-comment div,
.reel-comment b,
.reel-comment-user{

    color:#fff !important;

}

.reel-comment-user{

    text-decoration:none !important;

}

.reel-comment-user:hover{

    color:#4ea3ff !important;

}

.reel-comment-input{

    color:#fff !important;

}

.reel-comment-input::placeholder{

    color:#bdbdbd !important;

}
.reel-reaction-users{

    display:none;

    margin:10px 15px;

    padding:12px;

    background:#1f1f1f;

    border-radius:10px;

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-size:14px;

    line-height:1.8;

}

.reel-reaction-users a{

    color:#fff;

    text-decoration:none;

}

.reel-reaction-users a:hover{

    color:#5aa9ff;

}
.reel-stats{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6px 12px;
    color:#fff;
    font-size:13px;
    font-weight:600;

}

.reel-total-reactions,
.reel-total-comments{

    color:#fff;
    opacity:1;

}

.reel-total-reactions b,
.reel-total-comments b{

    color:#ffd700;

}
.reel-comment-react{

    display:inline-flex;
    align-items:center;
    gap:1px;

    padding:2px 4px;

    margin-right:0px;
    margin-top:2px;

    font-size:12px;

    border-radius:12px;

    cursor:pointer;

    line-height:1;

}

.reel-comment-react small{

    font-size:10px;
    font-weight:600;
    color:#fff !important;

    margin-left:1px;

}

.reel-comment-react.active{

    opacity:1 !important;
    transform:scale(1.15);
    filter:drop-shadow(0 0 6px #ffd700);

}
.reels-topbar{

    margin:0 0 18px;

}

.reels-filtros{

    display:flex;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    padding:4px 0 8px;

    scrollbar-width:none;

}

.reels-filtros::-webkit-scrollbar{

    display:none;

}

/* ===== Filtros v2 ===== */

.reels-tab{

    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:8px 14px;

    min-height:36px;

    border-radius:999px;

    background:#202020;

    border:1px solid rgba(255,255,255,.06);

    color:#cfcfcf;

    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:.20s;

    user-select:none;

}

.reels-tab:hover{

    background:#2b2b2b;

    color:#fff;

    transform:translateY(-1px);

}

.reels-tab.active{

    color:#fff;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    border-color:rgba(37,99,235,.55);

    box-shadow:0 6px 18px rgba(37,99,235,.25);

}

.reels-tab:active{

    transform:scale(.97);

}

#reels-search{

    width:100%;
    height:48px;
    border:none;
    border-radius:28px;
    background:#2b2b2b;
    color:#fff;
    font-size:15px;
    font-weight:500;
    padding:0 18px 0 50px;
    outline:none;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.08);

}

#reels-search::placeholder{

    color:#ffffff;
    opacity:1;
    font-weight:500;

}

#reels-search:focus{

    border-color:#2563eb;
    box-shadow:0 0 10px rgba(37,99,235,.35);

}
/* ===== Tendencias ===== */

.reels-tags{

    display:flex;
    gap:8px;
    overflow-x:auto;
    margin:12px 0;
    padding-bottom:4px;

}

.reels-tags::-webkit-scrollbar{

    display:none;

}
/* ===== Tendencias Premium ===== */

.reels-tag{

    display:flex;
    align-items:center;
    gap:6px;

    background:linear-gradient(180deg,#262626,#1b1b1b);

    color:#fff;

    padding:8px 14px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.08);

    font-size:13px;
    font-weight:700;

    white-space:nowrap;

    cursor:pointer;

    transition:.20s;

    box-shadow:0 3px 10px rgba(0,0,0,.20);

}

.reels-tag:hover{

    transform:translateY(-2px);

    background:linear-gradient(180deg,#2563eb,#1d4ed8);

    border-color:#2563eb;

}

.reels-tag:active{

    transform:scale(.96);

}

.reels-tag::before{

    content:"\f02b";

    font-family:FontAwesome;

    color:#D4AF37;

    font-size:12px;

}

.reels-tag:hover::before{

    color:#fff;

}
/* ===== Encabezado del Reel ===== */

.ss-user-top{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;

}

.reels-back-link{

    color:#8ab4ff;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    transition:.2s;
	opacity:.65;

}

.reels-back-link:hover{

    color:#ffffff;
	 opacity:1;

}

.reels-back-link:active{

    opacity:.8;

}
.ss-user-info{

    flex:1;
    min-width:0;
	margin-left:12px;

}
/*========== SUBIDA DE REELS ==========*/

.reel-upload-box{

    background:linear-gradient(180deg,#1d1d1d,#131313);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:18px;
    margin-top:15px;
    text-align:center;
    animation:fadeUpload .25s ease;

}

.reel-upload-icon{

    font-size:42px;
    margin-bottom:10px;
    animation:subiendo 1s infinite;

}

.reel-upload-title{

    color:#fff;
    font-size:17px;
    font-weight:700;

}

.reel-upload-sub{

    color:#9ca3af;
    font-size:13px;
    margin:8px 0 14px;

}

.reel-progress{

    width:100%;
    height:10px;
    background:#2b2b2b;
    border-radius:30px;
    overflow:hidden;
    margin-top:12px;
    border:1px solid rgba(255,255,255,.08);

}

.reel-progress-bar{

    display:block;
    width:0%;
    height:100%;
    background:#22c55e;
    transition:width .2s linear;

}

.reel-upload-ok{

    margin-top:15px;
    padding:14px;
    border-radius:12px;
    background:#13381d;
    border:1px solid #22c55e;
    color:#7dff9c;
    text-align:center;
    font-weight:700;

}

.reel-upload-error{

    margin-top:15px;
    padding:14px;
    border-radius:12px;
    background:#3a1313;
    border:1px solid #ef4444;
    color:#ff9f9f;
    text-align:center;
    font-weight:700;

}

.btn-publicar.uploading{

    opacity:.65;
    cursor:not-allowed;

}

@keyframes barra{

    from{background-position:0 0;}
    to{background-position:200% 0;}

}

@keyframes subiendo{

    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-6px);}

}

@keyframes fadeUpload{

    from{

        opacity:0;
        transform:translateY(10px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
.ss-user-count{

    color:#9ca3af;
    font-size:12px;
    text-decoration:none;
    cursor:pointer;

}

.ss-user-count:hover{

    color:#fff;

}
.reel-comment-input.mention{

    color:#60a5fa !important;
    font-weight:700;
    border-color:#60a5fa;
    box-shadow:0 0 10px rgba(96,165,250,.25);

}
.reel-comment-actions{

    margin-top:8px;

}

.reel-comment-delete{

    display:inline-block;
    padding:5px 10px;
    border-radius:14px;
    background:#3b1616;
    border:1px solid #ef4444;
    color:#ff8f8f;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;

}

.reel-comment-delete:hover{

    background:#ef4444;
    color:#fff;

}
/* ===== Acciones del comentario ===== */

.reel-comment-actions{

    margin-top:6px;

}

.reel-comment-delete{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:24px;
    height:24px;

    border-radius:50%;

    color:#777;
    font-size:14px;

    cursor:pointer;

    transition:.2s;

}

.reel-comment-delete:hover{

    color:#ff4d4d;
    background:rgba(255,77,77,.10);
    transform:scale(1.15);

}
.reel-comment-head{

    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:4px;

}

.reel-comment-user{

    flex:1;
}

.reel-comment-menu{

    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#D4AF37;
    font-size:20px;
    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}
.reel-comment-menu:hover{

    background:rgba(212,175,55,.15);
    color:#FFD700;

    transform:scale(1.15);

}
.reel-comment-popup{

    display:none;

    position:absolute;

    top:28px;

    right:-70px;

    min-width:190px;

    background:#202020;

    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

    z-index:9999;

}

.reel-comment-popup div{

    padding:12px 15px;

    color:#fff;

    cursor:pointer;

    transition:.2s;

}

.reel-comment-popup div:hover{

    background:#2f2f2f;

}

.reel-comment-head{

    position:relative;

}
/* ===== Editor de comentarios ===== */

.reel-edit-box{

    width:100%;

    min-height:70px;

    background:#242424;

    border:1px solid rgba(255,255,255,.10);

    border-radius:10px;

    color:#fff;

    padding:10px 12px;

    resize:vertical;

    font-size:14px;

    font-family:inherit;

    outline:none;

    box-sizing:border-box;

}

.reel-edit-box:focus{

    border-color:#D4AF37;

    box-shadow:0 0 10px rgba(212,175,55,.25);

}

.reel-edit-actions{

    display:flex;

    justify-content:flex-end;

    gap:8px;

    margin-top:10px;

}

.reel-save,
.reel-cancel{

    border:none;

    border-radius:20px;

    padding:7px 16px;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

.reel-save{

    background:#16a34a;

    color:#fff;

}

.reel-save:hover{

    background:#15803d;

}

.reel-cancel{

    background:#3a3a3a;

    color:#fff;

}

.reel-cancel:hover{

    background:#4a4a4a;

}
/* ===== Menú de comentario ===== */

.reel-comment-popup{

    display:none;

    position:absolute;

    top:28px;
    right:-70px;

    width:200px;

    background:#1f1f1f;

    border:1px solid rgba(212,175,55,.20);

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.45);

    z-index:9999;

    animation:popupFade .18s ease;

}

.reel-comment-popup div{

    display:flex;

    align-items:center;

    gap:10px;

    padding:11px 14px;

    color:#ddd;

    font-size:13px;

    cursor:pointer;

    transition:.20s;

}

.reel-comment-popup div:hover{

    background:#2b2b2b;

    color:#FFD700;

}

.popup-edit{

    border-bottom:1px solid rgba(255,255,255,.06);

}

.popup-delete{

    color:#ff8c8c;

}

.popup-delete:hover{

    background:#4a1d1d !important;

    color:#ff5a5a !important;

}

@keyframes popupFade{

    from{

        opacity:0;
        transform:translateY(-8px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
.ss-user-stats{

    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:18px;

    margin-top:4px;

    font-size:12px;

    flex-wrap:wrap;

}

.ss-user-views{

    color:#9c9c9c;

    display:flex;
    align-items:center;
    gap:4px;

}

.ss-user-views::before{

    content:"";

}
.reel-comment-edited{

    margin-top:4px;

    font-size:11px;

    color:#8d8d8d;

    font-style:italic;

    user-select:none;

}
.ss-video-box{

    position:relative;
    width:100%;
    height:100dvh;
    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;

}

.ss-video{

    width:100%;

    height:100%;

    object-fit:contain;

    border-radius:0;

    background:#000;

    display:block;

}
.ss-video-actions{

    position:absolute;

    right:8px;

    top:53%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:2px;

    z-index:9999;

}

.video-action{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    cursor:pointer;

    transition:.25s;

    transform:scale(2.30);

    margin-bottom:30px;

}

.video-action i{

    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(15,15,15,.18);
    border:1px solid rgba(255,255,255,.03);

    box-shadow:0 3px 8px rgba(0,0,0,.30);

    font-size:13px;

    transition:.25s;

}

.video-action.likes i{

    color:#ff3b3b;

    opacity:15;

}

.video-action.comments i,
.video-action.views i,
.video-action.share i,
.video-action.report i{

    color:#ffffff;

    opacity:.25;

}

.video-action:hover i{

    transform:scale(1.08);

}

.video-action .num{

    margin-top:0px;

    font-size:7px;

    font-weight:700;

    color:#fff;

    line-height:1;

    text-shadow:0 2px 6px rgba(0,0,0,.9);

}

.video-action:hover i{

    transform:scale(1.12);

    background:rgba(25,25,25,.70);

}

.video-action.likes i{

    color:#ff3b3b;

}

.video-action.comments i,
.video-action.views i,
.video-action.share i,
.video-action.report i{

    color:#ffffff;

}

.video-action .num{

    margin-top:1px;

    font-size:10px;

    font-weight:700;

    color:#fff;

    line-height:1;

    text-shadow:0 2px 6px rgba(0,0,0,.9);

}
.reels-login-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.reels-login-box{

    width:85%;

    max-width:320px;

    background:rgba(20,20,20,.95);

    border-radius:18px;

    padding:25px;

    text-align:center;

    color:#fff;

    box-shadow:0 10px 30px rgba(0,0,0,.45);

}

.reels-login-box h2{

    margin:0 0 15px;

}

.reels-login-box p{

    color:#ddd;

    margin-bottom:20px;

}

.reels-btn-register,
.reels-btn-login{

    display:block;

    padding:14px;

    margin-top:10px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

}

.reels-btn-register{

    background:#2563eb;

    color:#fff;

}

.reels-btn-login{

    background:#333;

    color:#fff;

}
.reels-login-info{

    background:#2d2d2d;

    color:#fff;

    text-align:center;

    padding:14px;

    border-radius:10px;

    margin-top:10px;

    font-size:13px;

    line-height:1.5;

}

.reels-login-info span{

    color:#4da3ff;

    font-weight:700;

}
.reels-report-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.reels-report-box{

    width:320px;

    max-width:90%;

    background:#1f1f1f;

    color:#fff;

    padding:20px;

    border-radius:15px;

    box-shadow:0 10px 35px rgba(0,0,0,.45);

}

.reels-report-box h3{

    margin:0 0 15px;

    text-align:center;

}

.reels-report-box label{

    display:block;

    margin:8px 0;

}

.reels-report-box button{

    width:100%;

    margin-top:10px;

    padding:12px;

    border:0;

    border-radius:10px;

    cursor:pointer;

}

.report-send{

    background:#d32f2f;

    color:#fff;

}

.report-close{

    background:#444;

    color:#fff;

}
.reels-toast{

    position:fixed;

    left:50%;

    bottom:35px;

    transform:translateX(-50%) translateY(20px);

    background:#1e1e1e;

    color:#fff;

    padding:14px 22px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 10px 30px rgba(0,0,0,.35);

    opacity:0;

    transition:.50s;

    z-index:999999;

    font-size:14px;

    font-weight:600;

}

.reels-toast.show{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

.reels-toast i{

    color:#37d67a;

    margin-right:8px;

}
.ss-video-wrap{

    position:relative;
    overflow:visible;

}

.video-reactions-box{

    position:absolute;

    left:4px;
    top:52%;

    transform:translateY(-50%);

    z-index:300;

    pointer-events:none;

}

.video-reactions-box .reel-reactions{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:2px;

    padding:0;

    border-radius:0;

    background:transparent !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    box-shadow:none !important;
    border:none !important;

    pointer-events:auto;

}

.video-reactions-box .reel-react{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:22px;

    font-size:13px;

    cursor:pointer;

    transition:.20s;

    opacity:.70;

}

.video-reactions-box .reel-react:hover{

    transform:scale(1.10);

    opacity:1;

}

.video-reactions-box .reel-react.active{

    opacity:1;
    transform:scale(1.10);

}

.video-reactions-box .reel-react small{

    margin-top:1px;

    font-size:7px;

    font-weight:700;

    color:#fff;

    line-height:1;

}
/* ========= Reels Composer v2 ========= */

.reel-compose{

    display:flex;
    flex-direction:column;
    gap:12px;

}

.reel-compose-box{

    position:relative;

    background:#1d1d1d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    overflow:hidden;

}

.reel-compose-box .reel-text{

    width:100%;

    min-height:88px;

    border:0;

    background:transparent;

    color:#fff;

    resize:none;

    padding:16px 60px 16px 16px;

    box-sizing:border-box;

}
.reel-compose-box .btn-video{

    position:absolute;

    right:12px;
    bottom:10px;

    display:flex;
    align-items:center;
    gap:6px;

    padding:7px 12px;

    border-radius:18px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);

    color:#D4AF37;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:.20s;

}

.reel-compose-box .btn-video i{

    font-size:15px;

}

.reel-compose-box .btn-video span{

    color:#D4AF37;

}

.reel-compose-box .btn-video:hover{

    background:#2563eb;
    border-color:#2563eb;

    color:#fff;

}

.reel-compose-box .btn-video:hover span{

    color:#fff;

}

.reel-compose-box .btn-video:hover i{

    color:#fff;

}
/* ===== Buscador v2 ===== */

.reels-search-box{

    position:relative;

    margin-top:12px;

}

.reels-search-box i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#888;

    font-size:15px;

}

.reels-search-box input{

    width:100%;

    height:46px;

    padding-left:46px;

    border:none;

    border-radius:24px;

    background:#252525;

    color:#fff;

    font-size:14px;

    box-sizing:border-box;

    transition:.20s;

}

.reels-search-box input::placeholder{

    color:#9ca3af;

}

.reels-search-box input:focus{

    outline:none;

    background:#2b2b2b;

    box-shadow:0 0 0 2px rgba(37,99,235,.25);

}
/* ===== Caja de Tendencias ===== */

.reels-tags-box{

    margin:14px 0 18px;

    padding:14px;

    border-radius:18px;

    background:linear-gradient(180deg,#1d1d1d,#171717);

    border:1px solid rgba(255,255,255,.06);

}

.reels-tags-title{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:12px;

    color:#fff;

    font-size:14px;

    font-weight:700;

}

.reels-tags-title i{

    color:#ff6b00;

    font-size:15px;

}

.reels-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}
.base-box{

    background:#181818 !important;

}

.base-box__body{

    background:#181818 !important;

    padding:15px;

}
/* ===== Encabezado Reels ===== */

.base-box__head{

    text-align:center;

    padding:12px 0 20px;

    border-bottom:1px solid rgba(212,175,55,.12);

    margin-bottom:20px;

}

.base-box__head h1{

    margin:0;

    color:#D4AF37 !important;

    font-size:30px;

    font-weight:700;

    letter-spacing:.5px;

    text-align:center;

    text-shadow:0 0 12px rgba(212,175,55,.30);

}

.base-box__head::after{

    content:"Compartí videos con toda la comunidad";

    display:block;

    margin-top:8px;

    color:#c9a84f;

    font-size:14px;

    font-weight:500;

    letter-spacing:.3px;

    text-shadow:0 0 8px rgba(212,175,55,.15);

}
.base-box__head h1 i{

    margin-right:10px;

    color:#D4AF37;

    font-size:.9em;

}
/* ===== Botón Seguir ===== */
.ss-user-line{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}

.ss-user{

    flex:1;

    min-width:0;

}

.reel-follow-btn{

    flex-shrink:0;

    white-space:nowrap;

    background:transparent;

    border:0;

    padding:0;

    margin:0;

    color:#D4AF37;

    font-size:12px;

    font-weight:700;

    cursor:pointer;

    transition:.20s;

}

.reel-follow-btn.following{

    color:#6fd36f;

}

.reel-follow-btn:hover{

    color:#ffffff;

    text-decoration:underline;

}
.ss-user-info{

    flex:1;
    min-width:0;
	margin-left:12px;

}
.followers-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.75);

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:999999;

}

.followers-box{

    width:360px;
    max-width:92%;

    max-height:75vh;

    overflow:auto;

    background:#1d1d1d;

    border-radius:18px;

    padding:18px;

}

.followers-head{

    display:flex;
    justify-content:space-between;
    align-items:center;

    color:#fff;

    font-size:18px;
    font-weight:700;

    margin-bottom:15px;

}

.followers-head span{

    cursor:pointer;

    color:#D4AF37;

}

.follow-user{

    margin-bottom:12px;

}

.follow-user a{

    display:flex;
    align-items:center;

    gap:12px;

    color:#fff;

    text-decoration:none;

}

.follow-avatar{

    width:42px;
    height:42px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #D4AF37;

}

.follow-user a:hover{

    color:#D4AF37;

}

.followers-empty{

    color:#999;

    text-align:center;

    padding:20px;

}
.reel-delete-box{
    text-align:center;
    margin:6px 0;
}

.reel-delete-btn{

    background:transparent;
    border:none;

    color:#d4af37;

    font-size:11px;
    font-weight:600;

    padding:3px 6px;

    cursor:pointer;

    opacity:.75;

    transition:.2s;

}

.reel-delete-btn i{

    margin-right:4px;

}

.reel-delete-btn:hover{

    color:#ffd86b;

    opacity:1;

    text-shadow:0 0 6px rgba(212,175,55,.55);

}