/* Canal Loto: televisor retro en los colores de la marca. Usa las variables --pf-* si existen. */
.tv{--tv-body:var(--pf-brand,#556FB6);--tv-trim:var(--pf-accent,#F2C94C);--tv-dark:#141A3A;--tv-cream:#F6F5D2;
  max-width:860px;margin-inline:auto;display:grid;justify-items:center}
.tv *{box-sizing:border-box}
.tv-body{width:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(96px,16%,150px);gap:clamp(10px,2vw,20px);padding:clamp(12px,2.4vw,24px);
  background:var(--tv-body);border-radius:clamp(20px,3vw,34px);box-shadow:inset 0 -8px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.18),0 24px 50px rgba(20,26,58,.28)}
.tv-screen{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:22px/18px;overflow:hidden;background:var(--tv-dark);box-shadow:inset 0 0 0 6px rgba(0,0,0,.35),0 0 0 4px var(--tv-trim)}
.tv-feed{position:absolute;inset:0;overflow:hidden;filter:saturate(1.15) contrast(1.05)}
.tv-feed .tv-site{display:block;width:100%;height:auto;will-change:transform}
.tv-feed .tv-backdrop{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(18px) brightness(.7);transform:scale(1.05)}
.tv-feed video{position:absolute;inset:0;width:100%;height:100%;display:block}
.tv-feed .tv-vertical{object-fit:contain}
.tv-feed .tv-wide{object-fit:cover}
.tv-btn:disabled{opacity:.45;cursor:not-allowed}
.tv-static{position:absolute;inset:0;width:100%;height:100%;opacity:0;image-rendering:pixelated;transition:opacity .08s}
.tv-static.on{opacity:1}
.tv-glass{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
  radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.45) 100%),
  linear-gradient(160deg,rgba(255,255,255,.14),transparent 40%)}
.tv-osd{position:absolute;top:6%;left:6%;right:6%;display:flex;justify-content:space-between;gap:12px;font:500 clamp(12px,2vw,20px)/1 "DM Mono",ui-monospace,Menlo,monospace;color:#B6FF7A;text-shadow:0 0 6px rgba(182,255,122,.6),2px 2px 0 rgba(0,0,0,.5);letter-spacing:.06em;opacity:0;transition:opacity .2s}
.tv-osd.on{opacity:1}
.tv-osd span{text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-panel{display:grid;align-content:space-between;justify-items:center;gap:12px;padding:8px 0;color:#fff}
.tv-brand{display:grid;justify-items:center;font:800 clamp(16px,2.2vw,22px)/1 system-ui,sans-serif;letter-spacing:.04em}
.tv-brand small{font:600 12px/1.6 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;color:#fff}
.tv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.tv-dial{width:clamp(56px,9vw,84px);aspect-ratio:1;border-radius:50%;background:var(--tv-cream);display:grid;place-items:center;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15),0 3px 0 rgba(0,0,0,.2)}
.tv-dial i{width:6px;height:42%;border-radius:4px;background:var(--tv-dark);transform-origin:50% 100%;translate:0 -50%;transition:transform .35s cubic-bezier(.34,1.5,.5,1)}
.tv-btns{display:grid;gap:8px;width:100%}
.tv-btn{min-height:44px;width:100%;border-radius:12px;border:0;background:var(--tv-trim);color:var(--tv-dark);font:700 14px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.25);touch-action:manipulation;transition:transform .1s,box-shadow .1s}
.tv-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.tv-btn[aria-pressed="true"]{background:var(--tv-cream)}
.tv-btn:focus-visible{outline:3px solid var(--tv-cream);outline-offset:3px}
.tv-grill{width:100%;height:56px;background:radial-gradient(circle,rgba(0,0,0,.28) 2px,transparent 2.5px) 0 0/10px 10px}
.tv-feet{display:flex;justify-content:space-between;width:70%}
.tv-feet i{width:16%;height:22px;background:var(--tv-dark);clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);border-radius:0 0 6px 6px}
/* Barras de prueba en colores Loto */
.tv-bars{position:absolute;inset:0;display:grid;grid-template-rows:72% 28%}
.tv-bars{background:linear-gradient(90deg,#FFFFFF 0 14.28%,#F6F5D2 0 28.56%,#F2C94C 0 42.84%,#9DB1E6 0 57.12%,#556FB6 0 71.4%,#2E3F86 0 85.68%,#141A3A 0)}
.tv-bars-lo{grid-row:2;background:linear-gradient(90deg,#141A3A 0 25%,#FFFFFF 0 37%,#141A3A 0 62%,#556FB6 0 75%,#141A3A 0)}
.tv-bars-tag{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);padding:10px 16px;background:#141A3A;color:#F6F5D2;font:700 clamp(14px,2.4vw,24px)/1 "DM Mono",ui-monospace,monospace;letter-spacing:.12em;white-space:nowrap}
@media (max-width:620px){
  /* En celular la pantalla es vertical: los reels se ven grandes */
  .tv-screen{aspect-ratio:3/4}
  .tv-body{grid-template-columns:minmax(0,1fr)}
  .tv-panel{grid-template-columns:auto auto minmax(0,1fr);align-items:center;justify-items:start;padding:0}
  .tv-btns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tv-grill{display:none}
}
@media (prefers-reduced-motion:reduce){.tv-dial i,.tv-btn,.tv-osd{transition:none}}