/* =============================================================
   GPS Builder — styles for the Fase 1 chart builder panel.
   Loaded only when gps_builder_enabled = true in club_gps_settings.
   Reuses GPS Analysis tokens (clavametrics.css) and existing
   .gp-c / .gp-grid / .size-toggle styles from GPS Analysis.html.
   ============================================================= */

/* ── page layout adjustment when panel is open ─────────────── */
body.gpb-open .gp-page { padding-right: 344px; transition: padding-right 220ms var(--cm-ease, ease); }

/* ── right panel ───────────────────────────────────────────── */
.es-panel {
  position: fixed; top: 56px; right: 0;
  width: 328px; height: calc(100vh - 56px);
  background: var(--cm-surface); border-left: 1px solid var(--cm-border);
  display: flex; flex-direction: column;
  z-index: 100; box-shadow: -4px 0 20px rgba(0,0,0,0.08);
  transform: translateX(100%);
  transition: transform 220ms var(--cm-ease, ease);
}
.es-panel.is-open { transform: none; }
.es-panel[hidden] { display: none; }

.es-p-h { padding: 13px 16px 0; flex-shrink: 0; }
.es-p-sel { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; }
.es-p-sel .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--cm-accent); border: 1px solid var(--cm-accent); color: var(--cm-fg-on-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.es-p-sel .ic .ti { font-size: 16px; }
.es-p-sel .tx { min-width: 0; }
.es-p-sel .tx .t { font: 600 13.5px/1.2 var(--cm-font-sans); color: var(--cm-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-p-sel .tx .s { font: 500 10.5px/1 var(--cm-font-mono); color: var(--cm-fg-muted); margin-top: 3px; }
.es-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--cm-border-soft); }
.es-tabs button { flex: 1; height: 34px; border: 0; background: transparent; color: var(--cm-fg-muted); font: 600 12px/1 var(--cm-font-sans); letter-spacing: .04em; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.es-tabs button .ti { font-size: 15px; }
.es-tabs button:hover { color: var(--cm-fg); }
.es-tabs button.is-on { color: var(--cm-accent); border-bottom-color: var(--cm-accent); }

.es-p-b { flex: 1; overflow-y: auto; }
.es-p-b > .pane { display: none; padding: 6px 0 24px; }
.es-p-b > .pane.is-on { display: block; }

.es-sec { padding: 14px 16px; border-bottom: 1px solid var(--cm-border-soft); }
.es-sec > .lab { display: flex; align-items: center; gap: 6px; font: 600 10px/1 var(--cm-font-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--cm-fg-faint); margin-bottom: 9px; }
.es-sec > .lab .req { color: var(--cm-accent); font-size: 12px; line-height: 0; }
.es-sec > .lab .hint { margin-left: auto; font: 500 10px/1 var(--cm-font-mono); color: var(--cm-fg-faint); text-transform: none; letter-spacing: 0; }

/* (Removed: classic Setup-pane CSS — .es-types/.es-tswatch (viz swatches), .es-fields/.es-field
   (metric chips), .es-aggchip, .es-add + gpbPulse. Those elements no longer exist; the D&D uses
   #gpbDDSeg + .bdd-* instead.) */

/* select controls */
.es-select { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px; border-radius: var(--cm-r-3); border: 1px solid var(--cm-border); background: var(--cm-bg-soft); cursor: pointer; font: 600 12.5px/1 var(--cm-font-sans); color: var(--cm-fg); width: 100%; }
.es-select:hover { border-color: var(--cm-border-strong); background: var(--cm-surface); }
.es-select .ti { font-size: 15px; color: var(--cm-fg-muted); }
.es-select .cv { margin-left: auto; color: var(--cm-fg-faint); font-size: 15px; }

/* segmented controls (scope / size) */
.es-seg { display: inline-flex; width: 100%; padding: 2px; border: 1px solid var(--cm-border); border-radius: var(--cm-r-3); background: var(--cm-bg-soft); }
.es-seg button { flex: 1; height: 30px; border: 0; background: transparent; color: var(--cm-fg-muted); font: 600 11.5px/1 var(--cm-font-sans); cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.es-seg button .ti { font-size: 14px; }
.es-seg button.is-on { background: var(--cm-surface); color: var(--cm-fg-strong); box-shadow: var(--cm-shadow-1); }

/* Collapsible title/subtitle format editors — compact by default, expand on click. */
.es-fmt { border: 1px solid var(--cm-border-soft); border-radius: var(--cm-r-3); margin-bottom: 6px; background: var(--cm-bg-soft); }
.es-fmt > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 8px 10px; font: 600 11px/1 var(--cm-font-sans); color: var(--cm-fg); user-select: none; }
.es-fmt > summary::-webkit-details-marker { display: none; }
.es-fmt .es-fmt-chev { font-size: 14px; color: var(--cm-fg-muted); transition: transform var(--cm-dur-1, .15s); }
.es-fmt[open] .es-fmt-chev { transform: rotate(90deg); }
.es-fmt .es-fmt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cm-accent); margin-left: auto; opacity: 0; transition: opacity var(--cm-dur-1, .15s); }
.es-fmt.has-fmt .es-fmt-dot { opacity: 1; }
.es-fmt .es-fmt-body { padding: 0 10px 10px; }

/* style pane */
.es-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.es-sw { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.es-sw.is-on { border-color: var(--cm-fg-strong); }
.es-sw.is-on::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 13px/1 var(--cm-font-sans); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.es-pal { display: flex; gap: 3px; cursor: pointer; padding: 4px; border-radius: 8px; border: 2px solid transparent; }
.es-pal.is-on { border-color: var(--cm-fg-strong); }
.es-pal i { width: 18px; height: 24px; border-radius: 4px; }
.es-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
/* Rows whose control is a full-width segmented picker stack the label above it so the
   100%-wide .es-seg never overlaps the label. */
.es-toggle.is-stack { flex-direction: column; align-items: stretch; gap: 6px; }
.es-toggle + .es-toggle { border-top: 1px solid var(--cm-border-soft); }
.es-toggle .tx { flex: 1; min-width: 0; }
.es-toggle .tx .t { font: 600 12.5px/1.2 var(--cm-font-sans); color: var(--cm-fg); }
.es-toggle .tx .s { font: 500 10.5px/1.3 var(--cm-font-sans); color: var(--cm-fg-muted); margin-top: 2px; }
.es-sw-t { width: 38px; height: 22px; border-radius: 999px; background: var(--cm-border-strong); border: 0; cursor: pointer; position: relative; flex-shrink: 0; transition: background var(--cm-dur-1, .15s); }
.es-sw-t::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--cm-shadow-1); transition: transform var(--cm-dur-1, .15s); }
.es-sw-t.is-on { background: var(--cm-accent); }
.es-sw-t.is-on::after { transform: translateX(16px); }
.es-input { width: 100%; height: 36px; padding: 0 11px; border-radius: var(--cm-r-3); border: 1px solid var(--cm-border); background: var(--cm-bg-soft); color: var(--cm-fg); font: var(--cm-body-sm); outline: none; }
.es-input:focus { border-color: var(--cm-accent); box-shadow: 0 0 0 3px var(--cm-focus-ring); background: var(--cm-surface); }

/* ── card states (draft / editing) ────────────────────────── */
.gp-grid.is-building .gp-c:not(.is-editing) { opacity: .52; filter: saturate(.85); transition: opacity var(--cm-dur-2, .2s), filter var(--cm-dur-2, .2s); }
.gp-grid.is-building .gp-c:not(.is-editing):hover { opacity: .78; }
.gp-c.is-editing { outline: 2px solid var(--cm-accent); outline-offset: 2px; box-shadow: var(--cm-shadow-3), 0 0 0 6px var(--cm-focus-ring); z-index: 5; }
.gp-c.is-editing::before { content: "Editing"; position: absolute; top: -11px; left: 12px; height: 20px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: var(--cm-accent); color: var(--cm-fg-on-accent); font: 600 10.5px/1 var(--cm-font-mono); z-index: 6; }
.gp-c.is-draft .gp-c-b { min-height: 200px; align-items: center; justify-content: center; }
.cb2-await { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; color: var(--cm-fg-muted); }
.cb2-await .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--cm-bg-soft); border: 1px solid var(--cm-border); display: flex; align-items: center; justify-content: center; color: var(--cm-fg-faint); }
.cb2-await .ic .ti { font-size: 22px; }
.cb2-await .t { font: 600 13.5px/1.2 var(--cm-font-sans); color: var(--cm-fg); }
.cb2-await .d { font: 500 11.5px/1.4 var(--cm-font-sans); color: var(--cm-fg-muted); max-width: 220px; }
.cb2-state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 14px; min-height: 160px; justify-content: center; }
.cb2-state .ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.cb2-state .ic .ti { font-size: 22px; }
.cb2-state.load .ic { background: var(--cm-bg-soft); border: 1px solid var(--cm-border); color: var(--cm-accent); }
.cb2-state.err  .ic { background: var(--cm-danger-bg); border: 1px solid var(--cm-danger-bd); color: var(--cm-danger); }
.cb2-state.empty .ic { background: var(--cm-warning-bg); border: 1px solid var(--cm-warning-bd, currentColor); color: var(--cm-warning); }
.cb2-state .t { font: 600 13px/1.2 var(--cm-font-sans); color: var(--cm-fg); }
.cb2-state .d { font: 500 11.5px/1.5 var(--cm-font-sans); color: var(--cm-fg-muted); max-width: 240px; }
.cb2-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--cm-border); border-top-color: var(--cm-accent); animation: gpbSpin .8s linear infinite; }
@keyframes gpbSpin { to { transform: rotate(360deg); } }

