/* Issue #1846 — los diseños de la tele. El markup es uno solo (presencial-reloj.js)
   y cada diseño lo reacomoda con `data-tema`; la base está en presencial.css. */

.rl { position: relative; isolation: isolate; --avance: 0; --zoom: 1; }
.rl:not(.rl-tocado) { cursor: none; }
.rl .rl-botones { opacity: 0; transition: opacity .3s; z-index: 2; }
.rl.rl-tocado .rl-botones, .rl .rl-botones:focus-within { opacity: 1; }
.rl-datos { display: contents; }
.rl-cargando { grid-column: 1 / -1; grid-row: 1 / -1; }
.rl-video, .rl-extra { display: none; }
.rl-aro { display: flex; flex-direction: column; align-items: center; }
.rl-barra { width: 70%; height: .8vh; border-radius: 1vh; background: rgba(255,255,255,.08); overflow: hidden; margin: 1vh 0 1.5vh; }
.rl-barra::after { content: ""; display: block; height: 100%; width: calc(var(--avance, 0) * 100%);
  background: currentColor; transition: width .25s linear; }
.rl-botones select { font: inherit; }

/* --- Clásico: el de siempre, con paneles y el dorado del club --- */
.rl[data-tema="clasico"] { background: radial-gradient(ellipse at 50% 40%, #16202a 0%, #07090d 70%); }
.rl[data-tema="clasico"] .rl-izq, .rl[data-tema="clasico"] .rl-der {
  border: 1px solid rgba(var(--oro-rgb), .35); border-radius: 1.5vh; padding: 2vh 1.2vw;
  background: rgba(0,0,0,.35); }
.rl[data-tema="clasico"] .rl-tiempo { font-size: 30vh; text-shadow: 0 .6vh 3vh rgba(0,0,0,.6); }
.rl[data-tema="clasico"] .rl-barra { color: var(--oro); }
.rl[data-tema="clasico"] .rl-top { border-bottom: 1px solid rgba(var(--oro-rgb), .35); padding-bottom: 1vh; }

/* --- Neon: synthwave, todo con gradientes --- */
.rl[data-tema="neon"] { background: linear-gradient(#0b0221 0%, #2a0845 55%, #6a1b6f 72%, #0b0221 72%);
  color: #fff; overflow: hidden; }
.rl[data-tema="neon"]::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 38%; width: 34vh; height: 34vh;
  transform: translateX(-50%); border-radius: 50%; opacity: .55;
  background: linear-gradient(#ffd319 0%, #ff2975 60%, #8c1eff 100%);
  -webkit-mask: repeating-linear-gradient(#000 0 2.6vh, transparent 2.6vh 3.4vh);
  mask: repeating-linear-gradient(#000 0 2.6vh, transparent 2.6vh 3.4vh); }
.rl[data-tema="neon"]::after { content: ""; position: absolute; z-index: -1; left: -50%; right: -50%; bottom: -10%; height: 42%;
  transform: perspective(40vh) rotateX(60deg); transform-origin: top;
  background: repeating-linear-gradient(90deg, rgba(255,41,117,.6) 0 2px, transparent 2px 8vh),
    repeating-linear-gradient(0deg, rgba(255,41,117,.6) 0 2px, transparent 2px 8vh); }
.rl[data-tema="neon"] .rl-top h1 { color: #ff6ec7; text-shadow: 0 0 1vh #ff2975, 0 0 3vh #ff2975; font-style: italic; }
.rl[data-tema="neon"] .rl-nivel { color: #ff2975; text-shadow: 0 0 1.5vh #ff2975; }
.rl[data-tema="neon"] .rl-tiempo { color: #ff6ec7; text-shadow: 0 0 1vh #ff2975, 0 0 4vh #ff2975, 0 0 8vh #8c1eff; }
.rl[data-tema="neon"] .rl-ciegas { color: #5ef1ff; text-shadow: 0 0 1vh #00b3ff, 0 0 4vh #00b3ff; }
.rl[data-tema="neon"] .rl-barra { color: #5ef1ff; box-shadow: 0 0 1.5vh #00b3ff; }
.rl[data-tema="neon"] .rl-izq, .rl[data-tema="neon"] .rl-der > div {
  border: 2px solid #ff2975; border-radius: 1.2vh; padding: 1.2vh 1vw; background: rgba(11,2,33,.75);
  box-shadow: 0 0 1.5vh #ff2975, inset 0 0 1.5vh rgba(255,41,117,.4); }
.rl[data-tema="neon"] .rl-der { gap: 1.2vh; }
.rl[data-tema="neon"] h3 { color: #ffd319; text-shadow: 0 0 1vh #ff8c00; }
.rl[data-tema="neon"] .rl-der b, .rl[data-tema="neon"] .rl-premios b { color: #5ef1ff; text-shadow: 0 0 1vh #00b3ff; }
.rl[data-tema="neon"] .rl-premios li { border-bottom-color: rgba(255,41,117,.4); }
.rl[data-tema="neon"].rl-en-break .rl-tiempo { color: #ffd319; text-shadow: 0 0 1vh #ff8c00, 0 0 5vh #ff8c00; }

/* --- Profesional: reloj circular, como la Triton --- */
.rl[data-tema="pro"] { background: radial-gradient(circle at 50% 50%, #1a1d24 0%, #050608 65%);
  grid-template-columns: 1fr 1.6fr 1fr; }
.rl[data-tema="pro"] .rl-aro { justify-content: center; width: 52vh; height: 52vh; border-radius: 50%;
  background: radial-gradient(closest-side, #0b0d12 88%, transparent 89%),
    conic-gradient(#e8c766 calc(var(--avance, 0) * 360deg), rgba(232,199,102,.15) 0); }
.rl[data-tema="pro"] .rl-tiempo { font-size: 16vh; }
.rl[data-tema="pro"] .rl-nivel { font-size: 4vh; color: #e8c766; }
.rl[data-tema="pro"] .rl-barra { display: none; }
.rl[data-tema="pro"] .rl-ciegas { font-size: 7vh; margin-top: 1.5vh; }
.rl[data-tema="pro"] .rl-der, .rl[data-tema="wsop"] .rl-der { gap: .8vh; }
.rl[data-tema="pro"] .rl-der b, .rl[data-tema="wsop"] .rl-der b { font-size: 3.4vh; }
.rl[data-tema="pro"] .rl-extra { display: block; }
.rl[data-tema="pro"] .rl-der { text-align: left; }
.rl[data-tema="pro"] .rl-der, .rl[data-tema="pro"] .rl-izq { justify-content: center; }
.rl[data-tema="pro"] h3 { color: #e8c766; }
.rl[data-tema="pro"] .rl-ficha .ficha { width: 6vh; height: 6vh; border-width: 1vh; box-shadow: 0 .5vh 1.5vh rgba(0,0,0,.6); }
.rl[data-tema="pro"] .rl-fichas { font-size: 2.6vh; }
.rl[data-tema="pro"] .rl-ficha { flex-direction: column; }

/* --- WSOP: tiempo verde gigante, columnas con borde azul --- */
.rl[data-tema="wsop"] { background: #050a14; grid-template-columns: 1fr 2fr 1fr; }
.rl[data-tema="wsop"] .rl-top { background: #0e1a33; margin: -2vh -2vw 0; padding: 1.2vh 2vw; justify-content: center; }
.rl[data-tema="wsop"] .rl-top h1 { color: #fff; }
.rl[data-tema="wsop"] .rl-top span { position: absolute; right: 2vw; }
.rl[data-tema="wsop"] .rl-izq, .rl[data-tema="wsop"] .rl-der { border: .3vh solid #1f3a6e; padding: 1.5vh 1vw; background: #08122a; }
.rl[data-tema="wsop"] .rl-der { text-align: center; }
.rl[data-tema="wsop"] .rl-der b { color: #ffd23f; }
.rl[data-tema="wsop"] .rl-extra { display: block; }
.rl[data-tema="wsop"] .rl-extra b { color: #4fc3ff; }
.rl[data-tema="wsop"] .rl-tiempo { color: #39e639; font-size: 28vh; }
.rl[data-tema="wsop"] .rl-nivel { color: #fff; }
.rl[data-tema="wsop"] .rl-barra { color: #39e639; }
.rl[data-tema="wsop"] .rl-centro { border: .3vh solid #1f3a6e; background: #08122a; }
.rl[data-tema="wsop"].rl-en-break .rl-tiempo { color: #ffd23f; }

/* --- Stream: el partido grande, el reloj en una columna --- */
.rl[data-tema="stream"] { background: #0a0d14; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top top" "video centro" "video izq" "der der"; gap: 1.2vh 1vw; }
.rl[data-tema="stream"] .rl-video { display: grid; grid-area: video; place-items: center; position: relative;
  border: .3vh solid #2b3a55; border-radius: 1vh; background: #000; overflow: hidden; }
.rl-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform: scale(var(--zoom)); transition: transform .2s; }
.rl-cartel { margin: 0; max-width: 60%; text-align: center; font-size: 2.6vh; color: var(--muted); }
.rl-con-video .rl-cartel { display: none; }
.rl[data-tema="stream"] .rl-centro { border: .3vh solid #2b3a55; border-radius: 1vh; background: #111a2b; padding: 1vh; }
.rl[data-tema="stream"] .rl-tiempo { font-size: 13vh; color: #cfe3ff; }
.rl[data-tema="stream"] .rl-nivel { font-size: 3vh; color: #8fb3ff; }
.rl[data-tema="stream"] .rl-ciegas { font-size: 7vh; }
.rl[data-tema="stream"] .rl-ciegas small { font-size: 2.6vh; }
.rl[data-tema="stream"] .rl-prox { font-size: 2.4vh; text-align: center; }
.rl[data-tema="stream"] .rl-barra { color: #8fb3ff; width: 90%; }
.rl[data-tema="stream"] .rl-der { flex-direction: row; justify-content: space-around; text-align: center;
  border: .3vh solid #2b3a55; border-radius: 1vh; background: #111a2b; padding: 1vh; }
.rl[data-tema="stream"] .rl-der b { font-size: 3.4vh; }
.rl[data-tema="stream"] .rl-der h3 { font-size: 1.8vh; }
.rl[data-tema="stream"] .rl-izq { overflow: hidden; border: .3vh solid #2b3a55; border-radius: 1vh; background: #111a2b; padding: 1vh; }
.rl[data-tema="stream"] .rl-premios { font-size: 2.4vh; }
.rl[data-tema="stream"] .rl-fichas { display: none; }
.rl[data-tema="stream"] .rl-top h1 { font-size: 3.4vh; }

@media (max-width: 760px) {
  .rl[data-tema] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .rl[data-tema] .rl-tiempo { font-size: 22vw; }
  .rl[data-tema] .rl-der b { font-size: 6vw; }
  .rl-botones { position: static; grid-column: 1 / -1; flex-wrap: wrap; opacity: 1; }
  .rl[data-tema="stream"] { grid-template-areas: "top" "video" "centro" "der" "izq"; }
  .rl .rl-botones { opacity: 1; }
  .rl:not(.rl-tocado) { cursor: auto; }
  .rl[data-tema="stream"] .rl-video { aspect-ratio: 16 / 9; }
  .rl[data-tema="stream"] .rl-der { flex-wrap: wrap; }
  .rl[data-tema="pro"] .rl-aro { width: 80vw; height: 80vw; }
  .rl[data-tema="pro"] .rl-tiempo { font-size: 16vw; }
  .rl[data-tema="wsop"] .rl-top { margin: 0; }
}

/* Issue #1852 — lo que el control le escribe a la tele. */
.rl-mensaje { flex: 1; margin: 0 2vw; text-align: center; font-size: 3.4vh; font-weight: 600;
  color: #111; background: var(--oro); border-radius: 1vh; padding: .6vh 1.5vw; }
.rl-aviso { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 80%; padding: 4vh 4vw; border-radius: 2vh; text-align: center; font-size: 8vh; font-weight: 800;
  color: #111; background: var(--oro); box-shadow: 0 0 0 100vmax rgba(0,0,0,.55), 0 2vh 6vh rgba(0,0,0,.7);
  animation: rl-aviso .35s ease-out; }
.rl-aviso[hidden] { display: none; }
@keyframes rl-aviso { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
/* Issue #1855 — quién cayó o volvió a entrar: del tamaño del mensaje fijo, unos segundos. */
.rl-evento { position: absolute; z-index: 3; left: 50%; bottom: 9vh; transform: translateX(-50%);
  max-width: 70%; padding: .8vh 2vw; border-radius: 1vh; font-size: 3.4vh; font-weight: 600; text-align: center;
  color: #111; background: var(--oro); box-shadow: 0 1vh 4vh rgba(0,0,0,.6); animation: rl-evento .3s ease-out; }
.rl-evento[hidden] { display: none; }
@keyframes rl-evento { from { transform: translate(-50%, 2vh); opacity: 0; } }
/* Issue #1858 — el resultado, fijo hasta que se deshaga. */
.rl-podio { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 50%; max-width: 86%; max-height: 86%; overflow: hidden; padding: 4vh 4vw; border-radius: 2vh;
  background: #0d1117; border: .4vh solid var(--oro); color: #fff;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.7), 0 0 6vh rgba(var(--oro-rgb), .35); animation: rl-aviso .4s ease-out; }
.rl-podio h2 { margin: 0 0 3vh; text-align: center; font-size: 6vh; color: var(--oro); }
.rl-podio ol { list-style: none; margin: 0; padding: 0; }
.rl-podio li { display: grid; grid-template-columns: 8vh 1fr auto; align-items: baseline; gap: 2vw;
  padding: 1.4vh 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 4.4vh; }
.rl-podio li span { color: var(--muted); }
.rl-podio em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--oro); }
.rl-podio .rl-puesto-1 { font-size: 6.4vh; }
.rl-podio .rl-puesto-1 span { color: var(--oro); }