/* SMBoard Pro v75 — style.css */
:root{
  --bg:#0d1117;--panel:#161b22;--panel2:#1e2730;
  --accent:#3d9e56;--warn:#f1c40f;--danger:#e74c3c;
  --text:#e8eaed;--muted:#6e7681;--border:#30363d;--r:7px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;user-select:none;}

body,html{margin:0;padding:0;width:100%;min-width:1150px;height:100dvh;overflow:hidden;background:#000;font-family:'Barlow',sans-serif;color:var(--text);}
/* Permite que en pantalla completa el navegador use el ancho real del dispositivo */
:fullscreen body, :fullscreen html { min-width: 100vw; }
:-webkit-full-screen body, :-webkit-full-screen html { min-width: 100vw; }

/* ── APP SHELL ── */
#app{display:flex;flex-direction:column;width:100vw;height:100dvh;}

/* ── TOPBAR ── */
#topbar{
  height:50px;flex-shrink:0;
  background:var(--bg);display:flex;align-items:center;gap:6px;
  padding:0 8px;border-bottom:1px solid var(--border);z-index:200;
  /* SOLUCIÓN: Habilita scroll horizontal y oculta la barra */
  overflow-x:auto; 
  overflow-y:hidden;
  scrollbar-width:none; /* Firefox */
}
#topbar::-webkit-scrollbar{display:none;} /* Chrome/Safari */
#topbar > * { flex-shrink: 0; } /* Previene que los botones se aplasten al hacer scroll */

.tg{display:flex;gap:5px;align-items:center;flex-shrink:0;}
.logo{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;white-space:nowrap;}
.logo span{color:var(--accent);}
#step-label{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;color:var(--warn);min-width:48px;text-align:center;}
.poly-badge{background:var(--warn);color:#000;font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px;animation:pb .9s ease-in-out infinite alternate;}
@keyframes pb{from{opacity:1}to{opacity:.4}}

/* ── MAIN ROW — ocupa el resto de altura ── */
#layout{
  display:flex;flex-direction:row;
  flex:1;min-height:0;         /* crítico para que no desborde */
  overflow:hidden;
}

/* ── SIDEBARS ── */
#left{
  width:72px;flex-shrink:0;
  background:var(--panel);border-right:1px solid var(--border);
  overflow-y:auto;overflow-x:hidden;
  padding:5px 3px;z-index:100;
  scrollbar-width:none; /* Firefox: sin scrollbar */
}
#left::-webkit-scrollbar{display:none;} /* Chrome/Safari: sin scrollbar */
#right{
  width:212px;flex-shrink:0;
  background:var(--panel);border-left:1px solid var(--border);
  overflow-y:auto;overflow-x:hidden;
  padding:9px;z-index:100;
}
.cat{font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--muted);text-align:center;margin:11px 0 5px;text-transform:uppercase;}

