:root{
  --bg:#EEF1F5; --surface:#FFFFFF; --ink:#16202E; --muted:#5E6B7C;
  --line:#DCE2EA; --line-strong:#C3CCD8;
  --signal:#0E7C86; --signal-deep:#0A5D65; --signal-soft:#E2F1F1;
  --amber:#B8791A; --amber-soft:#FBF0DC;
  --danger:#B23A2E; --danger-soft:#F7E2DF;
  --ok:#2E7D4F; --ok-soft:#E2F0E7;
  --violet:#6A4C93; --violet-soft:#EEE8F5;
  --shadow:0 1px 2px rgba(20,32,46,.05), 0 6px 20px rgba(20,32,46,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;padding-bottom:60px}
.wrap{max-width:820px;margin:0 auto;padding:20px 16px}
header{padding:26px 0 14px}
.kicker{display:flex;align-items:center;gap:8px;color:var(--signal-deep);font-weight:600;font-size:.78rem;margin-bottom:10px}
.kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--signal);position:relative;flex:0 0 auto}
.kicker .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--signal);opacity:.35;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.4);opacity:0}}
h1{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.85rem;line-height:1.15;letter-spacing:-.01em}
header p{color:var(--muted);margin-top:10px;max-width:60ch;font-size:.95rem}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:14px 0 6px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:.85rem;font-weight:500;cursor:pointer;white-space:nowrap}
.tab:hover{border-color:var(--line-strong)}
.tab.active{border-color:var(--signal);color:var(--signal-deep);background:var(--signal-soft)}
.tab .n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--bg);color:var(--muted);font-size:.72rem;font-weight:700}
.tab.active .n{background:var(--signal);color:#fff}
.panel{display:none;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow);margin-top:14px}
.panel.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel h2{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:1.3rem;margin-bottom:4px}
.panel .lead{color:var(--muted);font-size:.92rem;margin-bottom:18px;max-width:64ch}
label.fld{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin:0 0 6px}
input.text,textarea.text{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:11px 12px;font:inherit;color:var(--ink)}
input.text:focus,textarea.text:focus{outline:none;border-color:var(--signal)}
.items{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.item{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:4px 4px 4px 12px}
.item-main{display:flex;align-items:center;gap:10px}
.item .grip{color:var(--line-strong);flex:0 0 auto}
.item input.name{flex:1;border:none;background:transparent;font:inherit;color:var(--ink);padding:9px 4px;min-width:0}
.item input.name:focus{outline:none}
.item .mbtn{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:.72rem;font-weight:600;padding:5px 9px;border-radius:7px;cursor:pointer;white-space:nowrap}
.item .mbtn.on{background:var(--violet-soft);border-color:#cdbfe0;color:var(--violet)}
.item .rm{flex:0 0 auto;width:32px;height:32px;border-radius:8px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:1.1rem}
.item .rm:hover{background:var(--danger-soft);color:var(--danger)}
.measure-cfg{display:none;gap:8px;padding:8px 8px 6px 26px;align-items:center;flex-wrap:wrap}
.measure-cfg.show{display:flex}
.measure-cfg input{width:120px;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:6px 9px;font:inherit;font-size:.85rem}
.measure-cfg select{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:6px 9px;font:inherit;font-size:.85rem}
.measure-cfg span.l{font-size:.78rem;color:var(--muted)}
.add-row{display:flex;gap:8px}
.add-row input{flex:1;border:1px dashed var(--line-strong);background:transparent;border-radius:10px;padding:11px 12px;font:inherit}
.add-row input:focus{outline:none;border-color:var(--signal);border-style:solid}
.btn{appearance:none;border:none;font:inherit;font-weight:600;border-radius:10px;padding:12px 18px;cursor:pointer;transition:background .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:var(--signal-deep)}
.btn-ghost{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--line-strong)}
.btn-sm{padding:8px 12px;font-size:.85rem}
.foot{display:flex;justify-content:space-between;gap:10px;margin-top:22px;flex-wrap:wrap}
.pw{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;background:linear-gradient(#fff,#fcfdfe)}
.pw-heads{display:flex;justify-content:space-between;gap:12px}
.pw-head{flex:1;font-weight:600;font-size:.95rem}
.pw-head.r{text-align:right;color:var(--muted);font-weight:500}
.pw-verdict{text-align:center;font-size:.8rem;color:var(--signal-deep);min-height:1.1em;margin:8px 0 2px;font-weight:500}
input[type=range].pw-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--signal) 0%,var(--line) 50%,var(--amber) 100%);outline:none}
input[type=range].pw-slider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--signal-deep);box-shadow:0 2px 5px rgba(0,0,0,.18);cursor:pointer}
input[type=range].pw-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--signal-deep);cursor:pointer}
.scale-ticks{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);margin-top:6px;padding:0 2px}
.cbadge{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:10px;font-size:.85rem;font-weight:500;margin-top:6px}
.cbadge.good{background:var(--ok-soft);color:var(--ok)}
.cbadge.warn{background:var(--amber-soft);color:var(--amber)}
.cbadge.bad{background:var(--danger-soft);color:var(--danger)}
.cbadge b{font-weight:700}
.plink{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;flex-wrap:wrap}
.plink .who{font-weight:600;flex:0 0 auto}
.plink .status{font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:999px}
.plink .status.wait{background:var(--amber-soft);color:var(--amber)}
.plink .status.done{background:var(--ok-soft);color:var(--ok)}
.plink .url{flex:1;min-width:180px;font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crit-block{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.crit-block h3{font-size:1rem;font-weight:600;margin-bottom:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wtag{font-size:.72rem;font-weight:600;color:var(--signal-deep);background:var(--signal-soft);padding:2px 8px;border-radius:999px}
.mtag{font-size:.72rem;font-weight:600;color:var(--violet);background:var(--violet-soft);padding:2px 8px;border-radius:999px}
.crit-block p.hint{color:var(--muted);font-size:.82rem;margin:6px 0 10px}
.rate-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rate-row:last-child{border-bottom:none}
.rate-name{flex:1;font-weight:500;min-width:0}
.rate-ctrl{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.rate-ctrl input[type=range]{width:120px}
.rate-ctrl input.num{width:100px;border:1px solid var(--line);border-radius:8px;padding:8px 9px;font:inherit;text-align:right}
.rate-unit{font-size:.8rem;color:var(--muted);min-width:34px}
.rate-val{width:26px;text-align:center;font-weight:700;color:var(--signal-deep)}
.gw-row{margin-bottom:12px}
.gw-top{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:5px;gap:10px}
.gw-top .val{font-weight:700;color:var(--signal-deep)}
.gw-bar{height:9px;border-radius:6px;background:var(--bg);position:relative}
.gw-bar>span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--signal),var(--signal-deep))}
.gw-range{position:absolute;top:-3px;height:15px;border-left:2px solid var(--muted);border-right:2px solid var(--muted);opacity:.55}
.disagree{font-size:.75rem;color:var(--amber);font-weight:600;margin-left:6px}
.rank{display:flex;flex-direction:column;gap:12px;margin:6px 0 20px}
.rank-item{border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.rank-item.win{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
.rank-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.rank-name{font-weight:600;font-size:1.05rem;display:flex;align-items:center;gap:9px}
.medal{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;color:#fff;background:var(--muted)}
.rank-item.win .medal{background:var(--signal)}
.rank-score{font-weight:700;font-size:1.1rem;color:var(--signal-deep)}
.bar{height:10px;border-radius:6px;background:var(--bg);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--signal),var(--signal-deep));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.rank-item:not(.win) .bar>span{background:var(--line-strong)}
.breakdown{margin-top:20px;border:1px solid var(--line);border-radius:14px;overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.86rem;min-width:440px}
th,td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--bg);font-weight:600;color:var(--muted);font-size:.78rem}
tbody tr:last-child td{border-bottom:none}
td.best{color:var(--signal-deep);font-weight:700;background:var(--signal-soft)}
.wrow td{font-weight:700;background:#fafbfc;color:var(--muted);font-size:.8rem}
.note{background:var(--signal-soft);border:1px solid #cfe6e6;border-radius:12px;padding:14px 16px;font-size:.86rem;color:var(--signal-deep);margin-top:20px}
.callout{background:var(--amber-soft);border:1px solid #ecdcb8;border-radius:12px;padding:12px 15px;font-size:.85rem;color:var(--amber);margin:10px 0}
.empty{color:var(--muted);font-size:.9rem;padding:20px;text-align:center;border:1px dashed var(--line-strong);border-radius:12px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-size:.88rem;opacity:0;pointer-events:none;transition:.25s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:520px){h1{font-size:1.5rem}.rate-ctrl input[type=range]{width:92px}}

/* ---- Vista en vivo ---- */
.live-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.live-ind{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--danger)}
.live-ind .ld{width:10px;height:10px;border-radius:50%;background:var(--danger);position:relative}
.live-ind .ld::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--danger);opacity:.4;animation:pulse 1.8s ease-out infinite}
.live-ind.paused{color:var(--muted)}
.live-ind.paused .ld{background:var(--muted)}
.live-ind.paused .ld::after{display:none}
.progress-wrap{margin:4px 0 20px}
.progress-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.progress-big{font-family:'Newsreader',Georgia,serif;font-size:2rem;color:var(--ink);line-height:1}
.progress-big b{color:var(--signal-deep)}
.progress-lbl{font-size:.85rem;color:var(--muted)}
.progress{height:14px;border-radius:8px;background:var(--bg);overflow:hidden;border:1px solid var(--line)}
.progress>span{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--signal),var(--signal-deep));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.pchip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:.9rem;font-weight:500;color:var(--muted);transition:.3s}
.pchip .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;color:#fff;background:var(--line-strong);flex:0 0 auto}
.pchip.done{border-color:#bfe3d0;background:var(--ok-soft);color:var(--ok)}
.pchip.done .ic{background:var(--ok)}
.pchip.just{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.live-rank .rank-name{font-size:1.15rem}
.live-waiting{text-align:center;padding:40px 20px;color:var(--muted)}
.live-waiting .big{font-family:'Newsreader',Georgia,serif;font-size:1.4rem;color:var(--ink);margin-bottom:6px}
/* Vista en vivo */
.live-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.live-toggle{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 15px;cursor:pointer;font:inherit;font-size:.85rem;font-weight:600;color:var(--muted)}
.live-toggle.on{border-color:var(--signal);color:var(--signal-deep);background:var(--signal-soft)}
.live-toggle .ld{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:0 0 auto}
.live-toggle.on .ld{background:var(--signal);position:relative}
.live-toggle.on .ld::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--signal);opacity:.4;animation:pulse 1.8s ease-out infinite}
.live-updated{font-size:.78rem;color:var(--muted)}
.progress{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:18px;background:#fbfcfd}
.progress-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;gap:10px}
.progress-top .lbl{font-weight:600}
.progress-top .cnt{font-weight:700;color:var(--signal-deep)}
.progress-bar{height:12px;border-radius:7px;background:var(--bg);overflow:hidden;border:1px solid var(--line)}
.progress-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--signal),var(--signal-deep));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.pchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.pchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:.82rem;background:var(--surface);transition:background .3s}
.pchip .d{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.pchip.done{border-color:#bfe0cf;background:var(--ok-soft);color:var(--ok)}
.pchip.done .d{background:var(--ok)}
.pchip.wait{color:var(--muted)}
.pchip.wait .d{background:var(--line-strong)}
@keyframes flashin{0%{background:#c9ecec}100%{background:var(--ok-soft)}}
.pchip.flash{animation:flashin 1s ease}