/* ======== RESET / GLOBAL ======== */
    html, body {
        margin:0;
        padding:0;
        height:100%;
        font-family:'Montserrat', sans-serif;
        background:#000;
        overflow:hidden; /* Evitamos scroll del body; scroll interno en #videosContainer */
      }
      .mensaje_principal{
        display:none;
        text-align:center;
        font-size:25px; 
        color:white;
        margin-top:100px
      }
      /* ======== CONTENEDOR PRINCIPAL (SCROLL-SNAP) ======== */
      #videosContainer {
        width:100%;
        height:100vh;
        overflow-y:auto;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch; /* iOS scrolling */
        position:relative;
      }
  
      /* ======== CADA SLIDE (VIDEO) ======== */
      .videoSnap {
        scroll-snap-align: start;
        position:relative;
        width:100%;
        height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
      }
  
      /* ======== VIDEO ESTILO “SHORT” ======== */
      .videoSnap video {
        aspect-ratio:9/16;
        height:100%;
        width:auto;
        max-height:100vh;
        object-fit:cover;
        background:#000;
        cursor:pointer;
      }
  
      /* ======== OVERLAY PARA ACTIVAR SONIDO ======== */
      .overlaySound {
        position:absolute;
        top:0; left:0;
        width:100%; height:100%;
        display:flex;
        background:rgba(0,0,0,0.7);
        align-items:center;
        justify-content:center;
        color:#fff;
        text-align:center;
        cursor:pointer;
        z-index:2;
      }
      .overlaySound p {
        margin:0;
        font-size:1.2rem;
      }
  
      /* ======== OVERLAY DE INFORMACIÓN DEL VIDEO ======== */
      .video-overlay {
        position:absolute;
        bottom:12%;
        width:100%;
        text-align:center;
        color:#fff;
        font-size:1.2rem;
        text-shadow:0 0 5px rgba(0,0,0,0.7);
        z-index:3;
        padding:0 10px;
      }
      .video-overlay h3 {
        margin-bottom:10px;
        font-size:1.8;
      }
      .video-overlay p {
        margin-bottom:120px;
        font-size:14px;
      }
  
      /* ======== BARRA DE ACCIONES (seguir, like, comentar, share) ======== */
      .action-bar {
        position:absolute;
        right:10px;
        top:40%;
        display:flex;
        flex-direction:column;
        gap:20px;
        z-index:4;
      }
      .action-bar button {
        background:rgba(255,255,255,0.2);
        border:none;
        border-radius:50%;
        padding:15px;
        cursor:pointer;
        transition:background 0.3s;
      }
      .action-bar button:hover {
        background:rgba(255,255,255,0.4);
      }
      .action-bar button i {
        font-size:24px;
        color:#fff;
      }
      .action-bar button span {
        display:inline-block;
        color:#fff;
        font-size:0.8rem;
        margin-top:5px;
        text-align:center;
      }
  
      /* ======== MODAL DE COMENTARIOS ======== */
      #commentsModal {
        position:fixed;
        top:50%; left:50%;
        transform:translate(-50%,-50%) scale(0.8);
        width:90%;
        max-width:400px;
        height:70%;
        background:rgba(0,0,0,0.95);
        border-radius:20px;
        color:#fff;
        transition:all 0.3s ease;
        z-index:9999;
        display:none;
        flex-direction:column;
      }
      #commentsModal.show {
        display:flex;
        transform:translate(-50%,-50%) scale(1);
      }
      #commentsModalHeader {
        padding:10px;
        text-align:center;
        border-bottom:1px solid rgba(255,255,255,0.2);
        position:relative;
      }
      #closeComments {
        position:absolute;
        right:15px;
        top:10px;
        cursor:pointer;
      }
      #commentsList {
        flex:1;
        overflow-y:auto;
        padding:15px;
      }
      .comment {
        display:flex;
        align-items:flex-start;
        gap:10px;
        margin-bottom:15px;
        position:relative; /* Para el btn X */
      }
      .comment img.avatar {
        width:40px;
        height:40px;
        border-radius:50%;
        object-fit:cover;
      }
      .comment .comment-content {
        flex:1;
      }
      .comment .comment-content .user-name {
        font-weight:bold;
        margin-bottom:2px;
      }
      .comment .comment-content .time-ago {
        font-size:0.8rem;
        color:#aaa;
        margin-bottom:5px;
      }
      .eliminarcom {
        position:absolute;
        top:0;
        right:0;
        cursor:pointer;
        color:#f44;
        font-size:1.2rem;
        font-weight:bold;
        padding:0 10px;
        transition:all 0.2s;
      }
      .eliminarcom:hover {
        color:#ff2222;
        transform:scale(1.1);
      }
      #commentForm {
        display:flex;
        padding:10px;
        border-top:1px solid rgba(255,255,255,0.2);
      }
      #commentForm input {
        flex:1;
        padding:10px;
        border-radius:20px;
        border:none;
        outline:none;
      }
      #commentForm button {
        background:#fff;
        border:none;
        padding:10px 15px;
        border-radius:20px;
        margin-left:10px;
        cursor:pointer;
      }
  
      /* ======== MODAL PARA COMPARTIR ======== */
      #shareModal {
        display:none;
        position:fixed;
        bottom:80px;
        right:20px;
        background:#222;
        padding:20px;
        border-radius:15px;
        box-shadow:0 0 10px rgba(0,0,0,0.5);
        z-index:9999;
      }
      #shareModal h4 {
        color:white;
        margin-top:0;
        text-align:center;
      }
      .cantidadSeguidores{
        display: inline-block;
        color: #fff;
        font-size: 0.8rem;
        margin-top: 5px;
        text-align: center;
        background: #00df51bd;
        border:1px solid white;
        border-radius: 50%;
        padding: 10px;
        margin-top: 10px;
        width: 40px;
        position: absolute;
      }
      .btnSeguir{
        border-radius:50%;
        height: 65px;
        border:2px solid red;
      }
      .btnReaccion,.btnComentarios,.btnShare{
        border-radius:50%;
        height: 65px;
      }
    .signoseguir{
        font-weight:bold;
        font-size:13px!important;
        margin-top:0px!important;
    }