/* ── HERRAMIENTAS ── */
.tool{width:64px;height:50px;margin:2px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;color:#fff;transition:background .12s,border-color .12s,transform .1s;}
.tool:hover{background:#263040;border-color:var(--accent);transform:translateY(-1px);}
.tool:active{transform:scale(.93);}
.ti{font-size:17px;line-height:1;}
.tl{font-size:8px;font-weight:600;letter-spacing:.4px;color:var(--muted);}
.pdot{border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;}

/* Material icons */
.cone-i{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:17px solid #e67e22;display:block;}
.cone-low-i{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:10px solid #e74c3c;display:block;}
.pica-i{width:5px;height:22px;background:linear-gradient(#f1c40f,#e67e22);border-radius:3px;display:block;}
.valla-i{width:22px;height:12px;border:3px solid #e74c3c;border-bottom:none;border-radius:3px 3px 0 0;display:block;}
.porteria-i{width:30px;height:16px;border:3px solid #e74c3c;border-bottom:none;border-radius:2px 2px 0 0;display:block;background:repeating-linear-gradient(45deg,rgba(231,76,60,0.3) 0,rgba(231,76,60,0.3) 1px,transparent 0,transparent 50%),repeating-linear-gradient(-45deg,rgba(231,76,60,0.3) 0,rgba(231,76,60,0.3) 1px,transparent 0,transparent 50%);background-size:5px 5px;}
.ladder-i{width:26px;height:13px;border-top:3px solid #f1c40f;border-bottom:3px solid #f1c40f;background:repeating-linear-gradient(90deg,transparent,transparent 4px,#f1c40f 4px,#f1c40f 6px);display:block;}
.weight-i{width:18px;height:11px;background:#95a5a6;border-radius:3px;position:relative;display:block;}
.weight-i::before{content:'';position:absolute;left:50%;top:-4px;transform:translateX(-50%);width:5px;height:4px;background:#7f8c8d;border-radius:2px;}
.zone-fill-i{width:22px;height:16px;background:rgba(255,255,255,.22);border:2px solid #fff;border-radius:2px;display:block;}
.zone-line-i{width:22px;height:16px;background:transparent;border:2px dashed rgba(255,255,255,.7);border-radius:2px;display:block;}
.zone-split-i{width:22px;height:16px;background:transparent;border:2px solid rgba(255,255,255,.7);border-radius:2px;display:block;}
.oval-fill-i{width:22px;height:16px;background:rgba(255,255,255,.22);border:2px solid rgba(255,255,255,.9);border-radius:50%;display:block;}
.oval-line-i{width:22px;height:16px;background:transparent;border:2px solid rgba(255,255,255,.7);border-radius:50%;display:block;}
.hatch-rect-i{width:22px;height:15px;border:2px solid #e74c3c;border-radius:2px;overflow:hidden;background:repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(231,76,60,0.6) 2px,rgba(231,76,60,0.6) 4px);display:block;}
.hatch-oval-i{width:22px;height:15px;border:2px solid #e74c3c;border-radius:50%;overflow:hidden;background:repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(231,76,60,0.6) 2px,rgba(231,76,60,0.6) 4px);display:block;}
.s2{background-image:linear-gradient(90deg,transparent calc(50% - .75px),rgba(255,255,255,.7) calc(50% - .75px),rgba(255,255,255,.7) calc(50% + .75px),transparent calc(50% + .75px));}
.s3{background-image:linear-gradient(90deg,transparent calc(33.3% - .75px),rgba(255,255,255,.7) calc(33.3% - .75px),rgba(255,255,255,.7) calc(33.3% + .75px),transparent calc(33.3% + .75px),transparent calc(66.6% - .75px),rgba(255,255,255,.7) calc(66.6% - .75px),rgba(255,255,255,.7) calc(66.6% + .75px),transparent calc(66.6% + .75px));}
.s4{background-image:linear-gradient(90deg,transparent calc(50% - .75px),rgba(255,255,255,.7) calc(50% - .75px),rgba(255,255,255,.7) calc(50% + .75px),transparent calc(50% + .75px)),linear-gradient(0deg,transparent calc(50% - .75px),rgba(255,255,255,.7) calc(50% - .75px),rgba(255,255,255,.7) calc(50% + .75px),transparent calc(50% + .75px));}
.s5{background-image:linear-gradient(90deg,transparent calc(20% - .75px),rgba(255,255,255,.7) calc(20% - .75px),rgba(255,255,255,.7) calc(20% + .75px),transparent calc(20% + .75px),transparent calc(40% - .75px),rgba(255,255,255,.7) calc(40% - .75px),rgba(255,255,255,.7) calc(40% + .75px),transparent calc(40% + .75px),transparent calc(60% - .75px),rgba(255,255,255,.7) calc(60% - .75px),rgba(255,255,255,.7) calc(60% + .75px),transparent calc(60% + .75px),transparent calc(80% - .75px),rgba(255,255,255,.7) calc(80% - .75px),rgba(255,255,255,.7) calc(80% + .75px),transparent calc(80% + .75px));}

/* ── VIEWPORT ── */
/* flex:1 hace que ocupe todo el espacio horizontal restante entre los sidebars */
#vp{
  flex:1;min-width:0;min-height:0;
  position:relative;
  background:#2d8a47;
  overflow:hidden;
  touch-action:none;
  padding:0;margin:0;
  line-height:0; /* evita espacio inline entre elementos block */
}
:fullscreen #vp{ background:#000; }
:-webkit-full-screen #vp{ background:#000; }
:fullscreen #layout{ height:calc(100dvh - 50px); }

/* field-master: width/height fijados por JS, centrado por el flex de #vp */
#field-master{
  /* Pegado a todos los bordes del #vp — sin margen en ningún lado */
  position:absolute;
  inset:0;           /* top:0 right:0 bottom:0 left:0 */
  overflow:hidden;
  background:#2d8a47;
  background-size:100% 100%;
  background-repeat:no-repeat;
  transform-origin:0 0;
  will-change:transform;
}

/* Zoom HUD — flota sobre el campo */
#zoom-hud{
  position:absolute;bottom:12px;right:12px;z-index:90;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:rgba(13,17,23,0.80);backdrop-filter:blur(6px);
  border:1px solid var(--border);border-radius:8px;padding:6px 7px;
  font-family:'Barlow Condensed',sans-serif;pointer-events:auto;
}
.pan-arrows{
  display:grid;grid-template-columns:repeat(3,24px);grid-template-rows:repeat(3,24px);gap:2px;
}
.pan-arrows span{display:block;}
.zoom-row{display:flex;align-items:center;gap:4px;margin-top:2px;}
#zoom-hud button{
  background:var(--panel2);border:1px solid var(--border);color:var(--text);
  width:24px;height:24px;border-radius:5px;cursor:pointer;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0;transition:background .12s;
}
#zoom-hud button:hover{background:var(--accent);border-color:var(--accent);color:#000;}
#zoom-hud #zoom-label{font-size:12px;font-weight:700;color:var(--text);min-width:38px;text-align:center;letter-spacing:.03em;}
#zoom-hud #btn-zoom-toggle{width:20px;height:20px;font-size:10px;opacity:.6;margin-bottom:2px;align-self:flex-end;}
#zoom-hud.hud-collapsed .pan-arrows,
#zoom-hud.hud-collapsed .zoom-row{display:none;}
#zoom-hud.hud-collapsed{padding:4px 5px;gap:0;}
#zoom-hud.hud-collapsed #btn-zoom-toggle{margin-bottom:0;opacity:.8;font-size:14px;}
/* En pantalla completa, sin sombra */
:fullscreen #field-master{ box-shadow:none; }
:-webkit-full-screen #field-master{ box-shadow:none; }

/* SVG de fondo del campo */
#field-bg{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;overflow:visible;
}
/* SVG de objetos (flechas, etc.) — por encima de zonas (z:15) */
#svg-layer{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:16;pointer-events:none;overflow:visible;
}
/* Capa de red de pases — bajo jugadores (z:22) pero sobre material (z:20) */
#sys-layer{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:21;pointer-events:none;overflow:visible;
}
.v-el{pointer-events:none;}
.vec-hit{pointer-events:auto;cursor:pointer;touch-action:none;}

/* ── OBJETOS EN CAMPO ── */
.object{position:absolute;background:transparent;border:none;outline:none;pointer-events:auto;cursor:grab;touch-action:none;}
.object:active{cursor:grabbing;}

/* Reemplazo: Borde trazado con drop-shadow múltiple en lugar de glow */
.object.sel {
  filter: drop-shadow(1.5px 0 0 #f1c40f) drop-shadow(-1.5px 0 0 #f1c40f) drop-shadow(0 1.5px 0 #f1c40f) drop-shadow(0 -1.5px 0 #f1c40f);
  box-shadow: none;
}

.ball-obj{font-size:24px;cursor:grab;}

/* Material (Conservamos las CSS de valla y peso que aún no son SVG) */
.valla-obj{width:48px;height:27px;border:4px solid #e74c3c;border-bottom:none;border-radius:5px 5px 0 0;}
.weight-obj{width:30px;height:19px;background:linear-gradient(180deg,#bdc3c7,#7f8c8d);border-radius:4px;position:relative;box-shadow:0 2px 4px rgba(0,0,0,.4);}
.weight-obj::before{content:'kg';position:absolute;top:3px;left:50%;transform:translateX(-50%);font-size:6px;font-weight:800;color:#2c3e50;}
.weight-obj::after{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:6px;height:5px;background:#7f8c8d;border-radius:2px 2px 0 0;}

/* Camiseta SVG */
.shirt-svg{display:block;overflow:visible;background:transparent;cursor:grab;pointer-events:auto;touch-action:none;}

/* Zonas */
.zone-obj{position:absolute;z-index:15;border:2px solid;pointer-events:auto;cursor:move;touch-action:none;}
.zone-obj.sel{outline:2px solid var(--warn);outline-offset:1px;}
.zone-obj.locked{cursor:pointer;opacity:.75;pointer-events:auto;}
.zone-sh{position:absolute;bottom:-7px;right:-7px;width:18px;height:18px;background:var(--warn);border-radius:3px;cursor:se-resize;display:flex;align-items:center;justify-content:center;font-size:11px;color:#000;pointer-events:auto;touch-action:none;}
.zone-lock{position:absolute;top:3px;right:4px;font-size:11px;pointer-events:none;opacity:.7;}

/* Nodos de control */
.node{position:absolute;width:40px;height:40px;z-index:60;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:crosshair;touch-action:none;}
.node-in{width:12px;height:12px;background:#fff;border:2.5px solid var(--accent);border-radius:50%;box-shadow:0 0 6px rgba(0,0,0,.5);}
.node.ctrl .node-in{background:#00d2ff;border-color:#00d2ff;}

/* ── SIDEBAR DERECHO ── */
.irow{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:12px;color:var(--muted);}
.irow input[type=color]{width:32px;height:24px;border:1px solid var(--border);border-radius:4px;padding:1px;background:var(--panel2);cursor:pointer;}
.tog{position:relative;width:35px;height:19px;flex-shrink:0;}
.tog input{opacity:0;width:0;height:0;}
.tslider{position:absolute;inset:0;background:#30363d;border-radius:20px;cursor:pointer;transition:.2s;}
.tslider::before{content:'';position:absolute;height:13px;width:13px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.tog input:checked+.tslider{background:var(--accent);}
.tog input:checked+.tslider::before{transform:translateX(16px);}
.spd{display:flex;align-items:center;gap:5px;}
.spd span{font-size:15px;}
.spd input[type=range]{flex:1;height:4px;-webkit-appearance:none;background:var(--border);border-radius:4px;cursor:pointer;}
.spd input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);}
.teq{display:flex;flex-direction:column;gap:5px;}
.tr{display:flex;align-items:center;gap:5px;background:var(--panel2);border-radius:var(--r);padding:5px 6px;}
.tr span{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;flex:1;}
.tsw{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;}
.tr input[type=color]{width:28px;height:22px;border:1px solid var(--border);border-radius:4px;padding:1px;background:var(--panel2);cursor:pointer;}
.sel{width:100%;background:var(--panel2);color:var(--text);border:1px solid var(--border);padding:7px 8px;border-radius:var(--r);font-size:13px;cursor:pointer;}
.sel:hover{border-color:var(--accent);}

/* ── BOTONES ── */
.btn{background:var(--panel2);color:var(--text);border:1px solid var(--border);padding:7px 9px;border-radius:var(--r);cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:.4px;transition:all .12s;white-space:nowrap;}
.btn:hover{border-color:var(--accent);background:#263040;}
.btn:active{transform:scale(.94);}
.bi{padding:7px 8px;font-size:13px;}
.ba{background:var(--accent);border-color:var(--accent);color:#fff;}
.ba:hover{background:#48b562;}
.bu{background:#252d38;border-color:#3a4455;}
.bp{background:var(--accent);border-color:var(--accent);color:#fff;}
.bs{background:#27ae60;border-color:#27ae60;color:#fff;}
.bm{background:#8e44ad;border-color:#8e44ad;color:#fff;}
.bm:hover{background:#9b59b6;}
.bd{background:var(--danger);border-color:var(--danger);color:#fff;}
.bd:hover{background:#c0392b;}
.w100{width:100%;}
hr{border:none;border-top:1px solid var(--border);margin:10px 0;}

/* ── MODALES Y BIBLIOTECA ── */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:5000;backdrop-filter:blur(8px);}
.modal.open{display:flex;}
.mc{background:var(--panel);padding:24px 20px;border-radius:14px;border:1px solid var(--border);width:90%;max-width:400px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.6);max-height:90dvh;overflow-y:auto;}
.mc h3{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;margin:0 0 4px;}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mh h3{margin:0;}
#lib-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:50vh;overflow-y:auto;padding:2px;margin-top:10px;}
.lcard{background:var(--panel2);border:1px solid var(--border);border-radius:var(--r);padding:12px 8px;cursor:pointer;text-align:center;transition:border-color .12s;}
.lcard:hover{border-color:var(--accent);}
.licon{font-size:22px;margin-bottom:4px;}
.lname{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;}
.ldesc{font-size:9px;color:var(--muted);margin-top:2px;}
.pbar{background:var(--border);border-radius:20px;height:5px;overflow:hidden;}
#pbar-fill{height:100%;background:var(--accent);border-radius:20px;width:0%;transition:width .2s;}
.pos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;}
.pos-btn{background:var(--panel2);border:1px solid var(--border);border-radius:3px;color:var(--muted);font-size:9px;font-weight:700;padding:5px 2px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;letter-spacing:.02em;transition:background .1s,border-color .1s,color .1s;}
.pos-btn:hover{border-color:var(--accent);color:var(--fg);}
.pos-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.form-slot{border:2px solid var(--border);border-radius:var(--r);padding:8px 10px;cursor:pointer;transition:border-color .15s;}
.form-slot.active{border-color:var(--accent);}
.form-slot-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.form-slot-name{font-size:11px;color:var(--fg);margin-top:6px;min-height:14px;font-style:italic;}
.fteam-row{display:flex;gap:4px;}
.fteam-btn{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:3px;color:var(--muted);font-size:11px;font-weight:700;padding:4px 2px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;transition:all .12s;}
.fteam-btn:hover{border-color:var(--accent);color:var(--fg);}
.fteam-btn.active{background:var(--accent);border-color:var(--accent);color:#000;}
.form-section{margin-bottom:14px;}
.form-section-hdr{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.form-section-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px;}
.form-del-btn{position:absolute;top:2px;right:2px;background:none;border:none;color:var(--muted);font-size:10px;cursor:pointer;padding:2px 4px;line-height:1;border-radius:3px;}
.help-sec{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.help-sec:last-of-type{border-bottom:none;}
.help-hdr{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.help-sec p{font-size:12px;color:var(--muted);line-height:1.55;margin:0;}
.help-contact{background:var(--panel2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;font-size:12px;line-height:1.9;margin-top:4px;}
.pdf-type-btn{flex:1;background:var(--panel2);border:1px solid var(--border);border-radius:var(--r);color:var(--muted);font-size:10px;font-weight:700;padding:7px 4px;cursor:pointer;transition:all .12s;font-family:'Barlow Condensed',sans-serif;letter-spacing:.02em;}
.pdf-type-btn.active{background:var(--accent);border-color:var(--accent);color:#000;}
.pdf-frow{margin-bottom:8px;}
.pdf-lbl{display:block;font-size:11px;color:var(--muted);margin-bottom:3px;}
.pdf-ta{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--border);color:#fff;border-radius:var(--r);padding:6px 8px;font-size:11px;font-family:inherit;resize:vertical;line-height:1.4;}
.form-del-btn:hover{color:#e63946;}

/* Estilos para la biblioteca personal */
.lib-warning {
  background: #0d2d1a;
  color: #7ec8a0;
  padding: 10px;
  border-radius: 7px;
  font-size: 11px;
  margin-bottom: 8px;
  text-align: left;
  border: 1px solid #3d9e56;
  grid-column: 1 / -1;
}
.local-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel2);
  padding: 10px;
  margin-bottom: 5px;
  border-radius: var(--r);
  border: 1px solid var(--border);
}
.btn-del {
  background: var(--danger);
  padding: 4px 8px;
  font-size: 10px;
}
.lib-cat-hdr{color:var(--muted);margin-bottom:4px;user-select:none;transition:color .12s;}
.lib-cat-hdr:hover{color:#fff;}
.lib-cat-count{background:var(--border);border-radius:8px;padding:1px 6px;font-size:10px;font-weight:700;}

/* ── MOBILE ── */
@media(max-width:700px){
  #right{display:none;}
  #left{width:56px;}
  #topbar{padding:0 5px;gap:3px;height:46px;}
  .btn{padding:5px 6px;font-size:10px;}
  .logo{font-size:14px;}
  #step-label{font-size:15px;min-width:38px;}
  .tool{width:50px;height:44px;}
  .ti{font-size:15px;}
  .tl{font-size:7px;}
}

/* ── TEXTO EN CAMPO ── */
.txt-obj{
  position:absolute;
  display:inline-block;
  pointer-events:auto;
  cursor:grab;
  touch-action:none;
  background:transparent;
  white-space:nowrap;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  user-select:none;
  overflow:visible;
  z-index: 100 !important;
}

/* txt-sh — handle de escala para texto */
.txt-sh{pointer-events:auto;cursor:se-resize;touch-action:none;z-index: 110 !important;}

/* ── TOAST ── */
#toast{
  position:fixed;bottom:70px;left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--panel2);color:var(--text);
  padding:9px 20px;border-radius:24px;
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600;
  z-index:9999;pointer-events:none;
  opacity:0;transition:opacity .22s,transform .22s;
  border:1px solid var(--border);
  white-space:nowrap;
}
#toast.t-show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.t-ok {border-left:3px solid var(--accent);}
#toast.t-warn{border-left:3px solid var(--warn);}
#toast.t-err {border-left:3px solid var(--danger);}

/* ── INDICADOR AUTO-GUARDADO ── */
.save-ind{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  color:var(--accent);letter-spacing:.04em;padding:3px 7px;
  border-radius:10px;background:rgba(61,158,86,.12);
  opacity:0;transition:opacity .3s;pointer-events:none;
  white-space:nowrap;
}
.save-ind.visible{opacity:1;}

/* ---- Modelo de Juego ---- */
.modelo-tab{padding:6px 10px;font-size:11px;font-weight:700;border-radius:6px;border:1px solid var(--border);background:var(--panel2);color:var(--muted);cursor:pointer;white-space:nowrap;transition:.15s;flex-shrink:0;}
.modelo-tab.active,.modelo-tab:hover{background:var(--accent);color:#000;border-color:var(--accent);}
.modelo-principio{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px;}
.modelo-p-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.modelo-p-num{font-size:10px;font-weight:800;color:var(--accent);min-width:22px;font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px;flex-shrink:0;}
.modelo-p-titulo{flex:1;font-size:13px;font-weight:600;color:var(--text);outline:none;border-bottom:1px solid transparent;padding:2px 0;min-width:0;}
.modelo-p-titulo:focus{border-bottom-color:var(--accent);}
.modelo-subs{margin-left:22px;margin-bottom:2px;}
.modelo-sub{display:flex;align-items:flex-start;gap:6px;margin-bottom:4px;}
.modelo-sub-dot{font-size:11px;color:var(--muted);min-width:16px;padding-top:2px;flex-shrink:0;}
.modelo-sub-texto{flex:1;font-size:12px;color:var(--muted);outline:none;border-bottom:1px solid transparent;padding:2px 0;line-height:1.4;min-width:0;}
.modelo-sub-texto:focus{border-bottom-color:var(--accent);color:var(--text);}
[contenteditable][data-placeholder]:empty::before{content:attr(data-placeholder);color:var(--muted);opacity:.4;pointer-events:none;}

/* ---- Sesión de Entrenamiento ---- */
.sn-fase{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px;}
.sn-fase-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.sn-fase-lbl{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.3px;}
.sn-area{background:var(--panel3);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:12px;color:var(--text);outline:none;width:100%;box-sizing:border-box;line-height:1.5;}
.sn-area:focus{border-color:var(--accent);}
[contenteditable].sn-area[data-placeholder]:empty::before{content:attr(data-placeholder);color:var(--muted);opacity:.4;pointer-events:none;}

/* ---- Mis Archivos ---- */
.arch-tab.active{background:var(--accent);color:#000;border-color:var(--accent);}
.arch-item{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;background:var(--panel2);}
.arch-nombre{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.arch-meta{font-size:11px;color:var(--muted);margin-top:2px;}

/* ── Selectores de objetivos de sesión ── */
.sn-obj-sec{margin-bottom:5px;}
.sn-obj-hdr{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.4px;cursor:pointer;padding:5px 8px;border-radius:6px;background:var(--panel3);border:1px solid var(--border);user-select:none;transition:background .15s;}
.sn-obj-hdr:hover{background:var(--panel2);}
.sn-obj-hdr-active{color:var(--accent);}
.sn-obj-cnt{margin-left:auto;background:var(--panel);border-radius:8px;padding:1px 7px;font-size:10px;color:var(--text);font-weight:700;}
.sn-obj-arrow{font-size:9px;opacity:.6;}
.sn-obj-chips{display:flex;flex-wrap:wrap;gap:4px;padding:6px 4px 2px;}
.sn-obj-sub{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.6px;width:100%;margin:4px 0 2px 2px;opacity:.7;}
.sn-obj-chip{font-size:10px;padding:3px 9px;border-radius:10px;border:1px solid var(--border);background:var(--panel3);color:var(--text);cursor:pointer;line-height:1.5;transition:background .12s,color .12s,border-color .12s;white-space:nowrap;width:auto;flex:0 0 auto;}
.sn-obj-chip:hover{border-color:var(--accent);color:var(--accent);}
.sn-obj-chip.sel{background:var(--accent);color:#000;border-color:var(--accent);font-weight:700;}
.sn-obj-chip.dis{opacity:.3;cursor:not-allowed;}
.sn-obj-chip.dis:hover{border-color:var(--border);color:var(--text);}
.sn-obj-chip.impl{border:1.5px dashed var(--accent);color:var(--accent);background:transparent;}
.sn-obj-chip.impl:hover{background:rgba(0,150,80,.1);}
.sn-obj-bonus{margin-left:3px;color:#4caf50;font-size:9px;font-weight:800;}