.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; }
    .modal-dialog {
      max-width: 400px;
      width: 90%;
	  margin-top: 0px !important;
      height: 100%;
      max-height: 700px;
    }
    .modal-content {
      position: relative;
      background: #111;
      border-radius: 20px;
      overflow: hidden;
      height: 100%;
    }