:root{
  --bg:#070b12; --panel:#0d1520; --panel2:#111c2b; --line:#1e3045; --line2:#2a4260;
  --txt:#e8eef7; --muted:#8aa0b8; --green:#38e08b; --green2:#0f9d63;
  --amber:#ffc857; --red:#ff5d73; --blue:#5aa9ff; --purple:#a78bfa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(56,224,139,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(90,169,255,.10), transparent 55%),
    var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;min-height:100vh;font-size:14px;
}
.wrap{max-width:1440px;margin:0 auto;padding:22px 16px 60px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,var(--green),#0b6b48);display:grid;place-items:center;font-weight:900;color:#04120b;font-size:14px;box-shadow:0 8px 24px rgba(56,224,139,.22)}
h1{font-size:clamp(20px,3vw,27px);margin:0;letter-spacing:-.4px}
h2{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:0 0 12px}
h3{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:14px 0 8px}
.sub{color:var(--muted);font-size:13px;margin-top:2px}
.topctl{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--muted);padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.pill.ok{color:var(--green);border-color:rgba(56,224,139,.3)} .pill.ok .dot{background:var(--green);box-shadow:0 0 8px var(--green)}
.pill.bad{color:var(--amber);border-color:rgba(255,200,87,.3)} .pill.bad .dot{background:var(--amber)}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px}
.seg button{background:none;border:0;color:var(--muted);padding:6px 12px;border-radius:7px;font-weight:700;cursor:pointer;font-size:12.5px}
.seg button.on{background:var(--panel2);color:var(--txt);box-shadow:inset 0 0 0 1px var(--line2)}

