body.tv { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.cab { display: flex; align-items: center; gap: 1.4vw; padding: 1vw 1.6vw .5vw; }
.marca { display: flex; align-items: center; gap: .9vw; min-width: 0; }
.marca .logo { font-size: clamp(20px, 2.1vw, 44px); }
.cab h1 { margin: 0; font-size: clamp(18px, 1.9vw, 38px); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab .sub { margin: 0; font-size: clamp(12px, 1vw, 20px); }
.dias { display: flex; gap: .5vw; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.dias button { background: var(--panel); border: 1px solid var(--borde); color: var(--suave); border-radius: 999px; padding: .45em .95em; font-size: clamp(12px, .95vw, 20px); font-weight: 700; cursor: pointer; }
.dias button.activo { background: var(--acento); color: #0D0D0D; border-color: var(--acento); }
.dias button.hoy:not(.activo) { border-color: var(--acento); color: var(--acento); }
.estado { display: flex; align-items: center; gap: 1vw; }
.vivo { display: flex; align-items: center; gap: .45em; font-weight: 800; font-size: clamp(11px, .9vw, 18px); color: var(--acento); letter-spacing: .1em; }
.vivo i { width: .7em; height: .7em; border-radius: 50%; background: var(--acento); animation: latido 1.6s infinite; }
.vivo.caido { color: var(--rojo); } .vivo.caido i { background: var(--rojo); animation: none; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(56,182,171,.6); } 70% { box-shadow: 0 0 0 .6em rgba(56,182,171,0); } 100% { box-shadow: 0 0 0 0 rgba(56,182,171,0); } }
.reloj { font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(18px, 1.8vw, 36px); }
.etiqueta.demo { background: var(--oro); color: #0D0D0D; font-weight: 800; border-radius: .3em; padding: .25em .55em; font-size: clamp(11px, .9vw, 18px); letter-spacing: .08em; }

.cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 520px); gap: 1.2vw; padding: .4vw 1.6vw 1.2vw; }
.arena { min-height: 0; display: flex; flex-direction: column; gap: 1vw; }
.podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1vw; }
.lista { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(170px, 15vw, 280px), 1fr)); grid-auto-rows: min-content; gap: .7vw; align-content: start; }

