.cgp-tb-details{margin:22px 0}.cgp-tb-details>div:first-child{display:flex;justify-content:space-between;gap:16px;align-items:center}.cgp-tb-app{display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:18px;align-items:start}.cgp-tb-palette,.cgp-tb-properties,.cgp-tb-workspace{background:#fff;border:1px solid #dce3ed;border-radius:22px;padding:16px;box-shadow:0 10px 30px rgba(15,23,42,.05)}.cgp-tb-palette h4,.cgp-tb-properties h4{margin:0 0 12px}.cgp-tb-tools{display:grid;gap:8px;margin-bottom:18px}.cgp-tb-tools button,.cgp-tb-toolbar button{border:1px solid #d8e1ee;background:#fff;color:#173b75;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer;text-align:left}.cgp-tb-tools button:hover,.cgp-tb-toolbar button:hover{background:#eef3fb}.cgp-tb-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.cgp-tb-stage-wrap{overflow:auto;background:#eef3fb;border-radius:18px;padding:18px;min-height:650px}.cgp-tb-stage{position:relative;margin:auto;background:linear-gradient(180deg,#2d9b4a,#277d3d);border:4px solid rgba(255,255,255,.65);box-shadow:0 14px 30px rgba(15,23,42,.18);transform-origin:center center;transition:.2s ease;overflow:hidden}.cgp-tb-stage.orientation-vertical{width:min(760px,100%);aspect-ratio:2/3}.cgp-tb-stage.orientation-horizontal{width:min(1000px,100%);aspect-ratio:3/2}.cgp-tb-field-lines,.cgp-tb-field-lines:before,.cgp-tb-field-lines:after{content:"";position:absolute;pointer-events:none}.cgp-tb-field-lines{inset:0;border:3px solid rgba(255,255,255,.48)}.orientation-vertical .cgp-tb-field-lines:before{left:50%;top:0;bottom:0;border-left:3px solid rgba(255,255,255,.48)}.orientation-vertical .cgp-tb-field-lines:after{left:50%;top:50%;width:120px;height:120px;border:3px solid rgba(255,255,255,.48);border-radius:50%;transform:translate(-50%,-50%)}.orientation-horizontal .cgp-tb-field-lines:before{top:50%;left:0;right:0;border-top:3px solid rgba(255,255,255,.48)}.orientation-horizontal .cgp-tb-field-lines:after{left:50%;top:50%;width:120px;height:120px;border:3px solid rgba(255,255,255,.48);border-radius:50%;transform:translate(-50%,-50%)}.cgp-tb-svg,.cgp-tb-objects{position:absolute;inset:0;width:100%;height:100%}.cgp-tb-svg{z-index:2}.cgp-tb-objects{z-index:3}.cgp-tb-object{position:absolute;transform:translate(-50%,-50%);user-select:none;cursor:grab}.cgp-tb-object.is-selected{outline:3px solid #fff;outline-offset:3px}.cgp-tb-object.is-locked{cursor:not-allowed;filter:saturate(.65)}.cgp-tb-object.type-player-own,.cgp-tb-object.type-player-rival{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--obj-color);color:#fff;border:3px solid rgba(255,255,255,.85);box-shadow:0 5px 12px rgba(0,0,0,.24)}.cgp-tb-object.type-player-own small,.cgp-tb-object.type-player-rival small{position:absolute;top:56px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.95);color:#173b75;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap}.cgp-tb-object.type-ball{font-size:32px}.cgp-tb-object.type-cone{font-size:0;width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;border-bottom:34px solid var(--obj-color)}.cgp-tb-object.type-zone{width:120px;height:80px;background:color-mix(in srgb,var(--obj-color) 24%, transparent);border:3px dashed var(--obj-color);display:grid;place-items:center;color:#fff;font-weight:800}.cgp-tb-object.type-text{font-weight:900;font-size:18px;color:var(--obj-color);text-shadow:0 1px 2px rgba(0,0,0,.4)}.cgp-tb-properties label{display:grid;gap:6px;margin-bottom:12px;font-size:12px;font-weight:800;color:#64748b}.cgp-tb-properties input[type=text],.cgp-tb-properties input:not([type]){width:100%}.cgp-tb-legend{display:grid;gap:8px;margin-top:18px;font-size:12px;color:#64748b}.cgp-tb-legend span{display:flex;align-items:center;gap:8px}.cgp-tb-legend i{width:14px;height:14px;border-radius:50%;display:inline-block}.cgp-tb-legend .own{background:#213ba2}.cgp-tb-legend .rival{background:#c24141}.cgp-tb-legend .locked{background:#64748b}.cgp-lineup-open-board{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;background:#7c3aed;color:#fff!important;text-decoration:none;font-weight:800}
@media(max-width:1250px){.cgp-tb-app{grid-template-columns:190px minmax(0,1fr)}.cgp-tb-properties{grid-column:1/-1}}
@media(max-width:850px){.cgp-tb-app{grid-template-columns:1fr}.cgp-tb-palette,.cgp-tb-properties{grid-column:auto}.cgp-tb-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.cgp-tb-stage-wrap{min-height:520px;padding:10px}.cgp-tb-details>div:first-child{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.cgp-tb-tools{grid-template-columns:1fr}.cgp-tb-toolbar button{font-size:12px;padding:8px 10px}.cgp-tb-stage-wrap{min-height:430px}.cgp-tb-object.type-player-own,.cgp-tb-object.type-player-rival{width:44px;height:44px}.cgp-tb-object.type-player-own small,.cgp-tb-object.type-player-rival small{top:48px}}

/* v0.5.3.3.2.1 · Campo táctico ajustado al espacio disponible */
.cgp-tb-workspace{min-width:0}
.cgp-tb-stage-wrap{
  min-height:0!important;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
  padding:14px;
}
.cgp-tb-stage.orientation-horizontal{
  width:100%!important;
  max-width:none!important;
  aspect-ratio:3/2;
}
.cgp-tb-stage.orientation-vertical{
  width:min(760px,100%)!important;
  max-width:100%!important;
  aspect-ratio:2/3;
}
@media(max-width:850px){
  .cgp-tb-stage-wrap{min-height:0!important;padding:8px}
}
@media(max-width:560px){
  .cgp-tb-stage-wrap{min-height:0!important;padding:6px}
}


/* v0.5.3.3.2.2 · Ajuste real del lienzo y eliminación del hueco inferior */
.cgp-tb-stage-wrap{display:block!important;min-height:0!important;height:auto!important;overflow:auto!important;padding:12px!important}
.cgp-tb-stage-shell{position:relative;margin:0 auto;flex:0 0 auto}
.cgp-tb-stage{margin:0!important;max-width:none!important;aspect-ratio:auto!important}
.cgp-tb-stage.orientation-horizontal,.cgp-tb-stage.orientation-vertical{max-width:none!important;aspect-ratio:auto!important}
@media(max-width:850px){.cgp-tb-stage-wrap{padding:8px!important}}
@media(max-width:560px){.cgp-tb-stage-wrap{padding:6px!important}}

/* v0.5.3.3.2.3 · Campo completo real en horizontal y vertical */
.cgp-tb-app{grid-template-columns:190px minmax(0,1fr) 230px;gap:14px}
.cgp-tb-palette,.cgp-tb-properties,.cgp-tb-workspace{padding:14px}
.cgp-tb-stage-wrap{padding:10px!important;background:#eef3fb;border-radius:18px;overflow:auto!important}
.cgp-tb-stage{background:repeating-linear-gradient(90deg,#2f9748 0,#2f9748 9%,#329d4c 9%,#329d4c 18%);border:0!important;box-shadow:0 12px 26px rgba(15,23,42,.18);overflow:visible!important}
.cgp-tb-field-lines{inset:12px!important;border:3px solid rgba(255,255,255,.78)!important;border-radius:2px;z-index:1;pointer-events:none}
.cgp-tb-field-lines:before,.cgp-tb-field-lines:after{display:none!important}
.cgp-tb-field-lines span{position:absolute;display:block;box-sizing:border-box}
.cgp-tb-field-lines .tb-halfway{background:rgba(255,255,255,.78)}
.cgp-tb-field-lines .tb-center-circle{border:3px solid rgba(255,255,255,.78);border-radius:50%}
.cgp-tb-field-lines .tb-center-dot,.cgp-tb-field-lines .tb-spot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.92)}
.cgp-tb-field-lines .tb-penalty,.cgp-tb-field-lines .tb-goalbox{border:3px solid rgba(255,255,255,.78)}
.cgp-tb-field-lines .tb-goal{border:3px solid rgba(255,255,255,.72);background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 3px,transparent 3px 7px)}
.cgp-tb-field-lines .tb-arc{border:3px solid rgba(255,255,255,.78);border-radius:50%}
.cgp-tb-field-lines .tb-corner{width:24px;height:24px;border:3px solid rgba(255,255,255,.78);border-radius:50%}

/* Horizontal = campo apaisado, porterías izquierda/derecha */
.orientation-horizontal .tb-halfway{left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%)}
.orientation-horizontal .tb-center-circle{width:18%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%)}
.orientation-horizontal .tb-center-dot{left:50%;top:50%;transform:translate(-50%,-50%)}
.orientation-horizontal .tb-penalty{top:20%;bottom:20%;width:16%}
.orientation-horizontal .tb-penalty-a{left:-3px;border-left:0}
.orientation-horizontal .tb-penalty-b{right:-3px;border-right:0}
.orientation-horizontal .tb-goalbox{top:34%;bottom:34%;width:7%}
.orientation-horizontal .tb-goalbox-a{left:-3px;border-left:0}
.orientation-horizontal .tb-goalbox-b{right:-3px;border-right:0}
.orientation-horizontal .tb-spot-a{left:11%;top:50%;transform:translate(-50%,-50%)}
.orientation-horizontal .tb-spot-b{right:11%;top:50%;transform:translate(50%,-50%)}
.orientation-horizontal .tb-arc{width:11%;aspect-ratio:1;top:50%;transform:translateY(-50%)}
.orientation-horizontal .tb-arc-a{left:10%;clip-path:inset(0 0 0 50%)}
.orientation-horizontal .tb-arc-b{right:10%;clip-path:inset(0 50% 0 0)}
.orientation-horizontal .tb-goal{top:42%;bottom:42%;width:2.8%}
.orientation-horizontal .tb-goal-a{left:-2.8%}
.orientation-horizontal .tb-goal-b{right:-2.8%}
.orientation-horizontal .tb-corner-1{left:-12px;top:-12px;clip-path:inset(50% 0 0 50%)}
.orientation-horizontal .tb-corner-2{right:-12px;top:-12px;clip-path:inset(50% 50% 0 0)}
.orientation-horizontal .tb-corner-3{left:-12px;bottom:-12px;clip-path:inset(0 0 50% 50%)}
.orientation-horizontal .tb-corner-4{right:-12px;bottom:-12px;clip-path:inset(0 50% 50% 0)}

