/* =====================================================================
   HATED · televisor v4 — un diseño propio por tema
   · oscuro  → tela negra con hilo lila, remiendos y botones cosidos
   · claro   → lienzo hueso con tinta negra, estilo zine
   · xp      → ventana Luna (reproductor) con barra de título y estado
   Se carga después de styles.css y reemplaza el aspecto del TV.
   ===================================================================== */

/* ---------- elementos que solo existen en un tema ---------- */
.tv-xp-title,.tv-xp-menu,.tv-xp-status{display:none}
.tv-deco{position:absolute;inset:0;pointer-events:none;z-index:6;transform:translateZ(7px)}

/* ---------- variables por tema ---------- */
:is(html[data-theme="dark"],html:not([data-theme])) .tv-hero{
  --tv-thread:#cdb8f2;
  --tv-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M2 1l6 6M8 1L2 7' stroke='%23cdb8f2' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --tv-label-bg:linear-gradient(180deg,#3a2c52,#241a36);
  --tv-label-fg:#e6dbfa;
  --tv-panel-bg:
    repeating-linear-gradient(90deg,rgba(205,184,242,.035) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,#0f0b17,#08060d);
  --btn-hi:#8d7ba6;--btn-lo:#17121f;--btn-edge:rgba(205,184,242,.35);
  --bezel:#07050b;
  --pa-heart:#5a1d86;--pb-heart:#f3c8f1;
  --pa-aid:#3b3048;--pad-aid:#54476a;--pb-aid:#cdb8f2;
  --pin:#b8b1c7;
}
html[data-theme="light"] .tv-hero{
  --tv-thread:#16121b;
  --tv-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M2 1l6 6M8 1L2 7' stroke='%2316121b' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  --tv-label-bg:#16121b;
  --tv-label-fg:#ffffff;
  --tv-panel-bg:
    radial-gradient(rgba(22,18,27,.16) .9px,transparent 1.3px) 0 0/6px 6px,
    #e3dee9;
  --btn-hi:#ffffff;--btn-lo:#d6d0dd;--btn-edge:#16121b;
  --bezel:#16121b;
  --pa-heart:#16121b;--pb-heart:#ffffff;
  --pa-aid:#ffffff;--pad-aid:#f1edf5;--pb-aid:#16121b;
  --pin:#16121b;
}

/* =====================================================================
   OSCURO + CLARO · estructura compartida (carcasa de tela remendada)
   ===================================================================== */
html:not([data-theme="xp"]) .tv-hero .tv-set{
  --pad:clamp(14px,2.8vw,22px);
  max-width:580px;
}
html:not([data-theme="xp"]) .tv-hero .tv-tailoring{display:none}

/* antena arriba, no abajo */
html:not([data-theme="xp"]) .tv-hero .tv-antenna{order:-1;height:58px;margin-bottom:-7px;filter:none;position:relative;z-index:0}
html:not([data-theme="xp"]) .tv-hero .tv-antenna::before{
  content:"";position:absolute;left:50%;bottom:-3px;width:60px;height:15px;transform:translateX(-50%);
  border-radius:30px 30px 0 0;border:1px dashed var(--tv-thread);border-bottom:0;
  background:var(--tv-brand-fabric,#17121f);
}
html:not([data-theme="xp"]) .tv-hero .tv-antenna-l,
html:not([data-theme="xp"]) .tv-hero .tv-antenna-r{
  width:2px;height:56px;border-radius:2px;box-shadow:none;
  background:linear-gradient(90deg,var(--tv-wire-a,#b8b1c7),var(--tv-wire-b,#5b5468));
}
html:not([data-theme="xp"]) .tv-hero .tv-antenna-l::before,
html:not([data-theme="xp"]) .tv-hero .tv-antenna-r::before{
  content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--tv-wire-a,#b8b1c7) 45%,var(--tv-wire-b,#5b5468));
}
html:not([data-theme="xp"]) .tv-hero .tv-antenna-l::after{ /* tira de tela atada al alambre */
  content:"";position:absolute;left:-3px;top:46%;width:8px;height:15px;border-radius:2px;
  background:var(--tv-ribbon,#7c3aed);transform:rotate(-12deg);
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
}

/* carcasa */
html:not([data-theme="xp"]) .tv-hero .tv-body{
  padding:var(--pad) var(--pad) 0;
  border-radius:26px 26px 22px 22px;
}
html:not([data-theme="xp"]) .tv-hero .tv-body::before{display:none}
html:not([data-theme="xp"]) .tv-hero .tv-body::after{ /* costura perimetral */
  content:"";position:absolute;inset:6px;border-radius:20px;pointer-events:none;
  border:1.5px dashed var(--tv-thread);opacity:.5;mix-blend-mode:normal;background:none;
}

/* pantalla: marco grueso + hilván por fuera */
html:not([data-theme="xp"]) .tv-hero .tv-screen{
  border:9px solid var(--bezel);border-radius:20px;
  outline:1.5px dashed var(--tv-thread);outline-offset:5px;
}

/* panel inferior = otro trozo de tela, unido con puntadas en X */
html:not([data-theme="xp"]) .tv-hero .tv-panel{
  margin:calc(var(--pad) - 4px) calc(var(--pad) * -1) 0;
  padding:15px calc(var(--pad) + 8px) clamp(12px,2.4vw,17px);
  background:var(--tv-panel-bg);
  border-radius:0 0 19px 19px;
  position:relative;
}
html:not([data-theme="xp"]) .tv-hero .tv-panel::before{
  content:"";position:absolute;left:12px;right:12px;top:0;height:8px;transform:translateY(-50%);
  background:var(--tv-x) repeat-x center/10px 8px;opacity:.85;
}

/* rejilla del parlante = hilera de X cosidas */
html:not([data-theme="xp"]) .tv-hero .tv-speaker{display:flex;gap:4px;width:auto;height:auto;overflow:visible;transform:none;filter:none}
html:not([data-theme="xp"]) .tv-hero .tv-speaker span{
  width:9px;height:9px;border-radius:0;box-shadow:none;
  background:
    linear-gradient(45deg,transparent 43%,var(--tv-thread) 43% 57%,transparent 57%),
    linear-gradient(-45deg,transparent 43%,var(--tv-thread) 43% 57%,transparent 57%);
  opacity:.85;
}

/* etiqueta de marca = etiqueta tejida con colas en V */
html:not([data-theme="xp"]) .tv-hero .tv-brand{
  position:relative;isolation:isolate;
  padding:7px 22px;color:var(--tv-label-fg);
  font-family:var(--f-display);font-size:.62rem;font-weight:600;letter-spacing:.26em;line-height:1;text-shadow:none;
  background:var(--tv-label-bg);
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%,8px 50%);
}
html:not([data-theme="xp"]) .tv-hero .tv-brand::before{
  content:"";position:absolute;z-index:-1;inset:3px 11px;border:1px dashed var(--tv-label-fg);opacity:.55;
  border-radius:1px;background:none;box-shadow:none;
}
html:not([data-theme="xp"]) .tv-hero .tv-brand::after{display:none}

/* perillas = botones cosidos (4 agujeros + hilo en X) */
html:not([data-theme="xp"]) .tv-hero .tv-knobs{gap:12px}
html:not([data-theme="xp"]) .tv-hero .tv-knob{
  width:27px;height:27px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,var(--btn-hi) 0,var(--btn-lo) 78%);
  border:1px solid var(--btn-edge);
  box-shadow:0 3px 4px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.28);
}
html:not([data-theme="xp"]) .tv-hero .tv-knob::before{
  content:"";position:absolute;inset:4px;border-radius:50%;
  border:1px solid rgba(0,0,0,.32);box-shadow:inset 0 1px 1px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.14);
}
html:not([data-theme="xp"]) .tv-hero .tv-knob::after{
  content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:0;
  transform:translate(-50%,-50%);box-shadow:none;
  background:
    radial-gradient(circle,rgba(0,0,0,.75) 0 1px,transparent 1.4px) 0 0/6px 6px,
    linear-gradient(45deg,transparent 42%,var(--tv-thread) 42% 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,var(--tv-thread) 42% 58%,transparent 58%);
}
html:not([data-theme="xp"]) .tv-hero .tv-knob:hover{box-shadow:0 3px 5px rgba(0,0,0,.6),inset 0 1px 1px rgba(255,255,255,.3),0 0 0 3px var(--tv-focus,rgba(168,85,247,.35))}
html:not([data-theme="xp"]) .tv-hero .tv-knob:focus-visible{outline:2px solid var(--tv-thread);outline-offset:3px}

/* remiendos */
.tv-patch{position:absolute;display:block;overflow:visible}
.tv-patch .pa{fill:var(--pa-heart)}
.tv-patch .pb{fill:none;stroke:var(--pb-heart);stroke-width:1.4;stroke-linecap:round}
.tv-patch .pb--dash{stroke-dasharray:3.2 2.6}
.tv-patch .px{fill:none;stroke:var(--pb-heart);stroke-width:2;stroke-linecap:round}
.tv-patch--heart{right:-15px;bottom:34%;width:clamp(40px,6.4vw,54px);transform:rotate(11deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.tv-patch--aid{left:-24px;top:7px;width:clamp(78px,13vw,104px);transform:rotate(-38deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.tv-patch--aid .pa{fill:var(--pa-aid);stroke:var(--pb-aid);stroke-width:1.2}
.tv-patch--aid .pad{fill:var(--pad-aid)}
.tv-patch--aid .pb{stroke:var(--pb-aid);stroke-width:1.1}
.tv-patch--aid .hole circle{fill:var(--pb-aid);opacity:.7}
.tv-patch--pin{right:22%;top:-9px;width:clamp(60px,10vw,80px);transform:rotate(7deg);filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.tv-patch--pin .pin{fill:none;stroke:var(--pin);stroke-width:2.1;stroke-linecap:round}
.tv-patch--pin .pin--cap{fill:var(--pin);stroke:none}
.tv-thread{position:absolute;right:23%;bottom:-38px;width:28px;height:42px;overflow:visible;transform:rotate(4deg)}
.tv-thread path{fill:none;stroke:var(--tv-thread);stroke-width:1.5;stroke-linecap:round}
.tv-thread circle{fill:var(--tv-thread)}

/* =====================================================================
   OSCURO · negro y morado
   ===================================================================== */
:is(html[data-theme="dark"],html:not([data-theme])) .tv-hero .tv-set{
  --tv-brand-fabric:#17121f;--tv-ribbon:#8b3dff;
  --tv-wire-a:#cfc8dc;--tv-wire-b:#4d4660;
  filter:drop-shadow(0 38px 38px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(126,34,206,.2));
}
:is(html[data-theme="dark"],html:not([data-theme])) .tv-hero .tv-body{
  background:
    repeating-linear-gradient(45deg,rgba(205,184,242,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 14% 6%,rgba(168,85,247,.14),transparent 40%),
    linear-gradient(145deg,#2d2439 0%,#18131f 42%,#0c0910 100%);
  border:1px solid rgba(205,184,242,.2);
  box-shadow:
    0 50px 90px -25px rgba(0,0,0,.98),
    0 0 0 2px rgba(0,0,0,.8),
    0 0 40px rgba(126,34,206,.16),
    inset 0 2px 1px rgba(255,255,255,.12),
    inset 0 -14px 24px rgba(0,0,0,.55);
}
:is(html[data-theme="dark"],html:not([data-theme])) .tv-hero .tv-screen{
  box-shadow:
    0 0 0 2px #2a2236,
    inset 0 0 0 3px #000,
    inset 0 0 28px rgba(0,0,0,1),
    inset 0 0 64px rgba(126,34,206,.16),
    0 0 26px rgba(126,34,206,.18);
}
:is(html[data-theme="dark"],html:not([data-theme])) .tv-hero .tv-patch--aid{opacity:.96}

/* =====================================================================
   CLARO · blanco y negro (papel y tinta)
   ===================================================================== */
html[data-theme="light"] .tv-hero .tv-set{
  --tv-brand-fabric:#e9e5ee;--tv-ribbon:#16121b;
  --tv-wire-a:#16121b;--tv-wire-b:#16121b;
  filter:none;
}
html[data-theme="light"] .tv-hero .tv-set::before,
html[data-theme="light"] .tv-hero .tv-set::after{display:none}
html[data-theme="light"] .tv-hero .tv-antenna::before{border-color:#16121b}
html[data-theme="light"] .tv-hero .tv-antenna-l::before,
html[data-theme="light"] .tv-hero .tv-antenna-r::before{background:#16121b}
html[data-theme="light"] .tv-hero .tv-body{
  background:
    repeating-linear-gradient(45deg,rgba(22,18,27,.04) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(22,18,27,.03) 0 1px,transparent 1px 3px),
    linear-gradient(160deg,#f7f5f9 0%,#ebe7ef 100%);
  border:4px solid #16121b;
  box-shadow:10px 10px 0 #16121b;
}
html[data-theme="light"] .tv-hero .tv-body::after{opacity:.8;inset:7px;border-radius:19px}
html[data-theme="light"] .tv-hero .tv-screen{
  box-shadow:0 0 0 2px #fff,inset 0 0 0 3px #000,inset 0 0 26px rgba(0,0,0,.9);
}
html[data-theme="light"] .tv-hero .tv-screen{outline-color:#16121b}
html[data-theme="light"] .tv-hero .tv-brand{clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%,8px 50%)}
html[data-theme="light"] .tv-hero .tv-brand::before{border-color:#fff;opacity:.7}
html[data-theme="light"] .tv-hero .tv-knob{box-shadow:2px 2px 0 #16121b,inset 0 1px 1px #fff}
html[data-theme="light"] .tv-hero .tv-knob::before{border-color:rgba(22,18,27,.35);box-shadow:none}
html[data-theme="light"] .tv-hero .tv-knob::after{
  background:
    radial-gradient(circle,#16121b 0 1px,transparent 1.4px) 0 0/6px 6px,
    linear-gradient(45deg,transparent 42%,#16121b 42% 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,#16121b 42% 58%,transparent 58%);
}
html[data-theme="light"] .tv-hero .tv-knob:hover{box-shadow:2px 2px 0 #16121b,0 0 0 3px #fff,0 0 0 5px #16121b}
html[data-theme="light"] .tv-hero .tv-panel{border-top:0}
html[data-theme="light"] .tv-patch--aid .pa{stroke-width:1.6}
html[data-theme="light"] .tv-patch--heart{filter:drop-shadow(2px 2px 0 rgba(22,18,27,.35))}
html[data-theme="light"] .tv-patch--aid,html[data-theme="light"] .tv-patch--pin{filter:drop-shadow(2px 2px 0 rgba(22,18,27,.28))}
html[data-theme="light"] .tv-thread path{stroke-width:1.8}

/* =====================================================================
   RETRO XP · ventana Luna con reproductor
   ===================================================================== */
html[data-theme="xp"] .tv-hero .tv-hero-inner{perspective:none}
html[data-theme="xp"] .tv-hero .tv-set{
  max-width:640px;transform:none;filter:none;transform-style:flat;
}
html[data-theme="xp"] .tv-hero .tv-set::before,
html[data-theme="xp"] .tv-hero .tv-set::after,
html[data-theme="xp"] .tv-hero .tv-antenna,
html[data-theme="xp"] .tv-hero .tv-tailoring,
html[data-theme="xp"] .tv-hero .tv-deco,
html[data-theme="xp"] .tv-hero .tv-body::before,
html[data-theme="xp"] .tv-hero .tv-body::after,
html[data-theme="xp"] .tv-hero .tv-screen::before{display:none}

html[data-theme="xp"] .tv-hero .tv-body{
  transform:none;padding:0;
  background:#ece9d8;
  border:3px solid #0054e3;border-top:0;
  border-radius:9px 9px 3px 3px;
  box-shadow:0 0 0 1px #0831d9,5px 7px 0 rgba(0,20,80,.28),0 18px 28px rgba(0,20,80,.35);
  font-family:'Pixelify Sans',Tahoma,Verdana,sans-serif;
}

/* barra de título Luna */
html[data-theme="xp"] .tv-hero .tv-xp-title{
  display:flex;align-items:center;gap:7px;height:31px;padding:0 5px 0 8px;margin:0 -3px;
  border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,#0997ff 0%,#0053ee 8%,#0050ee 40%,#0066ff 88%,#0066ff 93%,#005bff 95%,#003dd7 96%,#003dd7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  color:#fff;font-family:"Trebuchet MS",'Pixelify Sans',Tahoma,sans-serif;font-weight:700;font-size:13px;text-shadow:1px 1px 0 #0f1089;
}
html[data-theme="xp"] .tv-hero .tv-xp-ico{
  width:17px;height:14px;flex:none;border:2px solid #dfe9ff;border-radius:3px;
  background:linear-gradient(135deg,#7fb2ff,#0b2a8a);box-shadow:0 1px 0 rgba(0,0,0,.3);
}
html[data-theme="xp"] .tv-hero .tv-xp-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-theme="xp"] .tv-hero .tv-xp-btns{display:flex;gap:2px}
html[data-theme="xp"] .tv-hero .tv-xp-btns i{
  position:relative;display:block;width:21px;height:21px;box-sizing:border-box;
  border:1px solid #fff;border-radius:3px;
  background:linear-gradient(180deg,#5b9bff 0%,#2a64e6 55%,#1a4ed0 100%);
  box-shadow:inset 0 0 2px rgba(255,255,255,.55);text-shadow:none;
}
html[data-theme="xp"] .tv-hero .tv-xp-btns i.cls{background:linear-gradient(180deg,#e9937c 0%,#c8452a 55%,#b3262e 100%)}
html[data-theme="xp"] .tv-hero .tv-xp-btns .min::after{content:"";position:absolute;left:5px;bottom:5px;width:8px;height:3px;background:#fff}
html[data-theme="xp"] .tv-hero .tv-xp-btns .max::after{content:"";position:absolute;left:4px;top:4px;width:11px;height:11px;box-sizing:border-box;border:1px solid #fff;border-top-width:3px}
html[data-theme="xp"] .tv-hero .tv-xp-btns .cls::before,
html[data-theme="xp"] .tv-hero .tv-xp-btns .cls::after{content:"";position:absolute;left:4px;top:8px;width:11px;height:2px;background:#fff;transform:rotate(45deg)}
html[data-theme="xp"] .tv-hero .tv-xp-btns .cls::after{transform:rotate(-45deg)}

/* barra de menú */
html[data-theme="xp"] .tv-hero .tv-xp-menu{
  display:flex;gap:2px;height:22px;align-items:center;padding:0 4px;
  background:#ece9d8;border-bottom:1px solid #aca899;box-shadow:0 1px 0 #fff;
  font-size:11px;color:#1b1b1b;
}
html[data-theme="xp"] .tv-hero .tv-xp-menu span{padding:2px 7px}

/* pantalla = área de video hundida */
html[data-theme="xp"] .tv-hero .tv-screen{
  width:calc(100% - 20px);margin:10px auto 0;
  border:2px solid;border-color:#716f64 #fff #fff #716f64;border-radius:2px;
  outline:1px solid #aca899;outline-offset:0;
  box-shadow:none;transform:none;filter:none;
}
html[data-theme="xp"] .tv-hero .tv-slides{border-radius:0}
html[data-theme="xp"] .tv-hero .tv-vignette{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,20,.45) 100%)}
html[data-theme="xp"] .tv-hero .tv-osd{background:rgba(0,10,40,.6);border:1px solid rgba(255,255,255,.35);border-radius:3px;backdrop-filter:none}
html[data-theme="xp"] .tv-hero .tv-osd-text,
html[data-theme="xp"] .tv-hero .tv-ch,
html[data-theme="xp"] .tv-hero .tv-rec{font-family:'Pixelify Sans',Tahoma,Verdana,sans-serif;letter-spacing:.04em;text-shadow:1px 1px 0 rgba(0,0,0,.7);animation:none}

/* controles = barra del reproductor */
html[data-theme="xp"] .tv-hero .tv-panel{
  margin:10px 10px 0;padding:6px 10px;
  background:linear-gradient(180deg,#fbfaf4 0%,#dfdbc9 100%);
  border:1px solid #aca899;border-radius:3px;
}
html[data-theme="xp"] .tv-hero .tv-speaker{display:flex;align-items:flex-end;gap:2px;width:auto;height:auto;overflow:visible;transform:none}
html[data-theme="xp"] .tv-hero .tv-speaker span{
  width:4px;border-radius:0;box-shadow:none;background:linear-gradient(180deg,#5cb946,#2e8a21);
}
html[data-theme="xp"] .tv-hero .tv-speaker span:nth-child(1){height:5px}
html[data-theme="xp"] .tv-hero .tv-speaker span:nth-child(2){height:8px}
html[data-theme="xp"] .tv-hero .tv-speaker span:nth-child(3){height:11px}
html[data-theme="xp"] .tv-hero .tv-speaker span:nth-child(4){height:14px}
html[data-theme="xp"] .tv-hero .tv-speaker span:nth-child(5){height:17px;background:#c5c1ae}
html[data-theme="xp"] .tv-hero .tv-speaker span:nth-child(6){height:20px;background:#c5c1ae}
html[data-theme="xp"] .tv-hero .tv-brand{
  position:static;padding:0;clip-path:none;background:none;
  color:#0a246a;font-family:'Pixelify Sans',Tahoma,Verdana,sans-serif;font-size:11px;font-weight:700;letter-spacing:0;text-shadow:none;
}
html[data-theme="xp"] .tv-hero .tv-brand::before,
html[data-theme="xp"] .tv-hero .tv-brand::after{display:none}
html[data-theme="xp"] .tv-hero .tv-knobs{gap:6px}
html[data-theme="xp"] .tv-hero .tv-knob{
  width:28px;height:28px;border-radius:50%;transform:none;
  background:radial-gradient(circle at 50% 18%,#c6dcff 0%,#4a8cf2 38%,#1550d0 100%);
  border:1px solid #0a3aa8;
  box-shadow:inset 0 -2px 3px rgba(0,30,120,.45),inset 0 2px 2px rgba(255,255,255,.7),0 1px 1px rgba(0,0,0,.25);
}
html[data-theme="xp"] .tv-hero .tv-knob::before{display:none}
html[data-theme="xp"] .tv-hero .tv-knob::after{
  content:"";position:absolute;top:50%;left:50%;width:0;height:0;margin:0;background:none;box-shadow:none;border-radius:0;
  transform:translate(-50%,-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;
}
html[data-theme="xp"] .tv-hero #tvKnobPrev::after{border-right:9px solid #fff;margin-left:-1px}
html[data-theme="xp"] .tv-hero #tvKnobNext::after{border-left:9px solid #fff;margin-left:1px}
html[data-theme="xp"] .tv-hero .tv-knob:hover{box-shadow:inset 0 0 0 2px #ffc83c,inset 0 2px 2px rgba(255,255,255,.7),0 1px 1px rgba(0,0,0,.25)}
html[data-theme="xp"] .tv-hero .tv-knob.is-turning{animation:none;filter:brightness(.88);transform:translateY(1px)}
html[data-theme="xp"] .tv-hero .tv-knob:focus-visible{outline:1px dotted #000;outline-offset:2px}

/* barra de estado */
html[data-theme="xp"] .tv-hero .tv-xp-status{
  display:flex;align-items:stretch;gap:0;height:23px;margin-top:8px;
  background:#ece9d8;border-top:1px solid #aca899;box-shadow:inset 0 1px 0 #fff;
  font-size:11px;color:#1b1b1b;
}
html[data-theme="xp"] .tv-hero .tv-xp-status span{display:flex;align-items:center;padding:0 10px;border-right:1px solid #aca899;box-shadow:1px 0 0 #fff}
html[data-theme="xp"] .tv-hero .tv-xp-status span:first-child{flex:1}
html[data-theme="xp"] .tv-hero .tv-xp-grip{
  width:16px;margin-left:auto;align-self:flex-end;height:16px;
  background:
    linear-gradient(135deg,transparent 0 5px,#aca899 5px 6px,#fff 6px 7px,transparent 7px 9px,#aca899 9px 10px,#fff 10px 11px,transparent 11px 13px,#aca899 13px 14px,#fff 14px 15px,transparent 15px);
}

/* =====================================================================
   Responsive y movimiento
   ===================================================================== */
@media (max-width:820px){
  html:not([data-theme="xp"]) .tv-hero .tv-body{border-radius:22px 22px 19px 19px}
}
@media (max-width:480px){
  html:not([data-theme="xp"]) .tv-hero .tv-set{--pad:12px}
  html:not([data-theme="xp"]) .tv-hero .tv-body{border-radius:18px 18px 15px 15px}
  html:not([data-theme="xp"]) .tv-hero .tv-body::after{border-radius:13px;inset:4px}
  html:not([data-theme="xp"]) .tv-hero .tv-screen{border-width:7px;border-radius:14px;outline-offset:4px}
  html:not([data-theme="xp"]) .tv-hero .tv-panel{padding:12px 16px 12px;margin-top:9px}
  html:not([data-theme="xp"]) .tv-hero .tv-brand{padding:6px 15px;font-size:.55rem;letter-spacing:.18em}
  html:not([data-theme="xp"]) .tv-hero .tv-speaker{display:none}
  html:not([data-theme="xp"]) .tv-hero .tv-knob{width:23px;height:23px}
  html:not([data-theme="xp"]) .tv-hero .tv-knob::before{inset:3px}
  .tv-patch--pin,.tv-thread{display:none}
  .tv-patch--aid{left:-14px;top:2px}
  .tv-patch--heart{right:-9px}
  html[data-theme="xp"] .tv-hero .tv-xp-title{font-size:12px}
  html[data-theme="xp"] .tv-hero .tv-xp-menu span:nth-child(n+3){display:none}
  html[data-theme="xp"] .tv-hero .tv-speaker{display:none}
  html[data-theme="xp"] .tv-hero .tv-screen{width:calc(100% - 14px);margin-top:7px}
  html[data-theme="xp"] .tv-hero .tv-panel{margin:7px 7px 0}
}
@media (prefers-reduced-motion:reduce){
  html:not([data-theme="xp"]) .tv-hero .tv-antenna-l,
  html:not([data-theme="xp"]) .tv-hero .tv-antenna-r{animation:none}
}