/* CSS pensado para navegadores de TV antiguos: sin variables, sin flex/grid/gap, sin aspect-ratio ni min()/clamp().
   Lo moderno (degradados, cristal, sombras) se añade encima y, si no existe, se ignora sin romper el diseño. */
*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}
html{background:#060912;background:radial-gradient(600px 500px at 0 0,rgba(43,61,255,.35),transparent 70%),radial-gradient(640px 560px at 100% 100%,rgba(160,43,255,.3),transparent 70%),#060912;background-attachment:fixed;min-height:100%}
body{color:#fff;font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100%;overflow-x:hidden;
  background:transparent}
main{max-width:520px;margin:0 auto;padding:18px 16px 28px}
.brand{text-align:center;font-weight:700;margin:6px 0 18px;font-size:16px}
.brand img{width:30px;height:30px;border-radius:50%;vertical-align:middle;margin-right:10px}
.brand span{color:#8b93b8;font-weight:500}
.card{position:relative;border-radius:22px;padding:18px 12px 0;background:#0c1021;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.14);overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
svg{display:inline-block;vertical-align:middle}
.ic{width:22px;height:22px}

.head{text-align:center;font-size:19px;letter-spacing:.02em;color:#e9ecf3}
.head .ic{color:#22d3ee;margin-right:10px;margin-top:-3px}.head small{font-size:inherit;color:#8b93b8}
.res{text-align:center;font-size:38px;font-weight:200;margin-top:8px;min-height:50px;font-variant-numeric:tabular-nums}
.res:after{content:"";display:block;width:96px;height:2px;margin:6px auto 0;background:#8b93b8;opacity:.7}
.res.on:after{background:#6d6bff;background:-webkit-linear-gradient(left,#22d3ee,#c04dff);background:linear-gradient(90deg,#22d3ee,#c04dff);opacity:1}
.pingrow{text-align:center;margin-top:18px;color:#cfd3dd}
.pingrow .b{display:inline-block;margin-left:14px;vertical-align:middle}
.pingrow .ic{width:20px;height:20px;margin-right:6px;margin-top:-2px}
.pingrow b{font-weight:500;color:#e9ecf3}.pingrow .y{color:#e8c33a}.pingrow .g{color:#22d3ee}
.tiles{text-align:center;margin-top:20px;font-size:0}
.tile{display:inline-block;vertical-align:top;margin:0 20px;color:#9aa0ad;text-align:center;font-size:14px}
.tile svg{width:50px;height:44px;display:block;margin:0 auto 7px}
.tile b{display:block;font-weight:700;color:#d6dae3;margin-bottom:7px}
.dots i{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:currentColor;opacity:.3;-webkit-transition:opacity .25s;transition:opacity .25s}
.dots i.on{opacity:1}
.tile{-webkit-transition:color .4s;transition:color .4s}
.tile.ok{color:#34d399}

.dial{position:relative;width:100%;max-width:440px;margin:6px auto 0}
.dial .sq{position:relative;height:0;padding-bottom:98%}
.dial .sq svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.lab{fill:#fff;font-size:17px;font-weight:700;text-anchor:middle}
.lab.dim{fill:#5c606c}
#prog{-webkit-filter:drop-shadow(0 0 10px rgba(109,107,255,.7));filter:drop-shadow(0 0 10px rgba(109,107,255,.7))}
#needle,#hub{-webkit-transition:opacity .3s;transition:opacity .3s}
.dial.btn #needle,.dial.btn #hub{opacity:0}
.readout{position:absolute;left:29%;width:42%;bottom:2.5%;text-align:center}
.num{font-size:56px;font-weight:200;line-height:1;font-variant-numeric:tabular-nums;-webkit-transition:opacity .3s;transition:opacity .3s}
.num.idle{opacity:.35}
.unit{margin-top:8px;font-size:18px;color:#8b93b8}
.unit .ic{width:20px;height:20px;color:#22d3ee;margin-right:6px;margin-top:-3px}
.phase{position:absolute;left:0;right:0;top:51%;margin-top:-8px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#22d3ee;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}
.phase.on{opacity:.9;-webkit-animation:bl 1.6s ease-in-out infinite;animation:bl 1.6s ease-in-out infinite}
@-webkit-keyframes bl{50%{opacity:.35}}@keyframes bl{50%{opacity:.35}}

#go{position:absolute;left:50%;top:51%;display:block;width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;border:0;cursor:pointer;color:#fff;padding:0;
  background:#7b3cff;background:radial-gradient(circle at 30% 25%,#5b7bff,#7b3cff 60%,#a02bff);
  -webkit-box-shadow:0 0 0 6px rgba(109,107,255,.18),0 12px 50px rgba(124,60,255,.55);box-shadow:0 0 0 6px rgba(109,107,255,.18),0 12px 50px rgba(124,60,255,.55)}
#go .in{display:table;width:116px;height:116px}
#go .cc{display:table-cell;vertical-align:middle;text-align:center}
#go .go{font:800 28px/1 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.06em}
#go svg{display:block;width:30px;height:30px;margin:0 auto 6px}
#go small{display:block;font:700 11px/1 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
#go:focus{outline:4px solid #fff;outline-offset:6px}
#go{-webkit-transition:opacity .3s;transition:opacity .3s}
#go.hide{opacity:0;visibility:hidden}

.err{display:none;text-align:center;color:#ff7b8d;font-weight:600;margin:6px 0 4px}.err.show{display:block}
.share{display:table;visibility:hidden;width:100%;max-width:420px;margin:14px auto 0;border-collapse:separate;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.share.on{visibility:visible}
.share .c{display:table-cell;vertical-align:middle}
.share .ci{width:42px;padding-left:14px}
.share .ci svg{width:18px;height:18px;color:#22d3ee;display:block}
.share .cb{width:130px;padding:5px 5px 5px 0;text-align:right}
.share input{display:block;width:100%;background:transparent;border:0;color:#cfd3dd;font:14px/1 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif;outline:0;text-overflow:ellipsis}
.share button{border:0;cursor:pointer;border-radius:99px;padding:11px 15px;font:700 13px/1 -apple-system,"Segoe UI",Helvetica,Arial,sans-serif;color:#fff;white-space:nowrap;background:#8a55ff;background:-webkit-linear-gradient(left,#6d6bff,#c04dff);background:linear-gradient(135deg,#6d6bff,#c04dff)}
.share button.done{background:#34d399;color:#04130c}
.share button:focus{outline:3px solid #fff}
.foot{text-align:center;margin-top:18px;padding-bottom:16px;font-size:0}
.who{display:inline-block;vertical-align:middle;margin:0 13px;color:#d6dae3;text-align:left;font-size:15px}
.who .tx{display:inline-block;vertical-align:middle}
.who .circ{display:inline-block;vertical-align:middle;width:46px;height:46px;line-height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.14);text-align:center;color:#9aa0ad}
.who .circ svg{width:22px;height:22px}
.who.l .tx{margin-right:12px}.who.r .tx{margin-left:12px}
.who span{display:block;color:#8b93b8;font-size:13px}.who b{font-weight:500;font-size:16px}
.bar{clear:both;height:3px;background:rgba(255,255,255,.07);margin:0 -12px}
.bar i{display:block;height:100%;width:0;background:#6d6bff;background:-webkit-linear-gradient(left,#22d3ee,#c04dff);background:linear-gradient(90deg,#22d3ee,#c04dff)}

/* pagina de resultado compartido */
.res-page .card{padding-bottom:22px;text-align:center}
.res-page .below{text-align:center}
.verdict2{font-size:18px;font-weight:650;margin-top:22px}
.when{color:#8b93b8;font-size:13px;margin-top:6px}
.again-link{display:inline-block;margin-top:18px;padding:13px 30px;border-radius:99px;text-decoration:none;color:#fff;font-weight:700;background:#8a55ff;background:-webkit-linear-gradient(left,#6d6bff,#c04dff);background:linear-gradient(135deg,#6d6bff,#c04dff)}
.again-link:focus{outline:4px solid #fff;outline-offset:4px}

@media (max-width:420px){
  .tile{margin:0 14px}.who{margin:0 7px}.who .circ{width:40px;height:40px;line-height:36px}.who b{font-size:14px}
  #go{width:98px;height:98px;margin:-49px 0 0 -49px}#go .in{width:98px;height:98px}.lab{font-size:15px}.num{font-size:44px}
  .share .cb{width:112px}.share button{padding:10px 11px}
}

/* Pantallas anchas y apaisadas (ordenador, TV): dial a un lado y datos al otro, y fit.js lo ajusta para llenar la pantalla.
   En movil y en vertical se queda la maqueta de una columna. */
@media (min-width:900px) and (min-aspect-ratio:11/10){
  main{max-width:1040px}
  .card{padding:22px 20px 0}
  .card .dial{float:left;width:52%;max-width:none;margin:0 0 14px 2%}
  .card .info{float:right;width:44%;padding-top:6px}
  .card .below{float:right;width:44%}
  .card .tiles{margin-top:24px}
  .card .foot{padding-bottom:6px}
  .card .who{margin:0 8px}
}