@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}
/* Layout: una columna, la cancha ocupa el centro, herramientas y pasos abajo con el pulgar. */
:root{
  --bg:#F2F5F0; --panel:#FFFFFF; --ink:#14221A; --muted:#5B6A60; --line:#D3DBD1;
  --accent:#1F6F43; --accent-ink:#FFFFFF; --warn:#B3261E; --ok:#1F6F43;
  --display:'Barlow Condensed',system-ui,sans-serif; --body:'Barlow',system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1712; --panel:#17231B; --ink:#E8EFE9; --muted:#9BAA9F; --line:#2B3A30;
    --accent:#4CC27F; --accent-ink:#06210F; --warn:#FF8A80; --ok:#4CC27F; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1712; --panel:#17231B; --ink:#E8EFE9; --muted:#9BAA9F; --line:#2B3A30;
  --accent:#4CC27F; --accent-ink:#06210F; --warn:#FF8A80; --ok:#4CC27F; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input,textarea,select{font:inherit;color:inherit}
#app{height:100%;display:flex;flex-direction:column;gap:6px;
  padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
#top{display:flex;gap:6px;align-items:center}
#name{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.01em}
.ib{min-width:44px;height:44px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;font-weight:600}
.ib:disabled{opacity:.35}
.ib.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
#info{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted)}
.pill{padding:3px 9px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:600}
.pill.warn{border-color:var(--warn);color:var(--warn)}
#stage{position:relative;flex:1;min-height:0;border-radius:12px;overflow:hidden;background:#1F5A29}
#board{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
#board text{font-family:var(--display);pointer-events:none}
#selpanel{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;border-radius:12px;background:var(--panel);border:1px solid var(--line);box-shadow:0 4px 16px #0004}
#selpanel input{width:64px;height:40px;text-align:center;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-weight:700}
.seg{flex:none;display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{height:40px;min-width:44px;border:0;background:var(--bg);font-weight:700;cursor:pointer}
.seg.wide{align-self:flex-start}
.cnt{display:flex;align-items:center;gap:10px;margin:8px 0}
.cnt span{width:62px;font-weight:600}
.cnt .seg{flex:1}
.cnt .seg button{flex:1;min-width:0}
.seg.wide button{min-width:110px;height:44px}
.tgl{flex:none;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;width:240px;height:48px;border:1px solid var(--line);border-radius:24px;background:var(--bg);padding:0;cursor:pointer;overflow:hidden;font-weight:700}
.tgl .sl{position:relative;z-index:2;text-align:center;transition:color .2s}
.tgl .th{position:absolute;z-index:1;top:3px;left:3px;width:calc(50% - 3px);height:40px;border-radius:20px;background:var(--accent);transition:transform .2s}
.tgl[aria-checked="false"] .sl.a,.tgl[aria-checked="true"] .sl.d{color:var(--accent-ink)}
.tgl[aria-checked="true"] .th{transform:translateX(100%)}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
#cap{display:none;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:17px;min-height:48px}
#hint{font-size:13px;color:var(--muted);min-height:18px}
#noteRow input{width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
#stepsRow{display:flex;gap:6px;align-items:center}
#chips{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;padding:2px 0}
.chip{flex:none;min-width:44px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-family:var(--display);font-weight:700;font-size:18px;cursor:pointer}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#transport{display:flex;gap:6px}
#transport .ib{flex:1}
#back{flex:2}
#scrubRow{padding:0 2px}
#scrub{width:100%;height:28px;margin:0;accent-color:var(--accent)}
#play{flex:2;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#tools{display:flex;gap:6px}
.tool{flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;font-size:13px;font-weight:600;padding:4px 2px}
.tool.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tool svg{display:block}
body.present #top,body.present #info,body.present #hint,body.present #noteRow,body.present #tools,body.present #chips,body.present #addStep{display:none}
body.present #cap{display:block}
body.present #stepsRow{display:none}
body.present #transport .ib{height:56px;font-size:17px}
#exitPres{display:none}
body.present #exitPres{display:block}
#sheet{position:fixed;inset:0;background:#0007;display:flex;align-items:flex-end;z-index:10}
.sheet-in{width:100%;max-height:88%;overflow-y:auto;background:var(--panel);border-radius:18px 18px 0 0;padding:14px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px}
.sh-head{display:flex;justify-content:space-between;align-items:center}
.sheet-in h2{margin:0;font-family:var(--display);font-size:26px}
.sheet-in h3{margin:8px 0 0;font-family:var(--display);font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row button,.li button,#pres{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;font-weight:600}
.row button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#pres{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.li{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
#fName{flex:1;min-width:150px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.li button.grow{flex:1;text-align:left}
.grp{margin-top:6px}
.li span{flex:1;min-width:0;overflow-wrap:anywhere}
.muted,small{color:var(--muted)}
#io{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--bg);font-size:13px}
#home{position:fixed;inset:0;z-index:30;background:var(--bg);overflow-y:auto;display:flex;justify-content:center}
#home[hidden]{display:none}
.home-in{width:100%;max-width:520px;padding:max(28px,env(safe-area-inset-top)) 18px 28px;display:flex;flex-direction:column;gap:14px}
.home-in h1{margin:0;font-family:var(--display);font-size:34px}
.home-sub{margin:0 0 4px;color:var(--muted);font-size:17px}
#teamList{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tm{position:relative}
.tmgo{width:100%;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:18px;background:var(--panel);cursor:pointer}
.tmemo{font-size:72px;line-height:1}
.tmname{font-family:var(--display);font-size:22px;font-weight:700;overflow-wrap:anywhere;text-align:center;max-width:100%}
.tm .tbtn,.tform .tbtn{min-width:52px;min-height:52px;border:1px solid var(--line);border-radius:14px;background:var(--panel);cursor:pointer;padding:0}
.tm .tbtn{position:absolute;top:8px;right:8px;width:40px;height:40px;min-width:40px;min-height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.tconf{display:flex;flex-direction:column;gap:10px}
.tconf p{margin:0;font-weight:600}
.tconf .tbtn{width:auto;padding:0 18px;font-weight:700}
.home-empty{grid-column:1/-1;margin:0;color:var(--muted)}
.tbtn.warn{border-color:var(--warn);color:var(--warn);width:auto;padding:0 12px;font-weight:700}
.tadd{min-height:56px;border:1px dashed var(--muted);border-radius:16px;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px}
.tadd .ic{margin:0}
.tform{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--accent);border-radius:16px;background:var(--panel)}
.tform input{height:52px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-size:18px;font-weight:600}
.tform #tEmo{width:84px;text-align:center;font-size:30px}
.tform .erow{display:flex;gap:10px;align-items:center}
.tform .epick{display:flex;flex-wrap:wrap;gap:6px}
.tform .epick button{width:44px;height:44px;font-size:24px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;padding:0}
#teamBtn{font-size:22px;padding:0;min-width:46px}
#legal{position:fixed;inset:0;z-index:35;background:var(--bg);overflow-y:auto}
.lg-in{max-width:720px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 16px 40px}
.lg-bar{display:flex;gap:8px;align-items:center;position:sticky;top:0;z-index:2;background:var(--bg);padding:8px 0}
#lgTabs{display:flex;gap:6px;overflow-x:auto}
#lgTabs button{flex:none;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-weight:600;cursor:pointer}
#lgTabs button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.lg-meta{font-size:13px;color:var(--muted);overflow-wrap:anywhere;margin:8px 0}
.lg-note{padding:10px 12px;border:1px solid var(--warn);border-radius:10px;font-size:14px;margin:8px 0 14px;line-height:1.45}
#lgBody h2{font-family:var(--display);font-size:28px;margin:8px 0}
#lgBody h3{font-family:var(--display);font-size:20px;margin:18px 0 4px}
#lgBody p,#lgBody li{line-height:1.5;font-size:15px;overflow-wrap:anywhere}
#lgBody p{margin:6px 0}
#lgBody ul,#lgBody ol{padding-left:22px;margin:6px 0}
#lgBody table{border-collapse:collapse;display:block;overflow-x:auto;font-size:13px;margin:8px 0}
#lgBody th,#lgBody td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
#lgBody code{font-size:12px;background:var(--panel);padding:1px 4px;border-radius:4px;overflow-wrap:anywhere}
mark.pend{background:#FFE08A;color:#000;border-radius:4px;padding:0 3px}
.sug{display:flex;align-items:center;gap:2px;width:100%;margin-top:14px;padding:0;border:0;background:none;cursor:pointer;min-height:96px;text-align:left}
.sugav svg{height:92px;width:auto;display:block;overflow:visible}
.sugcloud{flex:1;min-width:0;height:84px}
.sugcloud .cs circle{fill:var(--panel);stroke:var(--line);stroke-width:3}
.sugcloud .cf circle{fill:var(--panel);stroke:none}
.sugcloud text{font-family:var(--display);font-weight:700;font-size:22px;fill:var(--ink)}
.sug:active .sugcloud{transform:scale(.97)}
.sg-m{border-top:1px solid var(--line);padding:8px 0}.sg-m b{font-size:14px}.sg-m small{color:var(--muted);margin-left:6px}.sg-m p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.home-legal{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:6px}
.home-legal button{border:0;background:none;color:var(--muted);text-decoration:underline;font-size:14px;min-height:44px;padding:0;cursor:pointer}
#hub{position:fixed;inset:0;z-index:33;background:var(--bg);overflow-y:auto}
.hb-in{max-width:640px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 16px 48px}
.hb-bar{display:flex;gap:8px;align-items:center;position:sticky;top:0;z-index:2;background:var(--bg);padding:8px 0}
.hb-bar h2{flex:1;margin:0;font-family:var(--display);font-size:24px}
#hbBody h3{font-family:var(--display);font-size:20px;margin:18px 0 6px}
#hbBody p{line-height:1.45;margin:8px 0;overflow-wrap:anywhere}
.hb-note{color:var(--muted);font-size:14px}
.hb-note.warn{color:var(--warn)}
.hb-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.hb-b{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;font-weight:600}
.hb-b.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hb-b.warn{border-color:var(--warn);color:var(--warn)}
.hb-b:disabled{opacity:.4}
.hb-l{display:flex;flex-direction:column;gap:4px;font-weight:600;margin:10px 0}
.hb-l.sm{margin:0;flex:1;min-width:140px}
.hb-l input,.hb-l select,.hb-l textarea,.hb-row input,.hb-out{min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-weight:400;width:100%}
.hb-row input{flex:1;min-width:0}
.hb-ck{display:flex;gap:10px;align-items:flex-start;margin:12px 0;line-height:1.4}
.hb-ck input{width:24px;height:24px;flex:none;margin-top:2px}
.lnk{border:0;background:none;color:var(--accent);text-decoration:underline;font-weight:700;padding:0;cursor:pointer;font-size:inherit}
.hb-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:10px 12px;margin:8px 0}
.hb-t{overflow-wrap:anywhere}
.hb-out{margin:8px 0;font-size:12px}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;border:1px solid var(--accent);font-size:12px;font-weight:700;margin:4px 0}
#shBox{margin-top:8px;padding:8px;border:1px solid var(--accent);border-radius:10px}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);padding:10px 16px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:600;z-index:50;max-width:90%}
#counter{position:absolute;top:6px;right:6px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;pointer-events:none;z-index:2}
#colRows{display:flex;flex-direction:column;gap:10px}
.colblock{display:flex;flex-direction:column;gap:8px}
.colrow{display:flex;align-items:center;gap:10px}
.colrow b{font-weight:600;min-width:96px}
.cb{display:flex;align-items:center;justify-content:space-between;gap:10px;height:48px;min-width:110px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer}
.cdot{display:block;width:30px;height:30px;box-sizing:border-box;border-radius:50%;border:2px solid var(--line)}
.chev{font-size:14px;color:var(--muted)}
.cpn{display:flex;flex-wrap:wrap;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.csw{width:40px;height:40px;flex:none;border-radius:50%;border:2px solid var(--line);padding:0;cursor:pointer}
.csw.on{outline:3px solid var(--accent);outline-offset:2px}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.avgrid button{height:78px;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.avgrid button{position:relative}.avgrid button.on{background:var(--accent);border-color:var(--accent)}.avgrid button.lk svg:first-child{filter:grayscale(1);opacity:.35}.avgrid .lkic{position:absolute;right:4px;bottom:4px;width:22px;height:22px;filter:none;opacity:1}
.avgrid svg{height:100%;width:auto;display:block;overflow:visible}
.spd{display:flex;flex-direction:column;gap:4px}
#cSpd{width:100%;height:32px;margin:0;accent-color:var(--accent)}
.spdl{display:grid;grid-template-columns:1fr auto 1fr;font-size:12px;color:var(--muted);font-weight:600}
.spdl span:first-child{text-align:left}.spdl span:last-child{text-align:right}
#cSpdTxt{font-size:13px;font-weight:600}
.ic{width:22px;height:22px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.row button[data-ic],.li button[data-ic],.li button.icb{min-width:48px;padding:0 10px}
input[type=color]{width:44px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
#zoomReset{position:absolute;top:6px;left:6px;z-index:2;height:32px;padding:0 12px;border:1px solid #fff6;border-radius:99px;background:#000b;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
#cRow{display:flex;align-items:flex-start}
#cloudBox{position:relative;width:44px;height:30px;margin-right:-3px;margin-top:-1px;opacity:0;transform-origin:92% 50%}
#cloudBox.wide{width:84px}
#cloudTxt{position:absolute;inset:0 15% 0 0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:15px;line-height:1;color:#14221A;white-space:nowrap;pointer-events:none}
#cloudTxt.word{font-size:10px;letter-spacing:.02em}
#cloudTxt.ten{color:#B3261E}
#cloudSvg{width:100%;height:100%;display:block;overflow:visible}
#fig{position:relative;width:27px;height:37px;border:0;background:none;padding:0;cursor:pointer;pointer-events:auto;touch-action:manipulation}
#fig::after{content:"";position:absolute;inset:-10px}
#fig svg{width:100%;height:100%;display:block;overflow:visible}
#fig text{font-family:var(--display)}
#mouth{transform-box:fill-box;transform-origin:center}
.armL{transform-origin:26px 46px}.armR{transform-origin:44px 46px}
#fig.going .armL{animation:armsL .5s ease-in-out infinite alternate}
#fig.going .armR{animation:armsR .5s ease-in-out infinite alternate}
#fig.going svg{animation:bob .5s ease-in-out infinite alternate}
@keyframes armsL{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
@keyframes armsR{from{transform:rotate(14deg)}to{transform:rotate(-12deg)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-1px)}}
#cPill{font-size:9px;font-weight:700;padding:1px 6px;border-radius:99px;background:#000b;color:#fff;white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}#fig.going .armL,#fig.going .armR,#fig.going svg{animation:none}}