.layout{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
@media(max-width:980px){.layout{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)),var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px;min-width:0}
.side{position:sticky;top:12px;max-height:calc(100vh - 24px);display:flex;flex-direction:column}
@media(max-width:980px){.side{position:static;max-height:60vh}}
.inp,.form input,.form select,input.odd{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:8px 10px;font:inherit;width:100%}
.inp:focus,.form input:focus,.form select:focus,input.odd:focus{outline:none;border-color:var(--blue)}
.filters{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0}
.chk{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);cursor:pointer}
.chk input{accent-color:var(--green)}
.mlist{overflow:auto;margin:0 -6px;padding:0 6px;flex:1}
.lg{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:12px 0 4px;display:flex;align-items:center;gap:6px}
.lg img{width:14px;height:14px;object-fit:contain}
.mi{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 8px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.mi:hover{background:var(--panel2)}
.mi.on{background:var(--panel2);border-color:var(--green2)}
.mi .t{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.mi .n{font-size:13px;line-height:1.25;overflow:hidden}
.mi .n div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mi .b{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.tag{font-size:9.5px;font-weight:800;padding:2px 5px;border-radius:5px;background:rgba(255,255,255,.05);color:var(--muted)}
.tag.bw{white-space:nowrap;background:rgba(255,200,87,.12);color:var(--amber)}
.tag.tp{background:rgba(90,169,255,.12);color:var(--blue)}
.tag.live{background:rgba(255,93,115,.15);color:var(--red)}
.muted{color:var(--muted)} .small{font-size:12px} .pad{padding:10px}

.empty p{max-width:640px}
.matchhead{display:flex;flex-direction:column;gap:6px}
.mh-teams{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.team{display:flex;align-items:center;gap:8px;font-size:clamp(18px,2.4vw,24px);font-weight:800;letter-spacing:-.3px}
.team img{width:34px;height:34px;object-fit:contain}
.vs{color:var(--muted);font-weight:700}
.mh-meta{color:var(--muted);font-size:13px}
.mh-warn{font-size:13px;color:var(--amber)}
.mh-warn:empty{display:none}

.kpis4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media(max-width:820px){.kpis4{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.kpi .l{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.kpi .v{font-size:20px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:12px;color:var(--muted);font-weight:600}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1180px){.grid2{grid-template-columns:1fr}}
.grid2>.card{margin-bottom:16px}
.form{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:600px){.form{grid-template-columns:repeat(2,1fr)}}
.form label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.form label.wide{grid-column:span 2}
.form .val{color:var(--txt);font-weight:800}
input[type=range]{accent-color:var(--green);padding:0!important;background:none!important;border:0!important}
.markets{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px}
.btn{background:linear-gradient(145deg,var(--green),var(--green2));border:0;color:#04120b;font-weight:800;border-radius:9px;padding:8px 12px;cursor:pointer;font:inherit;font-weight:800}
.btn.ghost{background:none;color:var(--muted);border:1px solid var(--line)}
.btn.sm{padding:4px 8px;font-size:12px}
.h2row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.h2row h2{margin:0}

.src{display:grid;grid-template-columns:auto 1fr 110px 36px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.src:last-child{border-bottom:0}
.src .nm{font-weight:700;font-size:13px}
.src .nm a{color:var(--blue);text-decoration:none;font-weight:600;font-size:11px;margin-left:6px}
.src .inf{font-size:11.5px;color:var(--muted)}
.src .w{font-variant-numeric:tabular-nums;font-size:12px;text-align:right;color:var(--muted)}
.src.off{opacity:.45}
.src .x{background:none;border:0;color:var(--muted);cursor:pointer}
.err{font-size:11.5px;color:var(--amber);margin-top:6px}
.manual{margin-top:10px}
summary{cursor:pointer;color:var(--muted);font-size:12.5px;margin:6px 0}
.tw{font-size:12px;border-left:2px solid var(--line2);padding:4px 8px;margin:6px 0;color:var(--muted)}
.tw b{color:var(--txt)}

.tablewrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);text-align:right;padding:6px 6px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:700}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{text-align:right;padding:5px 6px;border-bottom:1px solid rgba(30,48,69,.6);white-space:nowrap}
.tbl tr.grp td{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:1px;padding-top:12px;border-bottom:0;text-align:left}
.tbl input.odd{width:68px;padding:4px 6px;text-align:right;font-variant-numeric:tabular-nums}
.tbl input.odd.edited{border-color:var(--amber)}
.pos{color:var(--green);font-weight:800} .neg{color:var(--red)} .dim{color:var(--muted)}
.bar{display:inline-block;height:6px;border-radius:3px;background:var(--blue);vertical-align:middle;margin-left:4px;opacity:.7}

.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.play{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .12s}
.play:hover{border-color:var(--line2)}
.play.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}
.play .legs{font-weight:700;font-size:13.5px;line-height:1.3}
.play .legs span{display:block}
.play .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-variant-numeric:tabular-nums}
.play .nums div{font-size:15px;font-weight:800}
.play .nums small{display:block;font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.badge{font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px;align-self:flex-start}
.badge.real{background:rgba(56,224,139,.12);color:var(--green)}
.badge.prod{background:rgba(255,200,87,.12);color:var(--amber)}

.tk .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tk .row b{font-size:15px}
.tk .legs{margin-bottom:10px}
.tk .leg{display:flex;justify-content:space-between;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:6px}
.tk .form{margin-top:10px}
.tk .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.hist{display:flex;align-items:flex-end;gap:2px;height:70px;margin-top:10px}
.hist div{flex:1;background:var(--blue);opacity:.75;border-radius:2px 2px 0 0;min-height:1px}
.hist div.neg{background:var(--red)}

.matrix{display:grid;gap:2px;font-size:10.5px;font-variant-numeric:tabular-nums}
.matrix div{padding:4px 0;text-align:center;border-radius:3px}
.matrix .hd{color:var(--muted);font-weight:700}

.note p{font-size:13px;margin:0 0 8px}
.note b{color:var(--amber)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--green);color:#04120b;font-weight:800;padding:9px 16px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}

/* ---------------------------------------------------------------- punto dulce */
.sw-why{margin:0 0 10px;font-size:13.5px}
.play.sweet{border-color:rgba(56,224,139,.45);background:linear-gradient(180deg,rgba(56,224,139,.07),transparent),var(--panel2)}
.sw-ladder{display:flex;flex-direction:column;gap:6px}
.sw-step{display:grid;grid-template-columns:34px minmax(0,1fr) 64px 56px;gap:8px;align-items:center;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;color:var(--txt);font:inherit;cursor:pointer}
.sw-step:hover{border-color:var(--line2)}
.sw-step.pick{border-color:rgba(56,224,139,.55)}
.sw-step.on{box-shadow:0 0 0 1px var(--green) inset;border-color:var(--green)}
.sw-step.sw-hd{background:none;border:0;padding:0 10px;cursor:default;font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700}
.sw-n{font-weight:900;font-size:15px;text-align:center}
.sw-l{font-size:12px;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
.sw-o,.sw-p{font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.sw-hd span:nth-child(3),.sw-hd span:nth-child(4){text-align:right}

/* ---------------------------------------------------------------- móvil */
.layout>*,.grid2>*,.kpis4>*{min-width:0}
html,body{overflow-x:hidden}
.tk .leg{gap:10px}
.tk .leg>span:first-child{min-width:0;overflow-wrap:anywhere}
.tk .leg>span:last-child{white-space:nowrap}
.mh-teams .team{min-width:0;overflow-wrap:anywhere}
@media(max-width:700px){
  .src{grid-template-columns:auto minmax(0,1fr) 72px 28px;gap:8px}
}
@media(max-width:600px){
  .wrap{padding:12px 10px 40px}
  .card{padding:12px;border-radius:13px;margin-bottom:12px}
  .grid2{gap:12px}
  .grid2>.card{margin-bottom:12px}
  .top{margin-bottom:12px}
  .sub{display:none}
  .topctl{width:100%}
  .seg{width:100%}
  .seg button{flex:1;padding:8px 6px}
  .layout{gap:12px}
  .side{max-height:50vh}
  .kpis4{gap:8px}
  .kpi{padding:9px 10px}
  .kpi .v{font-size:17px}
  .results{grid-template-columns:1fr}
  .play .nums div{font-size:14px}
  .form label.wide{grid-column:1/-1}
  /* inputs ≥16px: evita el zoom automático de iOS al enfocar */
  .inp,.form input,.form select,input.odd{font-size:16px;padding:9px 10px}
  .tbl input.odd{width:64px;font-size:16px}
  .markets{gap:8px 12px}
  .chk{font-size:13px}
  .sw-step{grid-template-columns:24px minmax(0,1fr) 52px 48px;gap:6px;padding:8px}
  .sw-l{font-size:11.5px}
  .sw-step.sw-hd{padding:0 8px}
  .matrix{font-size:9px;gap:1px}
  .matrix div{padding:3px 0}
  .tk .acts .btn{flex:1}
}
.play.dimmed{opacity:.75}
.propbar{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:10px}
.tbl td.psel{white-space:normal;min-width:150px}
.pinfo{font-size:11px;color:var(--muted);line-height:1.3;margin-top:2px}
.sm-only{display:none}
@media(max-width:600px){.propbar{grid-template-columns:1fr 1fr}.propbar #pQ{grid-column:1/-1}#propTable .hm{display:none}.sm-only{display:inline}.tbl td.psel{min-width:0}}
.form label[hidden]{display:none}