.story-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: relative;
      z-index: 1;
    }
    .user-header {
      position: absolute;
      top: 10px;
      left: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      z-index: 3;
      text-shadow: 1px 1px 2px #000;
    }
    .user-header img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      padding: 2px;
      background: conic-gradient(
        from 0deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888,
        #f09433
      );
      animation: spin 4s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .user-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .user-name {
      font-size: 16px;
      font-weight: bold;
    }
    .user-time {
      font-size: 12px;
      color: #ddd;
    }
    .progress-container {
      position: absolute;
      top: 70px; /* justo debajo del avatar con 5px de margen */
      left: 10px;
      right: 10px;
      display: flex;
      gap: 5px;
      z-index: 2;
    }
    .progress-bar {
      flex: 1;
      height: 5px;
      background: rgba(255,255,255,0.3);
      border-radius: 5px;
      overflow: hidden;
    }
    .progress {
      height: 100%;
      width: 0%;
      background: gold;
      transition: width 0.2s linear;
    }
    .click-left, .click-right {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50%;
      cursor: pointer;
      z-index: 2;
    }
    .click-left { left: 0; }
    .click-right { right: 0; }
    #storyModal .modal-dialog {
      max-width: 400px;
      width: 90%;
      height: calc(100vh - 40px);
      max-height: 700px;
      margin: 20px auto;
    }
    #storyModal.modal.show {
      display: flex !important;
      align-items: center;
      justify-content: center;
    }
    #storyModal.modal.show .modal-dialog {
      display: flex;
      align-items: center;
    }
    #storyModal .modal-content {
      position: relative;
      background: #111;
      border-radius: 20px;
      overflow: hidden;
      height: 100%;
      width: 100%;
    }
    #storyModal .btn-close {
      position: absolute !important;
      top: 10px !important;
      right: 10px !important;
      z-index: 10;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.55);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px 14px;
      opacity: 1;
      border: 0;
      margin: 0 !important;
    }
    #storyModal .btn-close:hover,
    #storyModal .btn-close:focus {
      background-color: rgba(0, 0, 0, 0.75);
      opacity: 1;
      box-shadow: none;
    }
    @media (max-width: 575px) {
      #storyModal .modal-dialog {
        width: 92%;
        height: calc(100vh - 30px);
        max-height: 720px;
        margin: 15px auto;
      }
      #storyModal .btn-close {
        width: 40px;
        height: 40px;
        background-size: 16px 16px;
      }
    }