/* Vertical = campo retrato, porterías arriba/abajo */
.orientation-vertical .tb-halfway{left:0;right:0;top:50%;height:3px;transform:translateY(-50%)}
.orientation-vertical .tb-center-circle{height:18%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%)}
.orientation-vertical .tb-center-dot{left:50%;top:50%;transform:translate(-50%,-50%)}
.orientation-vertical .tb-penalty{left:20%;right:20%;height:16%}
.orientation-vertical .tb-penalty-a{top:-3px;border-top:0}
.orientation-vertical .tb-penalty-b{bottom:-3px;border-bottom:0}
.orientation-vertical .tb-goalbox{left:34%;right:34%;height:7%}
.orientation-vertical .tb-goalbox-a{top:-3px;border-top:0}
.orientation-vertical .tb-goalbox-b{bottom:-3px;border-bottom:0}
.orientation-vertical .tb-spot-a{top:11%;left:50%;transform:translate(-50%,-50%)}
.orientation-vertical .tb-spot-b{bottom:11%;left:50%;transform:translate(-50%,50%)}
.orientation-vertical .tb-arc{height:11%;aspect-ratio:1;left:50%;transform:translateX(-50%)}
.orientation-vertical .tb-arc-a{top:10%;clip-path:inset(50% 0 0 0)}
.orientation-vertical .tb-arc-b{bottom:10%;clip-path:inset(0 0 50% 0)}
.orientation-vertical .tb-goal{left:42%;right:42%;height:2.8%}
.orientation-vertical .tb-goal-a{top:-2.8%}
.orientation-vertical .tb-goal-b{bottom:-2.8%}
.orientation-vertical .tb-corner-1{left:-12px;top:-12px;clip-path:inset(50% 0 0 50%)}
.orientation-vertical .tb-corner-2{right:-12px;top:-12px;clip-path:inset(50% 50% 0 0)}
.orientation-vertical .tb-corner-3{left:-12px;bottom:-12px;clip-path:inset(0 0 50% 50%)}
.orientation-vertical .tb-corner-4{right:-12px;bottom:-12px;clip-path:inset(0 50% 50% 0)}