.asesor { position: relative; display: flex; align-items: center; gap: .7vw; background: var(--panel); border: 1px solid var(--borde); border-radius: 1vw; padding: .7vw .9vw; min-width: 0; transition: box-shadow .3s; }
.asesor .puesto { position: absolute; top: -.55vw; left: -.4vw; background: var(--panel2); border: 1px solid var(--borde); color: var(--suave); font-weight: 800; font-size: clamp(10px, .8vw, 16px); border-radius: 999px; min-width: 1.9em; text-align: center; padding: .15em .45em; }
.asesor .avatar { width: clamp(34px, 3vw, 60px); height: clamp(34px, 3vw, 60px); font-size: clamp(13px, 1.1vw, 22px); }
.asesor .info { min-width: 0; flex: 1; }
.asesor .nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 800; font-size: clamp(13px, 1.02vw, 21px); line-height: 1.1; overflow: hidden; }
.asesor .detalle { display: block; color: var(--suave); font-size: clamp(10px, .8vw, 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asesor .barra { height: .35vw; background: var(--panel2); border-radius: 999px; margin-top: .45vw; overflow: hidden; }
.asesor .barra i { display: block; height: 100%; background: var(--c, var(--acento)); border-radius: 999px; transition: width .6s ease; }
.asesor .num { text-align: right; line-height: 1; }
.asesor .num b { display: block; font-size: clamp(20px, 2vw, 44px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.asesor .num small { color: var(--suave); font-size: clamp(9px, .75vw, 14px); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.asesor.cero { opacity: .5; }
.asesor.brilla { box-shadow: 0 0 0 2px var(--c, var(--acento)), 0 0 2vw rgba(56,182,171,.35); animation: salto .8s cubic-bezier(.2,.8,.2,1); z-index: 2; }
@keyframes salto { 0% { transform: scale(1); } 30% { transform: scale(1.06); } 100% { transform: scale(1); } }
.asesor .mas { position: absolute; right: .9vw; top: -.3vw; color: var(--oro); font-weight: 800; font-size: clamp(14px, 1.4vw, 30px); animation: flota 1.5s ease-out forwards; pointer-events: none; }
@keyframes flota { 0% { opacity: 0; transform: translateY(.6vw); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-2.6vw); } }

.podio .asesor { padding: 1vw 1.2vw; border-radius: 1.2vw; background: linear-gradient(160deg, var(--panel2), var(--panel)); }
.podio .asesor .avatar { width: clamp(48px, 4.4vw, 90px); height: clamp(48px, 4.4vw, 90px); font-size: clamp(18px, 1.6vw, 34px); }
.podio .asesor .nombre { font-size: clamp(15px, 1.35vw, 30px); white-space: normal; line-height: 1.15; }
.podio .asesor .num b { font-size: clamp(30px, 3.2vw, 72px); }
.podio .asesor .puesto { font-size: clamp(12px, 1vw, 20px); }
.podio .p1 { border-color: var(--oro); } .podio .p2 { border-color: var(--plata); } .podio .p3 { border-color: var(--bronce); }
.podio .p1 .puesto { background: var(--oro); color: #0D0D0D; border-color: var(--oro); }
.podio .p2 .puesto { background: var(--plata); color: #0D0D0D; border-color: var(--plata); }
.podio .p3 .puesto { background: var(--bronce); color: #0D0D0D; border-color: var(--bronce); }
.corona { position: absolute; top: -1.4vw; left: 50%; transform: translateX(-50%); font-size: clamp(18px, 1.8vw, 38px); filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); animation: corona 2.4s ease-in-out infinite; }
@keyframes corona { 0%, 100% { transform: translateX(-50%) rotate(-6deg); } 50% { transform: translateX(-50%) rotate(6deg); } }

.lateral { min-height: 0; display: flex; flex-direction: column; gap: .9vw; overflow: hidden; }
.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 1vw; padding: .9vw 1.1vw; min-height: 0; flex-shrink: 0; }
.panel.crece { flex: 1; overflow: hidden; min-height: 7em; }
.panel h2 { margin: 0 0 .6vw; font-size: clamp(11px, .85vw, 17px); text-transform: uppercase; letter-spacing: .12em; color: var(--suave); font-weight: 800; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6vw; }
.kpi b { display: block; font-size: clamp(20px, 2vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi span { display: block; margin-top: .3vw; color: var(--suave); font-size: clamp(10px, .75vw, 15px); font-weight: 700; }
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5vw; }
.barras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2vw .6vw; align-items: center; font-size: clamp(12px, .95vw, 20px); font-weight: 700; }
.barras .pista { grid-column: 1 / -1; height: .5vw; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.barras .pista i { display: block; height: 100%; background: var(--acento); border-radius: 999px; transition: width .6s ease; }
.barras .n { font-variant-numeric: tabular-nums; color: var(--acento); }
.barras .nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barras .nombre small { color: var(--suave); font-weight: 600; }
.ganadores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45vw; }
.ganadores li { display: flex; align-items: center; gap: .6vw; font-size: clamp(12px, .95vw, 20px); min-width: 0; white-space: nowrap; }
.ganadores .dia { color: var(--suave); font-weight: 700; min-width: 8.6em; white-space: nowrap; flex-shrink: 0; }
.ganadores .avatar { width: 1.7em; height: 1.7em; font-size: .75em; }
.ganadores b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ganadores .pts { margin-left: auto; color: var(--oro); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ganadores li.enjuego .pts { color: var(--acento); }
.ganadores li.vacio { color: var(--suave); }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4vw; overflow: hidden; }
.feed li { display: flex; align-items: center; gap: .5vw; font-size: clamp(11px, .9vw, 18px); color: var(--suave); min-width: 0; }
.feed .hora { font-variant-numeric: tabular-nums; width: 3.2em; flex-shrink: 0; }
.feed .avatar { width: 1.6em; height: 1.6em; font-size: .7em; }
.feed b { color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .proy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .tipo { margin-left: auto; font-size: .78em; border: 1px solid var(--borde); border-radius: 999px; padding: .1em .55em; white-space: nowrap; }
.feed li.nuevo { animation: entra .5s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateX(1vw); } to { opacity: 1; transform: none; } }

.toast { position: fixed; left: 50%; bottom: 3vh; transform: translate(-50%, 160%); background: var(--texto); color: #0D0D0D; border-radius: 999px; padding: .7em 1.5em; font-weight: 800; font-size: clamp(16px, 1.5vw, 34px); box-shadow: 0 1vw 3vw rgba(0,0,0,.55); transition: transform .45s cubic-bezier(.2,.8,.2,1); display: flex; align-items: center; gap: .6em; z-index: 5; max-width: 92vw; white-space: nowrap; overflow: hidden; }
.toast.visible { transform: translate(-50%, 0); }
.toast .avatar { width: 1.6em; height: 1.6em; font-size: .8em; }
.toast .proy { color: var(--acento-osc); }
#confeti { position: fixed; inset: 0; pointer-events: none; z-index: 4; width: 100%; height: 100%; }
.vacio { color: var(--suave); font-size: clamp(12px, 1vw, 20px); padding: .4vw 0; }
.aviso { background: var(--panel2); border: 1px dashed var(--borde); color: var(--suave); border-radius: 1vw; padding: 1vw; font-size: clamp(12px, 1vw, 20px); }

@media (max-width: 900px) {
  body.tv { height: auto; overflow: auto; }
  .cab { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .dias { margin-left: 0; justify-content: flex-start; }
  .cuerpo { grid-template-columns: 1fr; gap: 12px; padding: 0 16px 24px; }
  .lista { overflow: visible; grid-template-columns: 1fr; gap: 10px; }
  .podio { grid-template-columns: 1fr; gap: 10px; }
  .asesor { border-radius: 14px; padding: 10px 12px; gap: 10px; }
  .asesor .barra { height: 4px; margin-top: 6px; }
  .panel { border-radius: 14px; padding: 12px 14px; }
  .lateral { overflow: visible; }
  .panel.crece { overflow: visible; }
}