/* ── metric flyout ─────────────────────────────────────────── */
.es-fly { position: fixed; z-index: 180; width: 300px; max-height: 70vh; background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-r-4); box-shadow: var(--cm-shadow-pop); display: flex; flex-direction: column; opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 150ms var(--cm-ease, ease), transform 150ms var(--cm-ease, ease); }
.es-fly.is-open { opacity: 1; transform: none; pointer-events: auto; }
.es-fly-h { padding: 11px 13px 9px; border-bottom: 1px solid var(--cm-border-soft); }
.es-fly-h .row { display: flex; align-items: center; gap: 8px; }
.es-fly-h .t { font: 600 12.5px/1.2 var(--cm-font-sans); color: var(--cm-fg-strong); }
.es-fly-h .x { margin-left: auto; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--cm-border); background: transparent; color: var(--cm-fg-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.es-fly-h .x:hover { background: var(--cm-bg-soft); color: var(--cm-fg); }
.es-fly-search { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; margin-top: 9px; background: var(--cm-bg-soft); border: 1px solid var(--cm-border); border-radius: var(--cm-r-3); }
.es-fly-search:focus-within { border-color: var(--cm-accent); box-shadow: 0 0 0 3px var(--cm-focus-ring); background: var(--cm-surface); }
.es-fly-search .ti { font-size: 15px; color: var(--cm-fg-muted); }
.es-fly-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: var(--cm-body-sm); color: var(--cm-fg); }
.es-fly-b { flex: 1; overflow-y: auto; padding: 6px; }
.es-fly-grp { padding: 8px 8px 3px; font: 600 9.5px/1 var(--cm-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--cm-fg-faint); }
.es-fly-grp.cust { color: var(--cm-violet, #7C3AED); }
.es-fly-grp.dim  { color: var(--cm-info, #2563EB); }
.es-fly-grp.meas { border-top: 1px solid var(--cm-border-soft, #eef2f6); margin-top: 4px; padding-top: 10px; }
.es-fly-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px; padding: 8px; border-radius: var(--cm-r-3); border: 1px solid transparent; cursor: pointer; }
.es-fly-row:hover { background: var(--cm-bg-soft); }
.es-fly-row .ic { width: 26px; height: 26px; border-radius: 7px; background: var(--cm-bg-soft); border: 1px solid var(--cm-border); display: flex; align-items: center; justify-content: center; color: var(--cm-fg); }
.es-fly-row .ic .ti { font-size: 14px; }
.es-fly-row .nm .t { font: 600 12.5px/1.2 var(--cm-font-sans); color: var(--cm-fg-strong); }
.es-fly-row .nm .s { font: 500 10px/1 var(--cm-font-mono); color: var(--cm-fg-muted); margin-top: 2px; }
.es-fly-row .kind { font: 600 8.5px/1 var(--cm-font-mono); padding: 3px 5px; border-radius: 4px; }
.es-fly-row .kind.peak  { background: var(--cm-violet-bg, #f3f0ff); color: var(--cm-violet, #7C3AED); border: 1px solid var(--cm-violet-bd, #c4b5fd); }
.es-fly-row .kind.accum { background: var(--cm-neutral-bg, #f1f5f9); color: var(--cm-fg-muted); border: 1px solid var(--cm-border); }
.es-fly-row .kind.dim   { background: var(--cm-info-bg, #eff6ff); color: var(--cm-info, #2563EB); border: 1px solid var(--cm-info-bd, #bfdbfe); }
.es-fly-row.dim-row .ic { background: var(--cm-info-bg, #eff6ff); border-color: var(--cm-info-bd, #bfdbfe); color: var(--cm-info, #2563EB); }
.es-fly-row.is-on { background: var(--cm-accent-soft); border-color: var(--cm-accent); }
.es-fly-row.is-disabled { opacity: .4; cursor: not-allowed; }
.es-fly-row.is-disabled:hover { background: transparent; }
.es-fly-bk { position: fixed; inset: 0; z-index: 179; display: none; }
.es-fly-bk.is-on { display: block; }

/* ── popovers (range, compare, agg) ───────────────────────── */
.gpb-pop { position: fixed; z-index: 200; min-width: 240px; max-width: 340px; background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-r-4); box-shadow: var(--cm-shadow-pop); overflow: hidden; opacity: 0; transform: translateY(-6px) scale(.985); pointer-events: none; transform-origin: top left; transition: opacity 150ms var(--cm-ease, ease), transform 150ms var(--cm-ease, ease); }
.gpb-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.gpb-pop-bk { position: fixed; inset: 0; z-index: 199; background: transparent; display: none; }
.gpb-pop-bk.is-on { display: block; }
.rb-pop-h { padding: 11px 13px 8px; border-bottom: 1px solid var(--cm-border-soft); }
.rb-pop-h .t { font: 600 12.5px/1.2 var(--cm-font-sans); color: var(--cm-fg-strong); }
.rb-pop-h .s { font: 500 11px/1.4 var(--cm-font-sans); color: var(--cm-fg-muted); margin-top: 3px; }
.rb-pop-b { padding: 7px; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.rb-opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--cm-r-3); border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; width: 100%; }
.rb-opt:hover { background: var(--cm-bg-soft); }
.rb-opt .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--cm-bg-soft); border: 1px solid var(--cm-border); display: flex; align-items: center; justify-content: center; color: var(--cm-fg); flex-shrink: 0; }
.rb-opt .ic .ti { font-size: 16px; }
.rb-opt .tx .t { font: 600 13px/1.2 var(--cm-font-sans); color: var(--cm-fg-strong); }
.rb-opt .tx .d { font: 500 11px/1.3 var(--cm-font-sans); color: var(--cm-fg-muted); margin-top: 2px; }
.rb-opt .ck { color: var(--cm-accent); font-size: 16px; opacity: 0; }
.rb-opt.is-on { background: var(--cm-accent-soft); border-color: var(--cm-accent); }
.rb-opt.is-on .ic { background: var(--cm-accent); border-color: var(--cm-accent); color: var(--cm-fg-on-accent); }
.rb-opt.is-on .ck { opacity: 1; }
.rb-opt.is-disabled { opacity: .4; cursor: not-allowed; }
.rb-opt.is-disabled:hover { background: transparent; }
.rb-opt .tag { font: 600 9px/1 var(--cm-font-mono); padding: 3px 5px; border-radius: 4px; background: var(--cm-neutral-bg, #f1f5f9); color: var(--cm-fg-muted); border: 1px solid var(--cm-border); }
.rb-opt .tag.no { background: var(--cm-danger-bg); color: var(--cm-danger); border-color: var(--cm-danger-bd, currentColor); }
.rb-note { display: flex; gap: 7px; align-items: flex-start; padding: 9px 11px; margin: 2px 7px 7px; border-radius: var(--cm-r-3); background: var(--cm-bg-soft); border: 1px solid var(--cm-border-soft); font: 500 11px/1.5 var(--cm-font-sans); color: var(--cm-fg-muted); }
.rb-note .ti { font-size: 14px; color: var(--cm-accent); flex-shrink: 0; margin-top: 1px; }

/* ── CONFIG JSON drawer ────────────────────────────────────── */
.gpb-cfg-bk { position: fixed; inset: 0; z-index: 220; background: rgba(10,12,14,.42); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 200ms; }
.gpb-cfg-bk.is-on { opacity: 1; pointer-events: auto; }
.gpb-cfg-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; z-index: 221; background: var(--cm-surface); border-left: 1px solid var(--cm-border); box-shadow: var(--cm-shadow-3); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 260ms var(--cm-ease, ease); }
.gpb-cfg-drawer.is-on { transform: none; }
.cfg-h { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--cm-border); }
.cfg-h .ic { width: 32px; height: 32px; border-radius: 8px; background: var(--cm-fg-strong); color: var(--cm-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font: 700 13px/1 var(--cm-font-mono); }
.cfg-h .tx { flex: 1; min-width: 0; }
.cfg-h .tx .t { font: 600 15px/1.2 var(--cm-font-sans); color: var(--cm-fg-strong); }
.cfg-h .tx .s { font: 500 11.5px/1.3 var(--cm-font-sans); color: var(--cm-fg-muted); margin-top: 2px; }
.cfg-h .x { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--cm-border); background: transparent; color: var(--cm-fg-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cfg-h .x:hover { background: var(--cm-bg-soft); color: var(--cm-fg); }
.cfg-contract { display: flex; align-items: flex-start; gap: 9px; margin: 12px 16px 0; padding: 11px 13px; border-radius: var(--cm-r-3); background: var(--cm-accent-soft); border: 1px solid var(--cm-accent); font: 500 11.5px/1.5 var(--cm-font-sans); color: var(--cm-fg); }
.cfg-contract .ti { font-size: 16px; color: var(--cm-accent); flex-shrink: 0; margin-top: 1px; }
.cfg-body { flex: 1; overflow: auto; margin: 12px 0 0; }
.cfg-json { margin: 0; padding: 0 18px 18px; font: 500 12px/1.65 var(--cm-font-mono); color: var(--cm-fg); white-space: pre; tab-size: 2; }
.cfg-json .k { color: var(--cm-violet, #7C3AED); }
.cfg-json .s { color: var(--cm-success); }
.cfg-json .n { color: var(--cm-info); }
.cfg-json .b { color: var(--cm-warning); }
.cfg-json .p { color: var(--cm-fg-faint); }
.cfg-foot { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-top: 1px solid var(--cm-border); background: var(--cm-bg-soft); }
.cfg-foot .meta { font: 500 11px/1.3 var(--cm-font-mono); color: var(--cm-fg-muted); }
.cfg-foot .meta b { color: var(--cm-fg); }
.cfg-foot .sp { margin-left: auto; }

/* ── save toast ────────────────────────────────────────────── */
.gpb-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); z-index: 300; display: flex; align-items: center; gap: 11px; padding: 12px 16px 12px 13px; border-radius: var(--cm-r-4); background: var(--cm-fg-strong); color: var(--cm-bg); box-shadow: var(--cm-shadow-3); opacity: 0; pointer-events: none; transition: opacity 220ms var(--cm-ease, ease), transform 220ms var(--cm-ease, ease); max-width: 440px; }
.gpb-toast.is-on { opacity: 1; transform: translate(-50%,0); pointer-events: auto; }
.gpb-toast .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--cm-accent); color: var(--cm-fg-on-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gpb-toast .ic .ti { font-size: 17px; }
.gpb-toast .tx { min-width: 0; }
.gpb-toast .tx .t { font: 600 13px/1.2 var(--cm-font-sans); }
.gpb-toast .tx .s { font: 500 11px/1.4 var(--cm-font-sans); opacity: .78; margin-top: 2px; }
.gpb-toast .act { margin-left: 6px; height: 28px; padding: 0 11px; border-radius: 7px; border: 0; background: rgba(255,255,255,.16); color: #fff; font: 600 12px/1 var(--cm-font-sans); cursor: pointer; flex-shrink: 0; }
.gpb-toast .act:hover { background: rgba(255,255,255,.26); }

/* ── Fase 4: AI modal ──────────────────────────────────────── */

.gpai-bk { position: fixed; inset: 0; z-index: 350; background: rgba(10,12,14,.5); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 200ms; }
.gpai-bk.is-on { opacity: 1; pointer-events: auto; }

.gpai-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.98);
  z-index: 351; width: 520px; max-width: 94vw;
  background: var(--cm-surface); border: 1px solid var(--cm-border);
  border-radius: var(--cm-r-5); box-shadow: var(--cm-shadow-3);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none; transition: opacity 180ms var(--cm-ease, ease), transform 180ms var(--cm-ease, ease);
}
.gpai-modal:not([hidden]) { opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto; }
.gpai-modal[hidden] { display: none !important; }

.gpai-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--cm-border-soft); }
.gpai-h .t { font: 600 16px/1 var(--cm-font-sans); color: var(--cm-fg-strong); }
.gpai-h .badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--cm-accent-soft); color: var(--cm-accent); border: 1px solid var(--cm-accent); font: 600 10.5px/1 var(--cm-font-mono); }
.gpai-h .badge .ti { font-size: 12px; }
.gpai-h .x { margin-left: auto; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--cm-border); background: transparent; color: var(--cm-fg-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gpai-h .x:hover { background: var(--cm-bg-soft); color: var(--cm-fg); }

.gpai-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.gpai-prompt-wrap { position: relative; }
.gpai-prompt { width: 100%; resize: none; border: 1.5px solid var(--cm-border); border-radius: var(--cm-r-3); padding: 11px 13px; font: 500 13.5px/1.6 var(--cm-font-sans); color: var(--cm-fg); background: var(--cm-bg-soft); outline: none; }
.gpai-prompt:focus { border-color: var(--cm-accent); box-shadow: 0 0 0 3px var(--cm-focus-ring); background: var(--cm-surface); }
.gpai-prompt::placeholder { color: var(--cm-fg-faint); }

.gpai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gpai-chip { height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--cm-border); background: var(--cm-bg-soft); color: var(--cm-fg-muted); font: 500 12px/1 var(--cm-font-sans); cursor: pointer; white-space: nowrap; }
.gpai-chip:hover { border-color: var(--cm-accent); color: var(--cm-accent); background: var(--cm-accent-soft); }

/* thinking animation */
.gpai-think { display: none; flex-direction: column; gap: 8px; padding: 12px 0 4px; }
.gpai-body.is-thinking .gpai-think { display: flex; }
.gpai-body.is-thinking .gpai-prompt-wrap,
.gpai-body.is-thinking .gpai-chips { opacity: .35; pointer-events: none; }
.gpai-step { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 10px; border-radius: var(--cm-r-3); font: 500 12px/1 var(--cm-font-sans); color: var(--cm-fg-muted); }
.gpai-step .ti { font-size: 15px; }
.gpai-step.is-on { background: var(--cm-accent-soft); color: var(--cm-accent); }
.gpai-step.is-on .ti { animation: gpaiSpin .8s linear infinite; }
@keyframes gpaiSpin { to { transform: rotate(360deg); } }

.gpai-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--cm-border-soft); background: var(--cm-bg-soft); }
.gpai-foot .hint { display: flex; align-items: center; gap: 5px; font: 500 11px/1.3 var(--cm-font-sans); color: var(--cm-fg-faint); }
.gpai-foot .hint .ti { font-size: 13px; }
.gpai-foot.is-thinking .cm-btn { opacity: .45; pointer-events: none; }

/* "Ask AI" button accent */
.gpai-open-btn { color: var(--cm-accent) !important; }
.gpai-open-btn .ti { color: var(--cm-accent) !important; }

/* ── Fase 3: tab management ────────────────────────────────── */

/* kebab button inside each .gp-sec tab */
.gp-sec .gpt-kb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; border: 0;
  background: transparent; color: var(--cm-fg-faint); cursor: pointer;
  opacity: 0; transition: opacity 120ms; flex-shrink: 0; margin-left: 2px;
}
.gp-sec:hover .gpt-kb,
.gp-sec.is-on .gpt-kb { opacity: 1; }
.gpt-kb:hover { background: var(--cm-bg-soft); color: var(--cm-fg); }
.gpt-kb .ti { font-size: 13px; pointer-events: none; }

/* inline rename input inside a tab */
.gp-sec .gpt-rename {
  border: 0; background: var(--cm-surface); color: var(--cm-fg-strong);
  font: 600 13px/1 var(--cm-font-sans); outline: none; border-radius: 4px;
  padding: 1px 5px; width: 130px; box-shadow: 0 0 0 2px var(--cm-accent);
}

/* + add-tab button */
.gpt-addtab {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 11px; border-radius: 7px;
  border: 1.5px dashed var(--cm-border-strong);
  background: transparent; color: var(--cm-fg-muted);
  font: 500 12px/1 var(--cm-font-sans); cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.gpt-addtab:hover { border-color: var(--cm-accent); color: var(--cm-accent); background: var(--cm-accent-soft); }
.gpt-addtab .ti { font-size: 14px; }

/* dashboard visibility badge on custom tabs */
.gpt-badge {
  display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 5px;
  border-radius: 5px; font: 600 9.5px/1 var(--cm-font-sans); letter-spacing: .01em;
  background: var(--cm-bg-soft); color: var(--cm-fg-muted); border: 1px solid var(--cm-border);
  max-width: 92px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 0;
}
.gpt-badge .ti { font-size: 11px; }
.gpt-badge.team { color: var(--cm-accent, #15803D); border-color: color-mix(in srgb, var(--cm-accent, #15803D) 30%, transparent); background: color-mix(in srgb, var(--cm-accent, #15803D) 8%, transparent); }
.gpt-badge.personal { color: var(--cm-fg-faint); }

/* new-dashboard modal (personal vs team) */
.gpt-create-bk { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.34); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gpt-create { width: 100%; max-width: 380px; background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-r-4, 14px); box-shadow: var(--cm-shadow-pop, 0 12px 40px rgba(0,0,0,.22)); padding: 18px; }
.gpt-create-h { font: 700 15px/1.2 var(--cm-font-sans); color: var(--cm-fg-strong); margin-bottom: 14px; }
.gpt-create-lbl { display: block; font: 600 10px/1 var(--cm-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cm-fg-muted); margin: 12px 0 6px; }
.gpt-create-in { width: 100%; height: 36px; padding: 0 10px; background: var(--cm-bg-soft); border: 1px solid var(--cm-border); border-radius: var(--cm-r-3, 9px); font: 500 13px/1 var(--cm-font-sans); color: var(--cm-fg); outline: none; }
.gpt-create-in:focus { border-color: var(--cm-border-strong); }
.gpt-vis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gpt-vis-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border: 1px solid var(--cm-border); border-radius: var(--cm-r-3, 9px); background: var(--cm-surface); cursor: pointer; text-align: left; transition: border-color .12s, background .12s; }
.gpt-vis-opt .ti { font-size: 17px; color: var(--cm-fg-muted); }
.gpt-vis-opt span { font: 600 12.5px/1 var(--cm-font-sans); color: var(--cm-fg-strong); }
.gpt-vis-opt small { font: 500 10.5px/1.2 var(--cm-font-sans); color: var(--cm-fg-faint); }
.gpt-vis-opt.is-on { border-color: var(--cm-accent, #15803D); background: color-mix(in srgb, var(--cm-accent, #15803D) 7%, transparent); }
.gpt-vis-opt.is-on .ti, .gpt-vis-opt.is-on span { color: var(--cm-accent, #15803D); }
.gpt-vis-opt.is-disabled { opacity: .5; cursor: not-allowed; }
.gpt-create-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.gpt-create-btn { height: 34px; padding: 0 14px; border-radius: var(--cm-r-3, 9px); font: 600 12.5px/1 var(--cm-font-sans); cursor: pointer; border: 1px solid var(--cm-border); background: var(--cm-surface); color: var(--cm-fg); }
.gpt-create-btn.primary { background: var(--cm-accent, #15803D); border-color: var(--cm-accent, #15803D); color: #fff; }
.gpt-create-btn.ghost:hover { background: var(--cm-bg-soft); }

/* tab kebab dropdown */
.gpt-menu {
  position: fixed; z-index: 250; min-width: 180px;
  background: var(--cm-surface); border: 1px solid var(--cm-border);
  border-radius: var(--cm-r-4); box-shadow: var(--cm-shadow-pop);
  overflow: hidden; opacity: 0; transform: translateY(-4px) scale(.98);
  pointer-events: none; transition: opacity 130ms var(--cm-ease, ease), transform 130ms var(--cm-ease, ease);
}
.gpt-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.gpt-menu-bk { position: fixed; inset: 0; z-index: 249; display: none; }
.gpt-menu-bk.is-on { display: block; }
.gpt-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 13px; border: 0; background: transparent;
  color: var(--cm-fg); font: 500 13px/1 var(--cm-font-sans);
  cursor: pointer; text-align: left;
}
.gpt-menu-item:hover { background: var(--cm-bg-soft); }
.gpt-menu-item .ti { font-size: 15px; color: var(--cm-fg-muted); }
.gpt-menu-item.danger { color: var(--cm-danger); }
.gpt-menu-item.danger .ti { color: var(--cm-danger); }
.gpt-menu-div { height: 1px; background: var(--cm-border-soft); margin: 3px 0; }
.gpt-menu.gpt-icon-menu { min-width: 0; }
.gpt-icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; max-width: 236px; }
.gpt-icon-opt { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--cm-fg-muted); cursor: pointer; }
.gpt-icon-opt:hover { background: var(--cm-bg-soft); color: var(--cm-fg-strong); }
.gpt-icon-opt.is-on { border-color: var(--cm-accent); color: var(--cm-accent); background: var(--cm-accent-soft); }
.gpt-icon-opt .ti { font-size: 18px; }

/* Native drag-to-reorder removed (moves are pointer-based, gp-canvas.js). The
   .gpt-dragging (opacity:.45) rule was the residual "faded card" culprit. */

/* custom view placeholder (blank dashboard) */
.gpt-empty-view {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 60px 20px; text-align: center; color: var(--cm-fg-muted);
}
.gpt-empty-view .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--cm-bg-soft); border: 1px solid var(--cm-border); display: flex; align-items: center; justify-content: center; color: var(--cm-fg-faint); }
.gpt-empty-view .ic .ti { font-size: 24px; }
.gpt-empty-view .t { font: 600 15px/1.3 var(--cm-font-sans); color: var(--cm-fg); }

/* ── Conditional table formatting (GPS Chart Reference §5 · adapted to cm tokens) ─────
   Per-column cell modes: bar / heat / icon / pct / plain. Min/max & thresholds are
   computed from the REAL column data in gp-builder.js — nothing here is hardcoded. */
/* Density: cell padding/height/font follow the shared --cm-tbl-* tokens (defined in :root
   on the dashboard). --cm-tbl-bar-h drives the bar/heat chip height so the row compacts to
   ~--cm-row-h. Fallbacks keep this self-contained if the tokens aren't present. */
.gp-zt td.tf { padding: var(--cm-tbl-pad-y, 4px) 8px; }
.tf-c { display: flex; align-items: center; gap: 7px; min-height: var(--cm-tbl-bar-h, 18px); font: 600 var(--cm-tbl-fs, 12px)/1 var(--cm-font-mono); color: var(--cm-fg); }
.tf-c.plain, .tf-c.icon { justify-content: center; }
.tf-c.heat { justify-content: center; }

/* bar: proportional fill behind the value */
.tf-c.bar { position: relative; justify-content: flex-end; padding: 0 8px; min-width: 76px; height: var(--cm-tbl-bar-h, 18px); border-radius: 5px; background: var(--cm-bg-soft); overflow: hidden; }
/* opacity .45 (antes .85): barra suave que armoniza con el heat atenuado — el largo sigue
   leyéndose y el valor encima gana contraste. */
.tf-c.bar .tf-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cm-accent); border-radius: 5px; opacity: .45; }
.tf-c.bar .tf-val { position: relative; z-index: 1; }

/* heat: full-cell color chip (bg set inline per value) */
.tf-c.heat.heat-cell { width: 100%; min-width: 56px; height: var(--cm-tbl-bar-h, 18px); border-radius: 5px; }
/* Variante suave (--hc = color de la escala): tinte de fondo + texto del mismo hue mezclado
   hacia el fg para legibilidad. Mata la saturación sin perder la lectura de la escala. */
.tf-c.heat.heat-cell.soft { background: color-mix(in srgb, var(--hc) 15%, transparent); color: color-mix(in srgb, var(--hc) 78%, var(--cm-fg)); }

/* icon: traffic dot or arrow + value */
.tf-c.icon .tf-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tf-c.icon .ti { font-size: 14px; line-height: 1; }
.tf-c.icon.good { color: var(--cm-success); }
.tf-c.icon.warn { color: var(--cm-warning); }
.tf-c.icon.bad  { color: var(--cm-danger); }
.tf-c.icon.good .tf-dot { background: var(--cm-success); }
.tf-c.icon.warn .tf-dot { background: var(--cm-warning); }
.tf-c.icon.bad  .tf-dot { background: var(--cm-danger); }
.tf-c.icon .tf-val { color: var(--cm-fg); }

/* pct: value + mini 0–100 track */
.tf-c.pct { justify-content: flex-end; gap: 8px; min-width: 92px; }
.tf-c.pct .tf-track { flex: 1; height: 6px; border-radius: 3px; background: var(--cm-bg-soft); overflow: hidden; }
.tf-c.pct .tf-track span { display: block; height: 100%; background: var(--cm-accent); border-radius: 3px; opacity: .55; }
.tf-c.pct .tf-val { flex: none; }

/* ── Saved builder table: ocupa el ancho de la card y reparte las columnas ───────────
   El motor compartido (.gp-zt) usa width:max-content (igual que el heatmap .ol-hm) para
   que el PREVIEW de edición (.gp-c.is-draft) y el heatmap puedan crecer/scrollear. Pero
   en la card YA GUARDADA queremos lo contrario: con 1..N métricas las columnas se reparten
   el ancho de la card SIN desbordar. Forzamos table-layout:fixed + width:100% sólo en las
   tablas que produce mountTableCard — se identifican porque sus celdas de valor son td.tf
   (el z-score matrix y .ol-hm no las tienen, así que quedan intactos). Las barras de formato
   condicional pasan a ser proporcionales a su columna (sin min-width fijo que empuje), con
   el número siempre visible. Sólo si hubiera muchísimas columnas se verían muy angostas. */
.gp-c:not(.is-draft) .gp-zt:has(td.tf) { width: 100%; table-layout: fixed; }
.gp-c:not(.is-draft) .gp-zt:has(td.tf) th.pc,
.gp-c:not(.is-draft) .gp-zt:has(td.tf) td.pc { width: 140px; }
/* Columna de FECHA (dimensión session_date, th.dt puesto por mountTableCard): con
   table-layout:fixed el reparto parejo la aprieta y el ellipsis corta "2026-05-…".
   Un width explícito garantiza que "2026-05-10" entre siempre completo. */
.gp-c:not(.is-draft) .gp-zt:has(td.tf) th.dc.dt { width: 100px; }
.gp-zt th.dc.dt, .gp-zt td.dc.dt { min-width: 100px; }
.gp-c:not(.is-draft) .gp-zt:has(td.tf) .tf-c.bar { width: 100%; min-width: 0; }
.gp-c:not(.is-draft) .gp-zt:has(td.tf) .tf-c.pct { min-width: 0; }
.gp-c:not(.is-draft) .gp-zt:has(td.tf) .tf-c.heat.heat-cell { min-width: 0; }

/* clickable measure headers in the builder draft */
.gp-zt th.tf-h { cursor: pointer; user-select: none; }
.gp-zt th.tf-h:hover { color: var(--cm-accent); background: var(--cm-accent-soft); }
/* sortable headers (clic en el nombre = ordenar) */
.gp-zt th.tf-sortable { cursor: pointer; user-select: none; }
.gp-zt th.tf-sortable:hover { color: var(--cm-accent); }
.gp-zt .tf-sort-arr { font-size: 11px; vertical-align: middle; color: var(--cm-accent); }

/* Builder tables (those with conditional td.tf cells) wrap their headers so full
   names ("Work time", "Players format") read in two lines instead of clipping.
   Scoped to :has(td.tf) so the bespoke z-score/heatmap tables stay single-line. */
.gp-zt:has(td.tf) th { white-space: normal; line-height: 1.2; }

/* Per-column alignment (rename + align pane). Defaults stay dims-left / measures-right;
   these classes override per column. The inner .tf-c flex follows for value cells. */
.gp-zt th.tf-al-left,   .gp-zt td.tf-al-left   { text-align: left; }
.gp-zt th.tf-al-center, .gp-zt td.tf-al-center { text-align: center; }
.gp-zt th.tf-al-right,  .gp-zt td.tf-al-right  { text-align: right; }
.gp-zt td.tf-al-left   .tf-c { justify-content: flex-start; }
.gp-zt td.tf-al-center .tf-c { justify-content: center; }
.gp-zt td.tf-al-right  .tf-c { justify-content: flex-end; }

/* rename text input inside the column pane */
.tf-pane input[type="text"][data-label] { width: 100%; min-width: 150px; padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--cm-border); background: var(--cm-bg-sunk); color: var(--cm-fg-strong);
  font: 500 12.5px/1.2 var(--cm-font-sans); }
.tf-pane input[type="text"][data-label]:focus { outline: none; border-color: var(--cm-accent); }
/* always-visible "format" chip so the header reads as clickable */
.gp-zt th.tf-h .tf-fbtn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 5px; border-radius: 5px; background: var(--cm-bg-soft); border: 1px solid var(--cm-border); color: var(--cm-fg-muted); vertical-align: middle; transition: background .12s, color .12s, border-color .12s; }
.gp-zt th.tf-h:hover .tf-fbtn { background: var(--cm-accent); border-color: var(--cm-accent); color: var(--cm-fg-on-accent); }
.gp-zt th.tf-h .tf-fbtn .ti { font-size: 11px; line-height: 1; }

/* ── Per-column rules panel (.tf-pane) ── */
.tf-pane { position: fixed; z-index: 1400; width: 268px; background: var(--cm-surface); border: 1px solid var(--cm-border); border-radius: var(--cm-r-4, 12px); box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: 14px; font: 500 12px/1.3 var(--cm-font-sans); color: var(--cm-fg); }
.tf-pane .tf-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tf-pane .tf-hd .t { font: 600 13px/1 var(--cm-font-sans); color: var(--cm-fg-strong); }
.tf-pane .tf-hd .x { background: none; border: none; color: var(--cm-fg-muted); cursor: pointer; padding: 2px; border-radius: 4px; }
.tf-pane .tf-hd .x:hover { background: var(--cm-bg-soft); color: var(--cm-fg); }
.tf-pane .tf-row { margin-bottom: 12px; }
.tf-pane .tf-row > .lab { display: block; font: 600 10px/1 var(--cm-font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--cm-fg-muted); margin-bottom: 6px; }
.tf-seg { display: flex; gap: 2px; background: var(--cm-bg-soft); border: 1px solid var(--cm-border); border-radius: var(--cm-r-3, 8px); padding: 2px; }
.tf-seg button { flex: 1; border: none; background: none; cursor: pointer; padding: 5px 4px; border-radius: 6px; font: 600 11px/1 var(--cm-font-sans); color: var(--cm-fg-muted); text-transform: capitalize; }
.tf-seg button.is-on { background: var(--cm-surface); color: var(--cm-accent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tf-pane .tf-sw { display: flex; gap: 6px; flex-wrap: wrap; }
.tf-pane .tf-sw button { width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.tf-pane .tf-sw button.is-on { border-color: var(--cm-fg); box-shadow: 0 0 0 2px var(--cm-focus-ring, rgba(34,197,94,.3)); }
.tf-pane .tf-thr { display: flex; gap: 8px; }
.tf-pane .tf-thr label { flex: 1; font: 500 10px/1.4 var(--cm-font-sans); color: var(--cm-fg-muted); }
.tf-pane input[type=number], .tf-pane select { width: 100%; box-sizing: border-box; margin-top: 3px; padding: 5px 7px; border: 1px solid var(--cm-border); border-radius: 6px; background: var(--cm-bg-soft); color: var(--cm-fg); font: 600 12px/1 var(--cm-font-mono); }
.tf-pane select { font-family: var(--cm-font-sans); }
.tf-pane .tf-hint { font: 500 10.5px/1.4 var(--cm-font-sans); color: var(--cm-fg-faint); }
.gpt-empty-view .d { font: 500 12px/1.5 var(--cm-font-sans); color: var(--cm-fg-muted); max-width: 280px; }

/* ── KPI multi-métrica (fila/grid compacta, una tile por métrica) ───────────── */
.gp-kpi-multi { display:flex; flex-wrap:wrap; gap:0; padding:16px 10px; width:100%; align-self:stretch; align-items:stretch; }
.gp-kpi-tile { flex:1 1 150px; min-width:0; padding:6px 22px; border-left:1px solid var(--cm-border-soft); }
.gp-kpi-tile:first-child { border-left:none; padding-left:10px; }
.gp-kpi-tile .kl { display:flex; align-items:center; gap:5px; font:500 10.5px/1.15 var(--cm-font-sans); color:var(--cm-fg-muted); margin-bottom:7px; }
.gp-kpi-tile .kl .ti { font-size:12px; flex-shrink:0; }
.gp-kpi-tile .kv { font:600 20px/1 var(--cm-font-sans); letter-spacing:-0.02em; color:var(--cm-fg-strong); }
.gp-kpi-tile .kv sub { font:500 11px/1 var(--cm-font-mono); color:var(--cm-fg-muted); margin-left:3px; }
.gp-kpi-tile .kt { margin-top:7px; font:500 10.5px/1.2 var(--cm-font-sans); color:var(--cm-fg-muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.gp-kpi-tile .kd { display:inline-flex; align-items:center; gap:2px; font:600 11px/1 var(--cm-font-mono); }
.gp-kpi-tile .kd.up { color:var(--cm-success); }
.gp-kpi-tile .kd.down { color:var(--cm-danger); }

/* =============================================================
   Chart builder · Modo Drag & drop (DENTRO del builder — solo UI)
   Forma alternativa de armar la MISMA config gp.card/v1 vía un toggle
   Clásico/D&D dentro del drawer. El stage se apila vertical para entrar
   en el panel de 328px; el preview es la draft card del grid (compartida).
   Estilos portados de la maqueta (prefijo .bdd-*, preview .bp-*) con los
   tokens reales --cm-*.
   ============================================================= */

/* ── toggle de modo de construcción (en el header del drawer) ── */
/* (Removed: .es-mode — the classic/D&D mode toggle no longer exists; D&D is the only editor.) */
/* Los tabs Setup/Style (patrón Data Studio): "Setup" enruta al pane de zonas del D&D y "Style"
   reusa el pane Style. La lógica de ruteo vive en el handler de tabs. */
/* D&D usa un panel ANGOSTO y minimalista (~380px, no media pantalla) para que el gráfico en
   edición quede cómodo al lado. El padding de la página se corre lo justo. */
.es-panel.is-ddmode { width: min(380px, 96vw); }
body.gpb-ddmode.gpb-open .gp-page { padding-right: min(380px, 96vw); }

/* el pane D&D dentro del drawer: padding lateral propio + stack vertical */
.es-p-b > .pane[data-pane="dd"] { padding:10px 12px 20px; }
.bdd-wrap { display:flex; flex-direction:column; gap:12px; }
/* Data Studio, versión angosta: apilado vertical → ZONAS (trabajo) · CAMPOS (despensa con
   scroll propio) · CONFIG. Nada lado a lado: a 380px se ve cómodo y el canvas gana espacio. */
.bdd-dock { display:flex; flex-direction:column; gap:12px; }
.bdd-panel { width:100%; }

/* ── PARTE B · densidad compacta del panel (filas más finas → más campos sin
   scroll). Sólo tamaños/espaciado; la lógica, el tinte por tipo (dim azul /
   métrica verde) y los estados de drag (is-over/is-bad/is-placed) no cambian. */
.bdd-dock .bdd-fields { gap:2px; max-height:36vh; }
.bdd-dock .bdd-grp-h { padding:6px 6px 3px; }
.bdd-dock .bdd-field { padding:3px 8px; gap:8px; }
.bdd-dock .bdd-field .ic { width:18px; height:18px; font-size:11px; }
.bdd-dock .bdd-field .nm { font-size:11.5px; }
.bdd-dock .bdd-field .grip { font-size:13px; }
.bdd-dock .bdd-field .u { font-size:9.5px; }
.bdd-dock .bdd-chip { padding:3px 7px; gap:7px; }
.bdd-dock .bdd-chip .ic { width:18px; height:18px; font-size:11px; }
.bdd-dock .bdd-chip .nm { font-size:11.5px; }
.bdd-dock .bdd-chip .grip { font-size:13px; }
.bdd-dock .bdd-chip .x { width:20px; height:20px; }
.bdd-dock .bdd-chip .x .ti { font-size:12px; }
.bdd-dock .bdd-agg select { height:20px; padding:0 16px 0 7px; font-size:9.5px; }
.bdd-dock .bdd-agg .car { right:4px; font-size:11px; }

/* ── toolbar: tipo de gráfico + badge de config ── */
.bdd-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--cm-surface); border:1px solid var(--cm-border); border-radius:var(--cm-r-4);
  box-shadow:var(--cm-shadow-1); padding:10px 12px; }
.bdd-bar .lbl { font:500 11px/1 var(--cm-font-sans); letter-spacing:0.08em; text-transform:uppercase; color:var(--cm-fg-faint); }
/* 8 chart types → an even 4×2 grid (equal columns, consistent gaps) instead of a
   ragged wrapped flex row. */
.bdd-seg { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; padding:4px; border:1px solid var(--cm-border); border-radius:var(--cm-r-3); background:var(--cm-bg-soft); }
.bdd-seg button { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:30px; padding:0 10px; min-width:0; border:0; border-radius:var(--cm-r-2);
  background:transparent; color:var(--cm-fg-muted); font:500 12.5px/1 var(--cm-font-sans); cursor:pointer;
  transition:background var(--cm-dur-1) var(--cm-ease), color var(--cm-dur-1) var(--cm-ease); }
.bdd-seg button .ti { font-size:15px; }
.bdd-seg button:hover { color:var(--cm-fg); }
.bdd-seg button.is-on { background:var(--cm-surface); color:var(--cm-fg-strong); box-shadow:var(--cm-shadow-1); font-weight:600; }

.bdd-col { background:var(--cm-surface); border:1px solid var(--cm-border); border-radius:var(--cm-r-4); box-shadow:var(--cm-shadow-1); display:flex; flex-direction:column; overflow:hidden; }
.bdd-col-h { display:flex; align-items:center; gap:8px; padding:8px 11px; border-bottom:1px solid var(--cm-border-soft); flex-shrink:0; }
.bdd-col-h .ti { font-size:15px; color:var(--cm-fg-muted); }
.bdd-col-h .t { font:600 13px/1.2 var(--cm-font-sans); color:var(--cm-fg-strong); }
.bdd-col-h .ct { margin-left:auto; min-width:18px; height:18px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--cm-r-pill); background:var(--cm-bg-sunk); color:var(--cm-fg-faint); font:600 10px/1 var(--cm-font-mono); }

/* 1) PANEL DE CAMPOS (izquierda) */
.bdd-search { position:relative; padding:10px 11px 8px; border-bottom:1px solid var(--cm-border-soft); }
.bdd-search .ti { position:absolute; left:21px; top:50%; transform:translateY(-50%); font-size:14px; color:var(--cm-fg-faint); }
.bdd-search input { width:100%; height:32px; padding:0 10px 0 30px; border:1px solid var(--cm-border); border-radius:var(--cm-r-2);
  background:var(--cm-bg-soft); color:var(--cm-fg); font:var(--cm-body-sm); outline:none;
  transition:border-color var(--cm-dur-1), box-shadow var(--cm-dur-1); }
.bdd-search input::placeholder { color:var(--cm-fg-faint); }
.bdd-search input:focus { border-color:var(--cm-border-strong); box-shadow:0 0 0 3px var(--cm-focus-ring); background:var(--cm-surface); }

.bdd-fields { padding:8px; display:flex; flex-direction:column; gap:4px; max-height:460px; overflow:auto; }
.bdd-grp-h { display:flex; align-items:center; gap:7px; padding:8px 6px 5px; }
.bdd-grp-h:first-child { padding-top:3px; }
.bdd-grp-h .k { font:600 10px/1 var(--cm-font-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--cm-fg-faint); }
.bdd-grp-h .ln { flex:1; height:1px; background:var(--cm-border-soft); }
.bdd-grp-h .hint { font:500 10.5px/1 var(--cm-font-sans); color:var(--cm-fg-faint); }

.bdd-field { display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid var(--cm-border); border-radius:var(--cm-r-3);
  background:var(--cm-surface); cursor:grab; user-select:none;
  transition:border-color var(--cm-dur-1) var(--cm-ease), background var(--cm-dur-1) var(--cm-ease), box-shadow var(--cm-dur-1) var(--cm-ease), transform var(--cm-dur-1) var(--cm-ease); }
.bdd-field:hover { border-color:var(--cm-border-strong); background:var(--cm-bg-soft); }
.bdd-field:active { cursor:grabbing; }
.bdd-field .grip { color:var(--cm-fg-faint); font-size:14px; display:flex; flex-shrink:0; }
.bdd-field .ic { width:22px; height:22px; flex-shrink:0; border-radius:var(--cm-r-2); display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.bdd-field .nm { font:500 12.5px/1.2 var(--cm-font-sans); color:var(--cm-fg); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bdd-field .u { font:500 10px/1 var(--cm-font-mono); color:var(--cm-fg-faint); flex-shrink:0; }
.bdd-field.is-placed { opacity:0.4; cursor:default; pointer-events:none; }
/* tinte por tipo: dimensión = info (azul), métrica = accent (verde) */
.bdd-field[data-kind="dim"]    .ic { background:var(--cm-info-bg);    color:var(--cm-info); }
.bdd-field[data-kind="metric"] .ic { background:var(--cm-accent-soft); color:var(--cm-accent); }
.bdd-field.is-dragging { opacity:0.45; border-style:dashed; }

/* 2) ZONAS DE DESTINO (centro) */
.bdd-zones { display:flex; flex-direction:column; gap:10px; }
.bdd-zone { background:var(--cm-surface); border:1px solid var(--cm-border); border-radius:var(--cm-r-4); box-shadow:var(--cm-shadow-1); overflow:hidden; }
.bdd-zone-h { display:flex; align-items:center; gap:9px; padding:7px 10px; border-bottom:1px solid var(--cm-border-soft); }
.bdd-zone-h .badge { width:24px; height:24px; flex-shrink:0; border-radius:var(--cm-r-2); display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.bdd-zone[data-accept="dim"]    .bdd-zone-h .badge { background:var(--cm-info-bg);    color:var(--cm-info); }
.bdd-zone[data-accept="metric"] .bdd-zone-h .badge { background:var(--cm-accent-soft); color:var(--cm-accent); }
.bdd-zone-h .t  { font:600 13px/1.15 var(--cm-font-sans); color:var(--cm-fg-strong); }
.bdd-zone-h .ax { font:500 11px/1 var(--cm-font-mono); color:var(--cm-fg-muted); margin-left:1px; }
.bdd-zone-h .ct { margin-left:auto; min-width:18px; height:18px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--cm-r-pill); background:var(--cm-bg-sunk); color:var(--cm-fg-faint); font:600 10px/1 var(--cm-font-mono); }

.bdd-drop { padding:8px; min-height:auto; display:flex; flex-direction:column; gap:6px;
  transition:background var(--cm-dur-1) var(--cm-ease), box-shadow var(--cm-dur-1) var(--cm-ease); }
/* Empty zones are SHORT (a slim dashed strip) so they don't eat vertical space in the narrow
   panel; they still highlight/grow on drag-over. */
.bdd-empty { flex:1; min-height:38px; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px;
  border:1.5px dashed var(--cm-border-strong); border-radius:var(--cm-r-3); background:var(--cm-bg-soft);
  color:var(--cm-fg-faint); text-align:center; }
.bdd-empty .ti { font-size:15px; }
.bdd-empty .m { font:500 11.5px/1.3 var(--cm-font-sans); }
/* estados de drop (clase en .bdd-zone, estilan el .bdd-drop) — mostrables para el prompt 2 */
.bdd-zone.is-over  .bdd-drop { background:var(--cm-accent-soft); box-shadow:inset 0 0 0 2px var(--cm-accent); }
.bdd-zone.is-over  .bdd-empty { border-color:var(--cm-accent); border-style:solid; color:var(--cm-accent); background:transparent; }
.bdd-zone.is-bad   .bdd-drop { background:var(--cm-danger-bg); box-shadow:inset 0 0 0 2px var(--cm-danger); cursor:not-allowed; }
.bdd-zone.is-bad   .bdd-empty { border-color:var(--cm-danger); color:var(--cm-danger); background:transparent; }
.bdd-zone.is-bad   .bdd-empty .m::after { content:" · not allowed here"; }

/* 3) COMPACT CONFIG (below the zones, left column) — scope / time range / comparison.
   NOT drop targets: dropdowns + a segmented toggle, clearly separated from the zones.
   Reuses .es-seg / .es-select from the classic panel (same look, same handlers, same S). */
.bdd-config { background:var(--cm-surface); border:1px solid var(--cm-border); border-radius:var(--cm-r-4); box-shadow:var(--cm-shadow-1); overflow:hidden; }
.bdd-config-h { display:flex; align-items:center; gap:8px; padding:7px 11px; border-bottom:1px solid var(--cm-border-soft); }
.bdd-config-h .ti { font-size:15px; color:var(--cm-fg-muted); }
.bdd-config-h .t { font:600 12.5px/1.15 var(--cm-font-sans); color:var(--cm-fg-strong); }
.bdd-config-h .s { margin-left:auto; font:500 10.5px/1 var(--cm-font-sans); color:var(--cm-fg-faint); }
.bdd-cfg-grid { display:grid; grid-template-columns:1fr; gap:9px; padding:10px 11px; }
.bdd-cfg-f { display:flex; flex-direction:column; gap:4px; min-width:0; }
.bdd-cfg-f .k { font:600 10px/1 var(--cm-font-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--cm-fg-faint); }
.bdd-cfg-sel .v { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }

/* chip colocado */
.bdd-chip { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--cm-border); border-radius:var(--cm-r-3);
  background:var(--cm-surface); box-shadow:var(--cm-shadow-1); }
.bdd-chip .grip { color:var(--cm-fg-faint); font-size:14px; cursor:grab; display:flex; flex-shrink:0; }
.bdd-chip .ic { width:21px; height:21px; flex-shrink:0; border-radius:var(--cm-r-2); display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.bdd-chip[data-kind="dim"]    .ic { background:var(--cm-info-bg);    color:var(--cm-info); }
.bdd-chip[data-kind="metric"] .ic { background:var(--cm-accent-soft); color:var(--cm-accent); }
.bdd-chip .nm { font:500 12.5px/1.2 var(--cm-font-sans); color:var(--cm-fg-strong); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Nivel jerárquico — sólo se renderiza con 2+ dimensiones (eje anidado). Discreto: el chip
   con una sola dimensión queda idéntico a como estaba. */
.bdd-chip .lvl { flex-shrink:0; padding:1px 6px; border-radius:999px; background:var(--cm-bg-sunk);
                 color:var(--cm-fg-muted); font:600 9.5px/1.5 var(--cm-font-mono); letter-spacing:.03em; }
.bdd-chip .x { width:22px; height:22px; flex-shrink:0; border:0; background:transparent; color:var(--cm-fg-faint); border-radius:var(--cm-r-2);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--cm-dur-1), color var(--cm-dur-1); }
.bdd-chip .x:hover { background:var(--cm-danger-bg); color:var(--cm-danger); }
.bdd-chip .x .ti { font-size:13px; }
.bdd-chip.is-dragging { opacity:0.5; border-style:dashed; }
/* Bar/Line combo toggle on a metric chip (bars only). Two icon halves; the active mode is
   tinted with the accent. Toggles the metric's .line prop. */
.bdd-line { display:inline-flex; align-items:center; height:22px; flex-shrink:0; border:1px solid var(--cm-border);
  border-radius:var(--cm-r-2); overflow:hidden; background:var(--cm-bg-soft); cursor:pointer; padding:0; }
.bdd-line .ti { width:22px; height:100%; display:inline-flex; align-items:center; justify-content:center; font-size:12px;
  color:var(--cm-fg-muted); transition:background var(--cm-dur-1), color var(--cm-dur-1); }
.bdd-line .ti:first-child { background:var(--cm-accent); color:var(--cm-fg-on-accent); }            /* bar = default active */
.bdd-line.is-line .ti:first-child { background:transparent; color:var(--cm-fg-muted); }
.bdd-line.is-line .ti:last-child  { background:var(--cm-accent); color:var(--cm-fg-on-accent); }    /* line active */
.bdd-line:hover { border-color:var(--cm-border-strong); }
/* Modo relativo (Δ% vs MC anterior): toggle de un solo ícono, apagado por defecto. */
.bdd-rel { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex-shrink:0;
  border:1px solid var(--cm-border); border-radius:var(--cm-r-2); background:var(--cm-bg-soft); color:var(--cm-fg-muted);
  cursor:pointer; padding:0; font-size:12px; transition:background var(--cm-dur-1), color var(--cm-dur-1); }
.bdd-rel.is-on { background:var(--cm-accent); color:var(--cm-fg-on-accent); border-color:var(--cm-accent); }
.bdd-rel:hover { border-color:var(--cm-border-strong); }
.bdd-agg { position:relative; flex-shrink:0; }
.bdd-agg select { -webkit-appearance:none; appearance:none; height:23px; padding:0 21px 0 8px; border:1px solid var(--cm-border);
  border-radius:var(--cm-r-2); background:var(--cm-bg-soft); color:var(--cm-fg); font:600 10.5px/1 var(--cm-font-mono); letter-spacing:0.04em;
  cursor:pointer; outline:none; transition:border-color var(--cm-dur-1), background var(--cm-dur-1); }
.bdd-agg select:hover { border-color:var(--cm-border-strong); background:var(--cm-surface); }
.bdd-agg .car { position:absolute; right:5px; top:50%; transform:translateY(-50%); pointer-events:none; font-size:12px; color:var(--cm-fg-faint); }
.bdd-drop .bdd-ins { height:2px; margin:-3px 2px; border-radius:2px; background:var(--cm-accent); box-shadow:0 0 0 2px var(--cm-accent-soft); }

/* 3) PREVIEW (derecha) */
.bdd-preview { min-width:0; }
.bdd-prev-h { display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid var(--cm-border-soft); }
.bdd-prev-h .ttl { font:600 13px/1.2 var(--cm-font-sans); color:var(--cm-fg-strong); }
.bdd-prev-h .sub { font:var(--cm-mono); color:var(--cm-fg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bdd-prev-h .live { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font:500 10.5px/1 var(--cm-font-sans); color:var(--cm-fg-muted); }
.bdd-prev-h .live .dot { width:6px; height:6px; border-radius:50%; background:var(--cm-success); box-shadow:0 0 0 3px var(--cm-success-bg); }
.bdd-prev-b { padding:14px; min-height:300px; display:flex; flex-direction:column; }
.bdd-prev-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--cm-fg-faint); text-align:center; }
.bdd-prev-empty .ti { font-size:26px; }
.bdd-prev-empty .m { font:500 12.5px/1.4 var(--cm-font-sans); max-width:220px; }

/* preview · mini bar chart */
.bp-bar { --yw:34px; height:240px; display:grid; grid-template-columns:var(--yw) 1fr; grid-template-rows:1fr auto; column-gap:8px; }
.bp-yax { grid-area:1/1/2/2; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; }
.bp-yax span { font:500 9.5px/1 var(--cm-font-mono); color:var(--cm-fg-faint); transform:translateY(-50%); }
.bp-yax span:first-child { transform:translateY(-1px); }
.bp-yax span:last-child { transform:translateY(1px); }
.bp-plot { grid-area:1/2/2/3; position:relative; }
.bp-grid { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.bp-grid i { height:1px; background:var(--cm-border-soft); }
.bp-grid i:last-child { background:var(--cm-border-strong); }
.bp-cats { position:absolute; inset:0; display:flex; align-items:flex-end; gap:12px; }
.bp-cat { flex:1; min-width:0; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.bp-b { flex:1; min-width:0; max-width:30px; height:var(--h,0%); border-radius:3px 3px 0 0; background:var(--c,var(--cm-accent)); position:relative;
  transition:height var(--cm-dur-3) var(--cm-ease); }
.bp-b .v { position:absolute; left:50%; top:-15px; transform:translateX(-50%); font:600 9.5px/1 var(--cm-font-mono); color:var(--cm-fg); white-space:nowrap; }
.bp-xax { grid-area:2/2/3/3; display:flex; gap:12px; padding-top:7px; }
.bp-xax span { flex:1; min-width:0; text-align:center; font:500 10px/1.1 var(--cm-font-sans); color:var(--cm-fg-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bp-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:11px; padding-top:10px; border-top:1px solid var(--cm-border-soft); }
.bp-leg { display:inline-flex; align-items:center; gap:6px; font:500 11px/1 var(--cm-font-sans); color:var(--cm-fg-muted); }
.bp-leg i { width:10px; height:10px; border-radius:3px; background:var(--c,var(--cm-accent)); }

/* preview · mini line chart */
.bp-line { height:240px; display:grid; grid-template-columns:34px 1fr; grid-template-rows:1fr auto; column-gap:8px; }
.bp-line .bp-yax { grid-area:1/1/2/2; }
.bp-line svg { grid-area:1/2/2/3; width:100%; height:100%; display:block; overflow:visible; }
.bp-line .bp-xax { grid-area:2/2/3/3; }
.bp-line .gl { stroke:var(--cm-border-soft); stroke-width:1; }
.bp-line .gl.base { stroke:var(--cm-border-strong); }

/* preview · mini table */
.bp-table { width:100%; border-collapse:separate; border-spacing:0; font:var(--cm-body-sm); }
.bp-table th, .bp-table td { padding:8px 11px; text-align:right; border-bottom:1px solid var(--cm-border-soft); white-space:nowrap; }
.bp-table th { font:600 11px/1 var(--cm-font-sans); color:var(--cm-fg-muted); background:var(--cm-bg-soft); position:sticky; top:0;
  border-bottom:1px solid var(--cm-border); }
.bp-table th:first-child, .bp-table td:first-child { text-align:left; font-weight:600; color:var(--cm-fg-strong); }
.bp-table th.metric { color:var(--cm-accent); }
.bp-table td { font:500 12px/1 var(--cm-font-mono); color:var(--cm-fg); }
.bp-table tbody tr:hover td { background:var(--cm-bg-soft); }
.bp-table-wrap { border:1px solid var(--cm-border); border-radius:var(--cm-r-3); overflow:hidden; }

/* =============================================================
   Métricas calculadas · editor de fórmula (prefijo .cmf-*)
   Editor controlado (tokenizer+parser propio, sin eval). Tinte info
   para "calculada" (fx). Portado de la maqueta a los tokens --cm-*.
   Las filas/pastillas usan el MISMO tamaño compacto que el resto del
   builder (.bdd-dock / .es-field): chips de inserción finos.
   ============================================================= */

/* overlay + stage (modal a la izquierda · preview/ayuda a la derecha) */
.cmf-overlay { position:fixed; inset:0; z-index:var(--cm-z-modal); display:flex; align-items:flex-start; justify-content:center;
  padding:40px 24px; overflow:auto; background:color-mix(in srgb, var(--cm-fg-strong) 38%, transparent); backdrop-filter:saturate(140%) blur(4px); }
.cmf-overlay[hidden] { display:none; }
.cmf-editor-stage { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; width:min(900px,100%); margin:auto; }
@media (max-width:880px){ .cmf-editor-stage { grid-template-columns:1fr; width:min(560px,100%); } }

.cmf-modal { background:var(--cm-surface); border:1px solid var(--cm-border); border-radius:var(--cm-r-5); box-shadow:var(--cm-shadow-3); overflow:hidden; }
.cmf-modal-h { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--cm-border-soft); }
.cmf-modal-h .badge { width:28px; height:28px; flex-shrink:0; border-radius:var(--cm-r-2); display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; background:color-mix(in oklab, var(--cm-info) 14%, transparent); color:var(--cm-info); }
.cmf-modal-h .t { font:600 14px/1.2 var(--cm-font-sans); color:var(--cm-fg-strong); }
.cmf-modal-h .t .sub { display:block; font:500 11px/1.3 var(--cm-font-mono); color:var(--cm-fg-faint); margin-top:2px; }
.cmf-modal-h .x { margin-left:auto; width:28px; height:28px; border:0; background:transparent; color:var(--cm-fg-faint); border-radius:var(--cm-r-2);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.cmf-modal-h .x:hover { background:var(--cm-bg-soft); color:var(--cm-fg); }
.cmf-modal-b { padding:16px; display:flex; flex-direction:column; gap:16px; }

.cmf-row { display:flex; flex-direction:column; gap:6px; }
.cmf-grid2 { display:grid; grid-template-columns:1fr 132px; gap:12px; }
.cmf-label { display:flex; align-items:center; gap:6px; font:600 11px/1 var(--cm-font-sans); letter-spacing:0.04em; color:var(--cm-fg-muted); }
.cmf-label .opt { font:500 10px/1 var(--cm-font-mono); color:var(--cm-fg-faint); text-transform:none; letter-spacing:0; }
.cmf-input { height:34px; padding:0 11px; border:1px solid var(--cm-border); border-radius:var(--cm-r-2); background:var(--cm-bg-soft); color:var(--cm-fg);
  font:var(--cm-body); outline:none; transition:border-color var(--cm-dur-1), box-shadow var(--cm-dur-1), background var(--cm-dur-1); }
.cmf-input::placeholder { color:var(--cm-fg-faint); }
.cmf-input:focus { border-color:var(--cm-border-strong); box-shadow:0 0 0 3px var(--cm-focus-ring); background:var(--cm-surface); }

.cmf-formula-wrap { display:flex; flex-direction:column; gap:8px; }
.cmf-formula { min-height:48px; padding:9px 12px; border:1.5px solid var(--cm-border); border-radius:var(--cm-r-3); background:var(--cm-bg-soft);
  font:500 14px/1.7 var(--cm-font-mono); color:var(--cm-fg-strong); outline:none; white-space:pre-wrap; word-break:break-word; cursor:text;
  transition:border-color var(--cm-dur-1), box-shadow var(--cm-dur-1), background var(--cm-dur-1); }
.cmf-formula:focus { border-color:var(--cm-info); box-shadow:0 0 0 3px color-mix(in oklab, var(--cm-info) 18%, transparent); background:var(--cm-surface); }
.cmf-formula.ok  { border-color:color-mix(in oklab, var(--cm-accent) 55%, var(--cm-border)); }
.cmf-formula.bad { border-color:color-mix(in oklab, var(--cm-danger) 55%, var(--cm-border)); }
.cmf-formula:empty::before { content:"escribí o insertá una fórmula…"; color:var(--cm-fg-faint); }
.cmf-formula .tk-met { color:var(--cm-info); font-weight:600; }
.cmf-formula .tk-fn  { color:var(--cm-accent); font-weight:600; }
.cmf-formula .tk-num { color:var(--cm-fg-strong); }
.cmf-formula .tk-op  { color:var(--cm-fg-muted); }
.cmf-formula .tk-bad { color:var(--cm-danger); text-decoration:underline wavy var(--cm-danger); text-underline-offset:3px; }

/* chips de inserción — compactos (mismo aire que .bdd-dock) */
.cmf-insert { display:flex; flex-direction:column; gap:7px; }
.cmf-insert-lbl { font:500 10.5px/1 var(--cm-font-mono); letter-spacing:0.04em; color:var(--cm-fg-faint); }
.cmf-chips { display:flex; flex-wrap:wrap; gap:5px; max-height:120px; overflow:auto; }
.cmf-chip { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border:1px solid var(--cm-border); border-radius:var(--cm-r-pill);
  background:var(--cm-surface); color:var(--cm-fg); font:500 11.5px/1 var(--cm-font-sans); cursor:pointer;
  transition:border-color var(--cm-dur-1), background var(--cm-dur-1), color var(--cm-dur-1); }
.cmf-chip:hover { border-color:var(--cm-info); background:color-mix(in oklab, var(--cm-info) 8%, transparent); color:var(--cm-info); }
.cmf-chip .ti { font-size:12px; color:var(--cm-info); }
.cmf-chip .id { font:500 9.5px/1 var(--cm-font-mono); color:var(--cm-fg-faint); }
.cmf-chip:hover .id { color:color-mix(in oklab, var(--cm-info) 70%, var(--cm-fg-faint)); }

.cmf-ops { display:flex; flex-wrap:wrap; gap:6px; padding-top:10px; border-top:1px solid var(--cm-border-soft); }
.cmf-op { height:30px; min-width:30px; padding:0 10px; border:1px solid var(--cm-border); border-radius:var(--cm-r-2); background:var(--cm-bg-soft);
  color:var(--cm-fg-strong); font:600 13px/1 var(--cm-font-mono); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color var(--cm-dur-1), background var(--cm-dur-1); }
.cmf-op:hover { border-color:var(--cm-border-strong); background:var(--cm-surface); }
.cmf-op.fn { color:var(--cm-accent); }
.cmf-op.util { margin-left:auto; color:var(--cm-fg-muted); gap:5px; }
.cmf-op.util .ti { font-size:14px; }

.cmf-valid { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:var(--cm-r-2); font:500 12px/1.4 var(--cm-font-sans); }
.cmf-valid .ti { font-size:15px; flex-shrink:0; }
.cmf-valid.ok  { background:var(--cm-accent-soft); color:var(--cm-accent); }
.cmf-valid.bad { background:var(--cm-danger-bg);  color:var(--cm-danger); }
.cmf-valid.idle{ background:var(--cm-bg-sunk);    color:var(--cm-fg-faint); }
.cmf-valid code { font:600 11.5px/1 var(--cm-font-mono); padding:1px 4px; border-radius:3px; background:rgba(0,0,0,0.06); }

.cmf-modal-f { display:flex; align-items:center; gap:10px; padding:13px 16px; border-top:1px solid var(--cm-border-soft); background:var(--cm-bg-soft); }
.cmf-rule { display:flex; align-items:center; gap:7px; flex:1; font:500 11px/1.4 var(--cm-font-sans); color:var(--cm-fg-muted); }
.cmf-rule .ti { font-size:14px; color:var(--cm-info); flex-shrink:0; }
.cmf-btn { height:34px; padding:0 15px; border-radius:var(--cm-r-2); border:1px solid transparent; font:600 12.5px/1 var(--cm-font-sans); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; transition:background var(--cm-dur-1), border-color var(--cm-dur-1), opacity var(--cm-dur-1); }
.cmf-btn .ti { font-size:15px; }
.cmf-btn.ghost { background:var(--cm-surface); border-color:var(--cm-border); color:var(--cm-fg); }
.cmf-btn.ghost:hover { border-color:var(--cm-border-strong); background:var(--cm-bg-soft); }
.cmf-btn.primary { background:var(--cm-info); color:#fff; }
.cmf-btn.primary:hover { background:color-mix(in oklab, var(--cm-info) 88%, #000); }
.cmf-btn.primary:disabled { opacity:0.45; cursor:not-allowed; }

.cmf-side { display:flex; flex-direction:column; gap:16px; }
.cmf-card { background:var(--cm-surface); border:1px solid var(--cm-border); border-radius:var(--cm-r-4); box-shadow:var(--cm-shadow-1); overflow:hidden; }
.cmf-card-h { display:flex; align-items:center; gap:8px; padding:10px 13px; border-bottom:1px solid var(--cm-border-soft); }
.cmf-card-h .ti { font-size:14px; color:var(--cm-fg-muted); }
.cmf-card-h .t { font:600 12px/1.2 var(--cm-font-sans); color:var(--cm-fg-strong); }
.cmf-card-h .live { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font:500 10px/1 var(--cm-font-sans); color:var(--cm-fg-muted); }
.cmf-card-h .live .dot { width:6px; height:6px; border-radius:50%; background:var(--cm-success); box-shadow:0 0 0 3px var(--cm-success-bg); }
.cmf-card-b { padding:14px; }
.cmf-preview-val { display:flex; align-items:baseline; gap:7px; margin-bottom:4px; }
.cmf-preview-val .v { font:700 30px/1 var(--cm-font-sans); color:var(--cm-fg-strong); letter-spacing:-0.02em; }
.cmf-preview-val .u { font:500 13px/1 var(--cm-font-mono); color:var(--cm-fg-muted); }
.cmf-preview-cap { font:500 11px/1.4 var(--cm-font-sans); color:var(--cm-fg-faint); }
.cmf-preview-empty { font:500 12px/1.4 var(--cm-font-sans); color:var(--cm-fg-faint); display:flex; align-items:center; gap:7px; }
.cmf-preview-empty .ti { font-size:16px; }
.cmf-subst { margin-top:11px; padding-top:11px; border-top:1px solid var(--cm-border-soft); display:flex; flex-direction:column; gap:5px; }
.cmf-subst .ln { font:500 11px/1.5 var(--cm-font-mono); color:var(--cm-fg-muted); }
.cmf-subst .ln b { color:var(--cm-info); font-weight:600; }
.cmf-subst .ln .eq { color:var(--cm-fg-faint); }
.cmf-help { font:500 12px/1.55 var(--cm-font-sans); color:var(--cm-fg-muted); }
.cmf-help b { color:var(--cm-fg-strong); font-weight:600; }
.cmf-help .step { display:flex; gap:9px; align-items:flex-start; padding:7px 0; }
.cmf-help .step:not(:last-child){ border-bottom:1px solid var(--cm-border-soft); }
.cmf-help .step .k { flex-shrink:0; width:20px; height:20px; border-radius:var(--cm-r-pill); display:inline-flex; align-items:center; justify-content:center;
  font:700 10px/1 var(--cm-font-mono); background:var(--cm-bg-sunk); color:var(--cm-fg-muted); }
.cmf-help .step .x { font:500 12px/1.5 var(--cm-font-sans); }
.cmf-allowed { margin-top:11px; padding-top:11px; border-top:1px solid var(--cm-border-soft); font:500 11px/1.6 var(--cm-font-sans); color:var(--cm-fg-faint); }
.cmf-allowed b { color:var(--cm-fg-muted); font-weight:600; }
.cmf-allowed code { font:600 10.5px/1 var(--cm-font-mono); color:var(--cm-fg); }

/* "+ Métrica calculada" — botón de entrada dentro de los catálogos (flyout/DD) */
.cmf-addbtn { display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; margin-top:4px; border:1.5px dashed var(--cm-border-strong);
  border-radius:var(--cm-r-3); background:transparent; color:var(--cm-fg-muted); cursor:pointer; font:600 11.5px/1 var(--cm-font-sans);
  transition:border-color var(--cm-dur-1), color var(--cm-dur-1), background var(--cm-dur-1); }
.cmf-addbtn:hover { border-color:var(--cm-info); color:var(--cm-info); background:color-mix(in oklab, var(--cm-info) 6%, transparent); }
.cmf-addbtn .ic { width:18px; height:18px; flex-shrink:0; border-radius:var(--cm-r-2); display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; background:color-mix(in oklab, var(--cm-info) 13%, transparent); color:var(--cm-info); }

/* distintivo fx (badge) + acciones editar/borrar en filas calculadas */
.cmf-fx { display:inline-flex; align-items:center; gap:2px; height:15px; padding:0 4px; border-radius:var(--cm-r-1); vertical-align:middle;
  background:color-mix(in oklab, var(--cm-info) 13%, transparent); color:var(--cm-info); font:600 8.5px/1 var(--cm-font-mono); letter-spacing:0.04em; }
.cmf-fx .ti { font-size:9px; }
.cmf-rowacts { display:flex; gap:1px; flex-shrink:0; margin-left:auto; }
.cmf-rowacts button { width:20px; height:20px; border:0; background:transparent; color:var(--cm-fg-faint); border-radius:var(--cm-r-2);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--cm-dur-1), color var(--cm-dur-1); }
.cmf-rowacts button:hover { background:var(--cm-bg-soft); color:var(--cm-fg); }
.cmf-rowacts button.del:hover { background:var(--cm-danger-bg); color:var(--cm-danger); }
.cmf-rowacts button .ti { font-size:12px; }
.bdd-field .ic.is-calc, .es-fly-row .ic.is-calc { background:color-mix(in oklab, var(--cm-info) 16%, transparent); color:var(--cm-info); }