/* Complemento "TV en vivo": lo mínimo para que el reproductor se vea bien en cualquier tema
   (cada tema le pone sus colores encima). */
.oc-tv{position:relative}
.oc-tv-frame{position:relative;aspect-ratio:16/9;background:#0b0b0f;border-radius:var(--radius,10px);overflow:hidden;color:#fff}
.oc-tv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.oc-tv-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.65));pointer-events:none}
.oc-tv-play{position:absolute;inset:0;margin:auto;z-index:2;width:84px;height:84px;border-radius:50%;border:4px solid #fff;background:var(--brand,#e10600);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s}
.oc-tv-play:hover{transform:scale(1.07)}
.oc-tv-play svg{width:34px;height:34px;fill:currentColor}
.oc-tv-live{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;background:#e10600;color:#fff;font:800 12px/1 system-ui,sans-serif;letter-spacing:.06em;padding:7px 11px;border-radius:999px}
.oc-tv-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:oc-tv-blink 1.4s infinite}
.oc-tv-cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;font:700 18px/1.25 var(--font-heading,system-ui,sans-serif);text-shadow:0 2px 10px rgba(0,0,0,.5)}
.oc-tv.is-playing .oc-tv-play,.oc-tv.is-playing .oc-tv-live{visibility:hidden}

/* La caja del video (colgada del body): encima del recuadro o flotando */
.oc-tv-dock{position:absolute;z-index:45;display:flex;flex-direction:column;background:#000;color:#fff;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.28);font-family:var(--font,system-ui,sans-serif)}
.oc-tv-dock-media{position:relative;flex:1;min-height:0;background:#000}
.oc-tv-dock-media iframe,.oc-tv-dock-media video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.oc-tv-dock-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 10px 22px 14px;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));opacity:.92;transition:opacity .2s;pointer-events:none}
.oc-tv-dock-bar>*{pointer-events:auto}
.oc-tv-dock:hover .oc-tv-dock-bar{opacity:1}
.oc-tv-dock-live{display:inline-flex;align-items:center;gap:6px;background:var(--brand,#e10600);color:#fff;font:800 11px/1 system-ui,sans-serif;letter-spacing:.06em;padding:6px 9px;border-radius:999px;flex:none}
.oc-tv-dock-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:oc-tv-blink 1.4s infinite}
.oc-tv-dock-title{flex:1;min-width:0;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* En su sitio el título lo pone el propio reproductor (YouTube, Facebook…): aquí solo el espacio */
.oc-tv-dock:not(.is-floating) .oc-tv-dock-title{visibility:hidden}
.oc-tv-btn{display:inline-flex;align-items:center;gap:7px;height:34px;min-width:34px;padding:0 9px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font:600 13px/1 var(--font,system-ui,sans-serif);cursor:pointer;backdrop-filter:blur(6px);transition:background .15s;flex:none;justify-content:center}
.oc-tv-btn:hover{background:var(--brand,#e10600)}
.oc-tv-btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.oc-tv-btn.is-float{padding:0 12px}
.oc-tv-btn.is-back{display:none}
.oc-tv-dock.on-page .oc-tv-btn.is-page{display:none}
.oc-tv-dock.is-small .oc-tv-btn.is-float span,.oc-tv-dock.is-small .oc-tv-dock-title{display:none}
.oc-tv-dock.is-small .oc-tv-dock-bar{justify-content:flex-end}
.oc-tv-dock.is-small .oc-tv-dock-live{margin-right:auto}

/* Ventana flotante: fija en la pantalla, se arrastra desde la barra */
.oc-tv-dock.is-floating{position:fixed;z-index:85;left:20px;bottom:20px;width:400px;height:auto;border-radius:14px;box-shadow:0 22px 50px rgba(0,0,0,.45);animation:oc-tv-pop .25s ease-out}
.oc-tv-dock.is-floating[style*="top:"]{bottom:auto}
.oc-tv-dock.is-floating .oc-tv-dock-bar{position:relative;padding:8px 8px 8px 12px;background:#141418;opacity:1;cursor:grab;touch-action:none;user-select:none}
.oc-tv-dock.is-floating.is-dragging .oc-tv-dock-bar{cursor:grabbing}
.oc-tv-dock.is-dragging .oc-tv-dock-media{pointer-events:none}
.oc-tv-dock.is-floating .oc-tv-dock-media{flex:none;aspect-ratio:16/9}
.oc-tv-dock.is-floating .oc-tv-btn.is-float,.oc-tv-dock.is-floating .oc-tv-btn.is-page{display:none}
.oc-tv-dock.is-floating .oc-tv-btn.is-back{display:inline-flex}
.oc-tv-dock.is-floating .oc-tv-dock-title{display:block;font-size:13px}
.oc-tv-dock.is-floating .oc-tv-btn{height:30px;min-width:30px;background:rgba(255,255,255,.1)}
@media (max-width:600px){.oc-tv-dock.is-floating{left:10px;bottom:10px;width:min(330px,calc(100vw - 20px))}html.oc-tv-floating .ln-wa-float,html.oc-tv-floating .wa-float,html.oc-tv-floating .ln-mini,html.oc-tv-floating .mini-player{opacity:0;pointer-events:none}}
@keyframes oc-tv-pop{from{transform:translateY(20px) scale(.96);opacity:0}}

/* El recuadro de la página mientras el video está en la ventana flotante */
.oc-tv-away{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(10,10,14,.82);color:#fff;border-radius:inherit;text-align:center;padding:12px;font:600 14px/1.3 var(--font,system-ui,sans-serif)}
.oc-tv-away span{display:inline-flex;align-items:center;gap:8px}
.oc-tv-away svg{width:20px;height:20px;fill:currentColor}
.oc-tv-away button{height:36px;padding:0 18px;border:0;border-radius:999px;background:var(--brand,#e10600);color:#fff;font:700 14px/1 var(--font,system-ui,sans-serif);cursor:pointer}

.oc-tv-msg{position:absolute;inset:auto 16px 16px;margin:0;z-index:3;background:rgba(0,0,0,.75);padding:10px 14px;border-radius:8px;font:500 14px/1.4 system-ui,sans-serif}
@keyframes oc-tv-blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.oc-tv-live::before,.oc-tv-dock-live::before{animation:none}.oc-tv-dock.is-floating{animation:none}}

/* Sección y página genéricas (temas sin diseño propio) */
.oc-tv-block{margin:32px auto}
.oc-tv-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.oc-tv-head h1,.oc-tv-head h2{margin:0}
.oc-tv-head p{margin:4px 0 0;opacity:.75}
.oc-tv-more{font-weight:700;color:var(--brand,#e10600)}
.oc-tv-desc{max-width:760px;margin-top:16px;line-height:1.65}