.vt,.vt *{box-sizing:border-box}
.vt{--rosa:#ff5f75;--sel:#16a34a;width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 15px 40px rgba(0,0,0,.12);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.vt-tabs{display:flex;background:#f5f5f5;border-bottom:1px solid #ddd}
.vt-tab{flex:1;border:none;border-right:1px solid #ddd;background:#fff;color:#000;cursor:pointer;padding:18px;font-size:15px;transition:.3s}
.vt-tab:last-child{border-right:none}
.vt-tab:hover{background:#f0f0f0}
.vt-tab{border-bottom:4px solid var(--c,#ccc)}
.vt-tab.active,.vt-tab.active:hover{background:var(--c,#16a34a);color:#fff}
.vt-tab .m{display:none;font-weight:bold}
.vt-stage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.vt-stage iframe,.vt-stage video{width:100%;height:100%;border:0;display:block}

/* Botón verde de reproducir */
.vt-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at center,#1c1c1c,#000);color:#fff}
.vt-play{position:relative;isolation:isolate;width:84px;height:84px;border-radius:50%;border:none;background:var(--sel);cursor:pointer;display:grid;place-items:center;padding:0}
.vt-play::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sel);z-index:-1;animation:vtRing 2s infinite}
.vt-play:hover{filter:brightness(.88)}
.vt-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vt-play svg{width:38px;height:38px;fill:#fff;display:block}
.vt-start small{opacity:.75;font-size:14px}
@keyframes vtRing{from{transform:scale(1);opacity:.55}to{transform:scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.vt-play::after{animation:none;display:none}}

/* Anuncios 2x2 */
.vt-ads{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;background:#000}
.vt-ads iframe{background:#fff;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
.vt-skip{position:absolute;right:10px;bottom:10px;z-index:5;border-radius:8px;background:rgba(0,0,0,.85);color:#fff;font-size:14px;font-weight:600;padding:10px 16px;cursor:pointer;border:1px solid rgba(255,255,255,.5)}
.vt-skip:hover{background:var(--sel);border-color:var(--sel)}
.vt-skip[disabled]{opacity:.6;cursor:default;background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.3)}
.vt-badge{position:absolute;left:10px;bottom:10px;z-index:5;background:#facc15;color:#000;font-size:12px;font-weight:700;padding:4px 8px;border-radius:5px}

/* ===== Reproductor MP4 personalizado (Servidor 1) ===== */
.vt .cp{position:absolute;inset:0;background:#000;color:#fff}
.vt .cp video{object-fit:contain;cursor:pointer}

/* Barra: [play] [tiempo] [——— progreso ———] [mute] [volumen] [pantalla completa] */
.vt .cp-bar{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.85));transition:opacity .25s}
.vt .cp.hide .cp-bar{opacity:0;pointer-events:none}

.vt .cp-btn{flex:0 0 auto;background:none;border:none;color:#fff;cursor:pointer;padding:6px;display:grid;place-items:center;border-radius:6px;width:auto;height:auto;margin:0}
.vt .cp-btn:hover{background:rgba(255,255,255,.18)}
.vt .cp-btn svg{width:22px;height:22px;fill:#fff}

/* Marca de tiempo: nunca se encoge ni se oculta */
.vt .cp-time{flex:0 0 auto;display:inline-block;min-width:88px;font-size:13px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}

/* Barras deslizantes con relleno de progreso */
.vt .cp input[type=range]{-webkit-appearance:none;appearance:none;height:5px;padding:0;margin:0;border:0;border-radius:3px;cursor:pointer;outline:none;
  --p:0%;background:linear-gradient(to right,var(--sel) var(--p),rgba(255,255,255,.35) var(--p))}
.vt .cp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--sel);border:none}
.vt .cp input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--sel);border:none}

/* Progreso: ocupa el espacio sobrante */
.vt .cp .cp-seek{flex:1 1 auto;width:auto;min-width:0}
/* Volumen: ancho fijo (!important por si el tema de la página fuerza width:100%) */
.vt .cp .cp-vol{flex:0 0 80px !important;width:80px !important;max-width:80px !important;min-width:0}

.vt .cp-big{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;border:none;background:var(--sel);display:grid;place-items:center;cursor:pointer;padding:0}
.vt .cp-big svg{width:36px;height:36px;fill:#fff;display:block}
.vt .cp.playing .cp-big{display:none}

/* ===== Móvil ===== */
@media(max-width:768px){
  .vt-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none}
  .vt-tabs::-webkit-scrollbar{display:none}
  .vt-tab{flex:0 0 auto;min-width:60px;height:42px;padding:0}
  .vt-tab .d{display:none}
  .vt-tab .m{display:inline}
  .vt .cp .cp-vol,.vt .cp .cp-mute{display:none !important}
  .vt .cp-bar{gap:6px;padding:20px 8px 8px}
  .vt .cp-time{min-width:78px;font-size:12px}
  .vt-skip{font-size:12px;padding:8px 12px}
  .vt-play{width:68px;height:68px}
}