.cgp-tb-svg,.cgp-tb-objects{z-index:2}.cgp-tb-objects{z-index:3}
@media(max-width:1250px){.cgp-tb-app{grid-template-columns:175px minmax(0,1fr) 215px;gap:10px}.cgp-tb-palette,.cgp-tb-properties,.cgp-tb-workspace{padding:10px}}
@media(max-width:980px){.cgp-tb-app{grid-template-columns:165px minmax(0,1fr)}.cgp-tb-properties{grid-column:1/-1}}
@media(max-width:850px){.cgp-tb-app{grid-template-columns:1fr}.cgp-tb-palette,.cgp-tb-properties{grid-column:auto}.cgp-tb-stage-wrap{padding:6px!important}}

/* v0.5.3.3.2.7 · Interacción y exportación coherentes */
.cgp-tb-object.type-zone{min-width:40px;min-height:35px;box-sizing:border-box}
.cgp-tb-properties output{display:block;margin-top:4px;color:#173b75;font-weight:800}
.cgp-tb-properties input[type=range]{width:100%}
.cgp-tb-range-row{display:grid;grid-template-columns:minmax(0,1fr) 54px;gap:10px;align-items:center}
.cgp-tb-range-row output{font-weight:800;color:#173b75;text-align:right}
.cgp-tb-prop-help{font-size:12px;line-height:1.45;color:#64748b;background:#eef3fb;border-radius:12px;padding:10px;margin:-2px 0 12px}
.cgp-tb-check{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px!important}
.cgp-tb-stage,.cgp-tb-stage *{touch-action:none}
.cgp-tb-stage-shell{margin:auto;position:relative}
.cgp-tb-workspace:fullscreen{background:#eef3fb;padding:18px;overflow:auto}
.cgp-tb-workspace:fullscreen .cgp-tb-stage-wrap{min-height:calc(100vh - 100px)}
.cgp-tb-svg{pointer-events:none!important}
.cgp-tb-objects{pointer-events:none!important;z-index:4!important}
.cgp-tb-object,.cgp-tb-vector-object{pointer-events:auto;touch-action:none}
.cgp-tb-vector-object{position:absolute;height:34px;transform-origin:center center;cursor:move;user-select:none;z-index:4}
.cgp-tb-vector-object.is-locked{cursor:not-allowed;opacity:.72}
.tb-vector-hit-html{position:absolute;left:0;right:0;top:50%;height:30px;transform:translateY(-50%);background:transparent;cursor:move}
.tb-vector-shaft{position:absolute;left:0;right:0;top:50%;height:var(--vector-width,5px);transform:translateY(-50%);border-radius:999px;background:var(--vector-color,#ef4444);box-shadow:0 1px 2px rgba(0,0,0,.22);pointer-events:none}
.tb-vector-arrowhead{position:absolute;right:-2px;top:50%;width:0;height:0;border-top:calc(var(--vector-width,5px) * 1.5 + 7px) solid transparent;border-bottom:calc(var(--vector-width,5px) * 1.5 + 7px) solid transparent;border-left:calc(var(--vector-width,5px) * 2 + 13px) solid var(--vector-color,#ef4444);transform:translate(35%,-50%);pointer-events:none}
.tb-vector-handle-html{display:none;position:absolute;top:50%;width:22px;height:22px;padding:0;margin:0;border:3px solid #173b75;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 5px rgba(0,0,0,.35);cursor:crosshair;z-index:6;touch-action:none}
.tb-vector-handle-start{left:0}.tb-vector-handle-end{left:100%}
.cgp-tb-vector-object.is-selected .tb-vector-handle-html{display:block}
.cgp-tb-vector-object.is-selected .tb-vector-shaft{box-shadow:0 0 0 3px rgba(255,255,255,.8),0 2px 4px rgba(0,0,0,.3)}
@media(max-width:560px){.cgp-tb-vector-object{height:42px}.tb-vector-hit-html{height:40px}.tb-vector-handle-html{width:26px;height:26px}}