/* ════════════════════════════════════════════════════════════════════
   pizarra.css — Pizarra táctica digital del entrenador (v29)
   Stack: SVG vanilla + pointer events + Web Animations API.
   Layout: lab-topbar (reusada) + grid 3 cols (paleta · canvas · frames).
   ════════════════════════════════════════════════════════════════════ */

/* ── Lab topbar (mismo patrón que ejercicios.css; duplicado a propósito
   para que cada página sea autocontenida) ──────────────────────────── */

body > nav.lab-topbar {
  padding: 0 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  background: var(--bg);
  border-bottom: 0.5px solid var(--border2);
}

body > nav.lab-topbar .lab-tabs,
body > nav.lab-topbar .nav-links {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body > nav.lab-topbar .lab-tab {
  color: var(--text3);
  padding: 6px 12px;
  border: 0.5px solid transparent;
  text-decoration: none;
  border-radius: 0;
  background: none;
  font-size: 11px;
  letter-spacing: 0.1em;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
body > nav.lab-topbar .lab-tab:hover {
  color: var(--text);
  background: var(--bg2);
}
body > nav.lab-topbar .lab-tab[aria-current="page"] {
  color: var(--text);
  border-color: var(--border2);
  background: var(--bg2);
}
body > nav.lab-topbar .lab-tab.nav-cta {
  background: var(--teal) !important;
  color: var(--bg) !important;
  font-weight: 500;
  border-radius: 0;
}
body > nav.lab-topbar .lab-tab.nav-cta:hover { background: var(--teal2) !important; }

body > nav.lab-topbar .nav-avatar {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  border-radius: 0;
  text-decoration: none;
}

@media (max-width: 768px) {
  body > nav.lab-topbar { padding: 0 14px; grid-template-columns: 1fr auto; }
  body > nav.lab-topbar .nav-links { display: none; }
}

/* ── Tokens locales ──────────────────────────────────────────────── */

.piz-page {
  --piz-team-a: var(--teal);
  --piz-team-b: var(--amber);
  --piz-pitch-bg-1: #1a3a1a;
  --piz-pitch-bg-2: #1f4220;
  --piz-pitch-line: #f0ede6;
  --piz-toolbar-h: 50px;
  --piz-pal-w: 220px;
  --piz-frames-w: 260px;
  /* --piz-top: desplazamiento desde el nav fijo (58px) +
     banner de ejercicio (~34px) cuando está activo.
     Se actualiza a 92px via clase .piz-page--ex (JS) */
  --piz-top: 58px;

  display: grid;
  grid-template-rows: var(--piz-toolbar-h) 1fr;
  margin-top: var(--piz-top);
  height: calc(100vh - var(--piz-top));
  height: calc(100dvh - var(--piz-top));
  background: var(--bg);
  color: var(--text);
}

/* Modo ejercicio: el banner fijo (~34px) se suma al offset del nav */
.piz-page--ex { --piz-top: 92px; }

/* Ocultar visualmente, mantener accesible */
.piz-vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Aviso móvil ─────────────────────────────────────────────────── */

.piz-mobile-warning {
  display: none;
  padding: 60px 24px;
  text-align: center;
  color: var(--text2);
  grid-row: 1 / -1;
}
.piz-mobile-warning h1 {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.005em;
  color: var(--text);
  margin: 0 0 12px;
}
.piz-mobile-warning p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto;
}

/* E.3: warning en móvil puro (< 600px); tablet 7"+ (≥ 600px) puede usar la pizarra */
@media (max-width: 599px) {
  .piz-mobile-warning {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    padding: 40px 24px;
  }
  .piz-header,
  .piz-statusbar,
  #piz-ex-banner { display: none !important; }
  .piz-page > *:not(#piz-mobile-warning) { display: none !important; }
}

/* ── Toolbar superior ─────────────────────────────────────────────── */

.piz-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--bg2);
  border-bottom: 0.5px solid var(--border2);
  overflow-x: auto;
  scrollbar-width: thin;
}

.piz-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-right: 0.5px solid var(--border);
}
.piz-toolbar-group:last-child { border-right: 0; }
.piz-toolbar-actions { margin-left: auto; position: relative; }

.piz-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 32px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text2);
  background: transparent;
  border: 0.5px solid var(--border2);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.piz-tool:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--text3);
  background: var(--bg3);
}
.piz-tool:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.piz-tool[aria-pressed="true"],
.piz-tool.is-active {
  color: var(--teal);
  border-color: var(--teal);
  background: var(--teal-bg, rgba(200,240,75,0.08));
}
.piz-tool:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.piz-tool-primary {
  color: var(--bg);
  background: var(--teal);
  border-color: var(--teal);
  font-weight: 500;
}
.piz-tool-primary:hover:not(:disabled) {
  background: var(--teal2);
  border-color: var(--teal2);
  color: var(--bg);
}
.piz-tool-danger {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 35%, var(--border2));
}
.piz-tool-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: var(--red);
  color: var(--red);
}
/* Ghost: borrar selección — sutil, no acción destructiva total */
.piz-tool-danger-ghost {
  color: var(--text2);
  border-color: var(--border2);
}
.piz-tool-danger-ghost:hover:not(:disabled) {
  color: var(--red);
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.piz-select {
  height: 32px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  cursor: pointer;
}
.piz-select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

/* ── Banda de contexto ───────────────────────────────────────────── */
.piz-context-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px;
  background: var(--bg2);
  border-bottom: 0.5px solid var(--border);
  font-size: 12px;
  font-family: var(--font-mono);
  min-height: 36px;
  position: relative;
  flex-wrap: wrap;
}

.piz-ctx-free,
.piz-ctx-match,
.piz-ctx-exercise {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.piz-ctx-icon { font-size: 13px; flex-shrink: 0; }

.piz-ctx-label {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.04em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.piz-ctx-dirty {
  color: var(--teal);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  animation: piz-pulse 1.5s ease-in-out infinite;
}
@keyframes piz-pulse { 0%,100% { opacity:1 } 50% { opacity:0.3 } }

.piz-ctx-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.piz-ctx-btn {
  height: 26px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 0.5px solid var(--border2);
  background: var(--bg3);
  color: var(--text);
  cursor: pointer;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.piz-ctx-btn:hover { background: var(--bg4, var(--bg3)); border-color: var(--teal); }
.piz-ctx-btn--primary {
  background: color-mix(in srgb, var(--teal) 15%, var(--bg3));
  border-color: color-mix(in srgb, var(--teal) 50%, var(--border2));
  color: var(--teal);
}
.piz-ctx-btn--primary:hover { background: color-mix(in srgb, var(--teal) 25%, var(--bg3)); border-color: var(--teal); }
.piz-ctx-btn--ghost { background: none; border-color: transparent; color: var(--text3); }
.piz-ctx-btn--ghost:hover { color: var(--red); border-color: var(--red); background: none; }
.piz-ctx-btn--danger { background: color-mix(in srgb, var(--red) 12%, var(--bg3)); border-color: var(--red); color: var(--red); }
.piz-ctx-btn--danger:hover { background: color-mix(in srgb, var(--red) 22%, var(--bg3)); }

/* Menú compartir — fixed para escapar del overflow-x: auto del toolbar */
.piz-share-menu {
  position: fixed;
  z-index: 200;
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: 4px;
  overflow: hidden;
  min-width: 220px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.piz-share-option {
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.1s;
}
.piz-share-option:hover { background: var(--bg3); }
.piz-share-option strong { display: block; font-size: 12px; color: var(--text); font-family: var(--font-mono); }
.piz-share-option small  { font-size: 10px; color: var(--text3); font-family: var(--font-mono); }
.piz-share-option--live strong { color: #f04b4b; }

/* Modal de vincular partido */
.piz-match-new-form { margin-top: 8px; }
.piz-match-new-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.piz-match-input {
  width: 100%;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-mono);
  padding: 7px 10px;
  border-radius: 3px;
  box-sizing: border-box;
}
.piz-match-input:focus { outline: none; border-color: var(--teal); }
.piz-match-select { cursor: pointer; }

/* Modal resultado compartir */
.piz-modal-dialog--sm { max-width: 400px; }
.piz-share-result-mode {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.piz-share-link-wrap {
  display: flex;
  gap: 6px;
}
.piz-share-link-input {
  flex: 1;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  color: var(--text);
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 7px 10px;
  border-radius: 3px;
  min-width: 0;
}
.piz-live-controls { margin-top: 14px; border-top: 0.5px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.piz-live-status { font-size: 12px; font-family: var(--font-mono); color: #f04b4b; animation: piz-pulse 1.5s ease-in-out infinite; margin: 0; }

/* ── Toggle A/B para formaciones ─────────────────────────────────── */
.piz-form-team {
  display: inline-flex;
  border: 0.5px solid var(--border2);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.piz-form-team-btn {
  padding: 0 9px;
  height: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text2);
  background: var(--bg3);
  border: none;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.piz-form-team-btn + .piz-form-team-btn {
  border-left: 0.5px solid var(--border2);
}
.piz-form-team-btn.is-active {
  color: var(--bg);
  background: var(--teal);
}
.piz-form-team-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

/* ── Color picker de equipo ──────────────────────────────────────── */
.piz-team-color {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0.5px solid var(--border2);
  border-radius: 50%;
  cursor: pointer;
  background: none;
  vertical-align: middle;
  margin-left: auto;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
}
.piz-team-color::-webkit-color-swatch-wrapper { padding: 0; }
.piz-team-color::-webkit-color-swatch { border: none; border-radius: 50%; }
.piz-team-color::-moz-color-swatch { border: none; border-radius: 50%; }
.piz-team-color:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── Layout principal: paleta · canvas · frames ───────────────────── */

.piz-layout {
  display: grid;
  grid-template-columns: var(--piz-pal-w) 1fr var(--piz-frames-w);
  min-height: 0;
  overflow: hidden;
}

/* ── Paleta izquierda ────────────────────────────────────────────── */

.piz-palette {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-right: 0.5px solid var(--border2);
  padding: 14px 12px;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
}

.piz-pal-section {
  border: 0.5px solid var(--border2);
  background: var(--bg3);
}
.piz-pal-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.piz-pal-section > summary::-webkit-details-marker { display: none; }
.piz-pal-section > summary::before {
  content: "▾";
  font-size: 9px;
  color: var(--text3);
  transition: transform 0.12s;
}
.piz-pal-section:not([open]) > summary::before { transform: rotate(-90deg); }

.piz-pal-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--text3);
}
.piz-pal-dot[data-team="A"] { background: var(--piz-team-a); }
.piz-pal-dot[data-team="B"] { background: var(--piz-team-b); }

.piz-pal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
  border-top: 0.5px solid var(--border);
}

.piz-pal-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: var(--bg);
  border: 0.5px solid var(--border2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.piz-pal-item:hover {
  border-color: var(--teal);
  background: var(--bg4);
}
.piz-pal-item:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.piz-pal-item--player[data-team="A"] {
  background: var(--piz-team-a);
  color: var(--bg);
  border-color: var(--piz-team-a);
}
.piz-pal-item--player[data-team="B"] {
  background: var(--piz-team-b);
  color: var(--bg);
  border-color: var(--piz-team-b);
}
.piz-pal-item--gk {
  position: relative;
}
.piz-pal-item--gk::after {
  content: "GK";
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 7px;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.6);
}
.piz-pal-item svg { width: 60%; height: 60%; }

.piz-pal-hint {
  margin: 6px 4px 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text3);
}

/* ── Canvas central ───────────────────────────────────────────────── */

.piz-canvas-wrap {
  position: relative;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.02), transparent 60%),
    var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-width: 0;
  min-height: 0;
}

.piz-canvas {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background: transparent;
  cursor: default;
  user-select: none;
  touch-action: none;
}
.piz-canvas:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

/* Cursor según herramienta activa */
.piz-canvas[data-tool="arrow"],
.piz-canvas[data-tool="arrow-dashed"],
.piz-canvas[data-tool="freehand"],
.piz-canvas[data-tool="trajectory"] { cursor: crosshair; }
.piz-canvas[data-tool="text"]   { cursor: text; }
.piz-canvas[data-tool="eraser"] { cursor: cell; }

/* Botón compartir en toolbar */
.piz-tool--share {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--teal, #c8f04b);
  border-color: color-mix(in srgb, var(--teal, #c8f04b) 40%, transparent);
}
.piz-tool--share:hover {
  background: color-mix(in srgb, var(--teal, #c8f04b) 12%, transparent);
  border-color: var(--teal, #c8f04b);
}

/* Pieza seleccionada: anillo destacado */
.piz-piece { transition: filter 0.12s; }
.piz-piece--bench { opacity: 0.78; }
.piz-piece--bench circle { stroke-dasharray: 5 3; }
.piz-piece:hover { filter: brightness(1.1); }
.piz-piece.piz-selected {
  filter: drop-shadow(0 0 6px var(--teal));
}

/* Anotaciones */
.piz-annotation { transition: filter 0.12s; }
.piz-annotation:hover { filter: brightness(1.2); }
.piz-annotation.piz-selected {
  filter: drop-shadow(0 0 6px var(--teal));
}

/* Editor de texto inline (HTML, posicionado absoluto sobre el canvas) */
.piz-text-editor {
  position: absolute;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg3);
  border: 0.5px solid var(--teal);
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.piz-text-editor[hidden] { display: none; }
.piz-text-editor input {
  width: 180px;
  padding: 4px 8px;
  font-family: var(--font-body, inherit);
  font-size: 13px;
  background: var(--bg);
  border: 0.5px solid var(--border2);
  color: var(--text);
}
.piz-text-editor input:focus { outline: none; border-color: var(--teal); }

/* ── Panel frames derecha ────────────────────────────────────────── */

.piz-frames {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border-left: 0.5px solid var(--border2);
  padding: 14px 12px;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.piz-frames-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.piz-frames-head h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
}
.piz-frames-head-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Fase D — botón REC */
.piz-tool--rec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-muted, #888);
  border: 1px solid var(--border, #333);
  background: transparent;
  padding: 4px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.piz-tool--rec:hover {
  color: var(--red, #ff4545);
  border-color: var(--red, #ff4545);
}
.piz-tool--rec.is-active {
  color: var(--red, #ff4545);
  border-color: var(--red, #ff4545);
  background: color-mix(in srgb, var(--red, #ff4545) 12%, transparent);
  animation: piz-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes piz-rec-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

.piz-frames-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}
.piz-frame {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text2);
  transition: border-color 0.12s, background 0.12s;
}
.piz-frame:hover { border-color: var(--text3); background: var(--bg4); color: var(--text); }
.piz-frame:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.piz-frame.is-current {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-bg, rgba(200,240,75,0.08));
}
.piz-frame-num {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: inherit;
}
.piz-frame-label {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.piz-frame-del {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  background: transparent;
  border: 0;
  padding: 2px 6px;
  color: var(--text3);
  cursor: pointer;
}
.piz-frame-del:hover { color: var(--red); }

.piz-frames-controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding-top: 8px;
  border-top: 0.5px solid var(--border);
}
.piz-frames-controls .piz-tool { padding: 0 4px; min-width: 0; font-size: 14px; }

.piz-frames-speed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 0.5px solid var(--border);
}
.piz-frames-speed label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
}
.piz-frames-speed label span { color: var(--text); }
.piz-frames-speed input[type="range"] {
  width: 100%;
  accent-color: var(--teal);
}

/* ── Toast ─────────────────────────────────────────────────────────── */

.piz-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg4, var(--bg3));
  border: 0.5px solid var(--border2);
  padding: 10px 20px;
  font-size: 13px;
  color: var(--text);
  z-index: 500;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space: nowrap;
}
.piz-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Responsive: tablet (oculta panel frames si poco espacio) ──── */

@media (max-width: 1100px) {
  .piz-page { --piz-pal-w: 180px; --piz-frames-w: 220px; }
}
@media (max-width: 900px) {
  .piz-layout { grid-template-columns: var(--piz-pal-w) 1fr; }
  .piz-frames { display: none; }
}

/* ── v9: Modal "Mis pizarras" ───────────────────────────────────── */

.piz-mypiz-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.piz-mypiz-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  border-radius: 4px;
  transition: border-color 0.12s, background 0.12s;
}
.piz-mypiz-item:hover { border-color: var(--text3); background: var(--bg4); }
.piz-mypiz-item--live { border-color: color-mix(in srgb, var(--red) 35%, var(--border2)); }
.piz-mypiz-item-info { min-width: 0; }

/* Título pizarra: wrap contenedor */
.piz-mypiz-title-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
/* Texto (display mode) — .piz-mypiz-title se mantiene para el filtro de búsqueda */
.piz-mypiz-title-text {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.03em;
  padding: 1px 2px;
}
.piz-mypiz-title-text.is-placeholder { color: var(--text3); font-style: italic; font-weight: 400; }
/* Lápiz (aparece al hover del item) */
.piz-mypiz-pencil-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1;
  transition: opacity .15s, color .12s;
}
.piz-mypiz-item:hover .piz-mypiz-pencil-btn,
.piz-mypiz-item:focus-within .piz-mypiz-pencil-btn { opacity: 1; }
.piz-mypiz-pencil-btn:hover { color: var(--text); }
/* Input (edit mode) */
.piz-mypiz-title-input {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--teal);
  background: transparent;
  outline: none;
  min-width: 0;
  padding: 1px 2px;
  letter-spacing: 0.03em;
}
.piz-mypiz-title-input::placeholder { color: var(--text3); font-style: italic; }
/* Botón guardar (compartido mis pizarras y jugadas) */
.piz-mypiz-save-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--teal);
  background: none;
  border: 0.5px solid var(--teal);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
  transition: background .12s;
}
.piz-mypiz-save-btn:hover { background: color-mix(in srgb, var(--teal) 12%, var(--bg3)); }
.piz-mypiz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.04em;
}
.piz-mypiz-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 0.5px solid var(--border2);
  border-radius: 3px;
  text-transform: uppercase;
}
.piz-mypiz-badge--match    { color: var(--teal);  border-color: color-mix(in srgb, var(--teal)  35%, var(--border2)); }
.piz-mypiz-badge--exercise { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, var(--border2)); }
.piz-mypiz-badge--live     { color: var(--red);   border-color: var(--red); animation: piz-pulse 1.5s ease-in-out infinite; }
@keyframes piz-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

.piz-mypiz-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.piz-mypiz-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: transparent;
  color: var(--text2);
  border: 0.5px solid var(--border2);
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.piz-mypiz-btn:hover { color: var(--text); border-color: var(--text3); background: var(--bg4); }
.piz-mypiz-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.piz-mypiz-btn--load:hover { color: var(--teal); border-color: var(--teal); }
.piz-mypiz-btn--stop {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 50%, var(--border2));
}
.piz-mypiz-btn--stop:hover {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border-color: var(--red);
}
.piz-mypiz-btn--del { color: color-mix(in srgb, var(--red) 80%, var(--text2)); }
.piz-mypiz-btn--del:hover { color: var(--red); border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.piz-mypiz-btn--dup:hover { color: var(--teal); border-color: var(--teal); }
.piz-mypiz-btn--assign:hover { color: var(--amber); border-color: var(--amber); }

/* Panel "Asignar a…" que se despliega bajo la fila */
.piz-mypiz-assign-panel {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px 6px;
  border-top: 0.5px solid var(--border);
  background: var(--bg3);
}
.piz-mypiz-assign-opt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 3px;
  border: 0.5px solid var(--border2);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.piz-mypiz-assign-opt:hover { color: var(--text); border-color: var(--text3); background: var(--bg4); }
.piz-mypiz-assign-opt:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

/* Selector de equipo en modal vincular partido (cuando hay varios equipos) */
.piz-match-team-sel-wrap { padding: 4px 0 8px; }
.piz-match-team-sel {
  width: 100%;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  cursor: pointer;
}
.piz-match-team-sel:focus { border-color: var(--teal); }

.piz-mypiz-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text3);
  font-size: 12px;
}

/* ── v3: Banner modo ejercicio ──────────────────────────────────── */

.piz-ex-banner {
  position: fixed;
  top: 58px;
  left: 0;
  right: 0;
  z-index: 95; /* por debajo del nav global (z-index 100) */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: color-mix(in srgb, var(--teal) 12%, var(--bg2));
  border-bottom: 0.5px solid color-mix(in srgb, var(--teal) 30%, var(--border2));
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text2);
}
.piz-ex-banner-label { color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; }
.piz-ex-banner-title { color: var(--teal); font-weight: 500; }
.piz-ex-banner a.piz-back-link {
  margin-left: auto;
  color: var(--text3);
  font-size: 11px;
  text-decoration: none;
}
.piz-ex-banner a.piz-back-link:hover { color: var(--text); }

/* ── v3: Modales (overlay + dialog) ────────────────────────────── */

.piz-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
}
.piz-modal-overlay[hidden] { display: none; }

.piz-modal-dialog {
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: 6px;
  box-sizing: border-box;
  width: 100%;
  max-width: min(480px, 100%);
  max-height: calc(100dvh - 32px);
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.piz-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}
.piz-modal-header h2 {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.piz-modal-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.piz-modal-close:hover { color: var(--text); }

.piz-modal-body {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Búsqueda en modal de ejercicios */
.piz-ex-search {
  width: 100%;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  border-radius: 3px;
  box-sizing: border-box;
}
.piz-ex-search:focus { border-color: var(--teal); }

.piz-ex-status {
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-mono);
}

.piz-ex-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.piz-ex-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border: 0.5px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  background: var(--bg3);
  transition: background 0.1s, border-color 0.1s;
}
.piz-ex-item:hover, .piz-ex-item:focus {
  background: var(--bg4, var(--bg3));
  border-color: var(--teal);
  outline: none;
}
.piz-ex-item-title {
  font-size: 13px;
  color: var(--text);
}
.piz-ex-item-cat {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Modal importar plantilla */
.piz-import-team-select {
  width: 100%;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 3px;
}
.piz-import-players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}
.piz-import-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 12px;
}
.piz-import-player:nth-child(odd) { background: var(--bg3); }
.piz-import-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--teal);
  min-width: 24px;
  text-align: right;
}
.piz-import-name { color: var(--text); }

.piz-import-status {
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-mono);
}

.piz-import-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  border-top: 0.5px solid var(--border);
}
.piz-import-actions .piz-import-action-btn {
  width: 100%;
  padding: 9px 14px;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  color: var(--text);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 3px;
  text-align: left;
  transition: background 0.1s, border-color 0.1s;
}
.piz-import-actions .piz-import-action-btn:hover {
  background: var(--bg4, var(--bg3));
  border-color: var(--teal);
}
.piz-import-actions .piz-import-action-btn strong {
  display: block;
  color: var(--teal);
  margin-bottom: 2px;
  font-size: 12px;
}
.piz-import-actions .piz-import-action-btn small {
  color: var(--text3);
  font-size: 10px;
}

/* Selección de jugadores en modal importar */
.piz-import-player {
  cursor: pointer;
  user-select: none;
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.piz-import-player:focus-visible { outline: 1px solid var(--teal); outline-offset: -1px; }
.piz-import-player.is-selected {
  background: rgba(200, 240, 75, 0.08) !important;
  border-left-color: var(--teal);
}
.piz-import-check {
  width: 13px;
  height: 13px;
  border: 1px solid var(--border2);
  border-radius: 2px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: transparent;
  background: var(--bg2);
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.piz-import-player.is-selected .piz-import-check {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--bg, #080807);
}

/* Barra de selección rápida */
.piz-import-sel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 2px;
  font-size: 11px;
  color: var(--text3);
}
.piz-import-sel-count { font-family: var(--font-mono); }
.piz-import-sel-btns  { display: flex; gap: 6px; }
.piz-import-sel-btn {
  background: none;
  border: 0.5px solid var(--border2);
  color: var(--text3);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: border-color 0.1s, color 0.1s;
}
.piz-import-sel-btn:hover { border-color: var(--teal); color: var(--teal); }

/* Botón importar plantilla en paleta */
.piz-pal-import-btn {
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--teal) 10%, var(--bg3));
  border: 0.5px solid color-mix(in srgb, var(--teal) 35%, var(--border));
  color: var(--teal);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.12s, border-color 0.12s;
}
.piz-pal-import-btn:hover {
  background: color-mix(in srgb, var(--teal) 18%, var(--bg3));
  border-color: var(--teal);
}

/* Fila de color dentro del details (fuera de summary) */
.piz-pal-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 2px;
}
.piz-pal-color-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text3);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  user-select: none;
}
.piz-team-color {
  width: 28px;
  height: 20px;
  border: 0.5px solid var(--border2);
  border-radius: 3px;
  padding: 1px;
  background: none;
  cursor: pointer;
}
.piz-team-color::-webkit-color-swatch-wrapper { padding: 0; }
.piz-team-color::-webkit-color-swatch { border: none; border-radius: 2px; }
.piz-team-color::-moz-color-swatch { border: none; border-radius: 2px; }

/* Lista de partidos (modal Vincular partido). El antiguo modal "Guardar
   alineación" ya no existe pero estas clases las reusa el modal Vincular. */
.piz-lineup-save-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.piz-lineup-save-or {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-mono);
  margin: 6px 0 2px;
  letter-spacing: 0.06em;
}

.piz-lineup-match-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: 0.5px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  background: var(--bg3);
  transition: background 0.1s, border-color 0.1s;
}
.piz-lineup-match-item:hover,
.piz-lineup-match-item:focus { background: var(--bg4, var(--bg3)); border-color: var(--teal); outline: none; }
.piz-lineup-match-item.is-active { border-color: var(--teal); }

.piz-lineup-match-label {
  font-size: 12px;
  color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.piz-lineup-match-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
}
.piz-lineup-match-item.is-active .piz-lineup-match-badge { color: var(--teal); }

.piz-lineup-match-empty {
  font-size: 12px;
  color: var(--text3);
  font-family: var(--font-mono);
  padding: 8px 0;
}

/* ── v13: E.1 Botón selección múltiple ──────────────────────────── */

.piz-tool--multiselect {
  gap: 5px;
}
.piz-tool--multiselect[aria-pressed="true"],
.piz-tool--multiselect.is-active {
  color: var(--teal);
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
}
.piz-multisel-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: inherit;
  white-space: nowrap;
}

/* ── v13: E.2 Botón ayuda ───────────────────────────────────────── */

.piz-tool--help {
  font-weight: 600;
  font-size: 13px;
  min-width: 30px;
  padding: 0 8px;
}

/* ── v13: E.2 Modal de ayuda ────────────────────────────────────── */

.piz-modal-dialog--help {
  max-width: 520px;
}
.piz-help-body {
  gap: 12px;
}
.piz-help-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 0.5px solid var(--border);
}
.piz-help-section-title:first-child { margin-top: 0; }
.piz-help-list {
  padding: 0 0 0 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.piz-help-list li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text2);
}
.piz-help-table {
  border-collapse: collapse;
  width: 100%;
}
.piz-help-table tr + tr td { border-top: 0.5px solid var(--border); }
.piz-help-table td {
  padding: 5px 8px 5px 0;
  font-size: 12px;
  vertical-align: top;
  color: var(--text2);
}
.piz-help-key {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--teal);
  white-space: nowrap;
  padding-right: 14px;
  letter-spacing: 0.04em;
}

/* ── v13: E.3 Targets táctiles ≥40px (pointer: coarse = pantallas táctiles) */

@media (pointer: coarse) {
  /* Herramientas de toolbar */
  .piz-tool {
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
  }
  .piz-toolbar-group { gap: 6px; padding: 0 10px; }

  /* Paleta: botones de piezas */
  .piz-pal-item {
    min-width: 40px;
    min-height: 40px;
  }
  .piz-pal-grid { gap: 6px; padding: 10px; }

  /* Botones de paleta (importar) */
  .piz-pal-import-btn { padding: 10px 12px; }

  /* Botones de contexto */
  .piz-ctx-btn {
    min-height: 38px;
    padding: 0 14px;
  }

  /* Panel frames */
  .piz-frame { padding: 10px 12px; }
  .piz-frame-del { padding: 4px 10px; font-size: 16px; }
  .piz-frames-controls .piz-tool { min-height: 40px; }

  /* Botones de modales */
  .piz-mypiz-btn { padding: 8px 14px; min-height: 36px; }
  .piz-import-action-btn { padding: 12px 14px; }
  .piz-import-sel-btn   { padding: 5px 12px; }
  .piz-ctx-btn--ghost   { min-height: 38px; width: 38px; }

  /* Separar items de la paleta para evitar fat-finger */
  .piz-pal-section > summary { padding: 10px 12px; min-height: 40px; }

  /* Toolbar: select y color tiene más espacio */
  .piz-select { height: 40px; padding: 0 12px; }

  /* Scroll de toolbar más cómodo */
  .piz-toolbar { gap: 6px; padding: 0 10px; }
  /* Panel de trayectorias: tamaño cómodo en táctil */
  .piz-traj-panel { gap: 12px; padding: 10px 18px; }
  /* Panel de conectar piezas: ancho completo en táctil */
  .piz-link-panel { max-width: min(100%, calc(100% - 32px)); }
}

/* ── v15: Fase B — Borrador: hover highlight ────────────────────────── */

/* Anotación bajo el cursor del borrador: se tiñe de rojo */
#piz-annotations .piz-eraser-hover line,
#piz-annotations .piz-eraser-hover polyline,
#piz-annotations .piz-eraser-hover path {
  stroke: var(--red, #ff4545) !important;
}
#piz-annotations .piz-eraser-hover text {
  fill: var(--red, #ff4545) !important;
}
.piz-eraser-hover { opacity: 0.72; }

/* ── v14: Fase C — Popover filtros de selección ─────────────────────── */

.piz-sel-filter-popover {
  position: fixed;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.piz-sel-filter-popover[hidden] { display: none; }

.piz-sel-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  border-radius: 4px;
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.piz-sel-filter-chip:hover { background: var(--bg4, var(--bg3)); border-color: var(--teal); color: var(--teal); }
.piz-sel-filter-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.piz-sel-filter-chip-label { font-weight: 500; }
.piz-sel-filter-chip-count { color: var(--text3); font-size: 10px; }

/* ── v14: Fase A — Panel de trayectorias ───────────────────────────── */

.piz-traj-panel {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg2);
  border: 0.5px solid var(--teal);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  /* Asegurar que no bloquee eventos al canvas cuando está oculto */
  pointer-events: auto;
}
.piz-traj-panel[hidden] { display: none; }

.piz-traj-instr {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text2);
  min-width: 0;
}

/* ── Panel: Conectar piezas ──────────────────────────────────────── */
.piz-link-panel {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 0.5px solid #ff8c00;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  min-width: 220px;
  max-width: 340px;
  pointer-events: auto;
}
.piz-link-panel[hidden] { display: none; }

.piz-link-instr {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text2);
  line-height: 1.4;
}

.piz-link-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.piz-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.piz-link-row-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text1);
  min-width: 32px;
}

.piz-link-row-sel {
  flex: 1;
  background: var(--bg3, var(--bg2));
  border: 0.5px solid var(--border, rgba(255,255,255,.15));
  border-radius: 4px;
  color: var(--text1);
  font-size: 11px;
  padding: 2px 4px;
}

.piz-link-style-row { margin-bottom: 2px; }

.piz-link-style-btns {
  display: flex;
  gap: 4px;
}

.piz-link-style-btn {
  flex: 1;
  padding: 3px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--bg3, rgba(255,255,255,.06));
  border: 0.5px solid rgba(255,255,255,.15);
  border-radius: 4px;
  color: var(--text2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.piz-link-style-btn[aria-pressed="true"] {
  background: rgba(255, 140, 0, 0.22);
  border-color: rgba(255, 140, 0, 0.5);
  color: #ff8c00;
  font-weight: 600;
}

/* Fila de botones del panel */
.piz-link-panel > .piz-tool,
.piz-link-panel > .piz-tool-primary,
.piz-link-panel > .piz-tool-danger {
  align-self: stretch;
}

/* Botón "Conectar piezas" en toolbar — tint naranja cuando está activo */
#piz-tool-link[aria-pressed="true"] {
  background: rgba(255, 140, 0, 0.18);
  color: #ff8c00;
  border-color: rgba(255, 140, 0, 0.4);
}

/* ════════════════════════════════════════════════════════════════════
   R1 — REDISEÑO VISUAL (v17)
   Nuevo layout: header fijo + canvas full-bleed + flotantes.
   Todas las reglas están bajo body.piz-app para no afectar otros layouts.
   ════════════════════════════════════════════════════════════════════ */

/* ── R1.1 Ocultar nav heredada y anular padding global del body ──── */

body.piz-app > nav.lab-topbar,
body.piz-app > .nav-mobile-menu {
  display: none !important;
}

/* style.css base body reserva padding-top:var(--nav-h) y 16px horizontales
   para el nav global del proyecto. Pizarra usa pantalla completa con su
   propio header → anulamos los 4 paddings. (Bug sesión 66 unificación nav:
   pizarra perdió la anulación y la timeline en bottom:0 caía 58px fuera). */
body.piz-app {
  padding: 0;
}

/* ── R1.2 Header pizarra ────────────────────────────────────────── */

.piz-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 50px;
  z-index: 120;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--bg2);
  border-bottom: 0.5px solid var(--border2);
}

.piz-header-left {
  display: flex;
  align-items: center;
}

.piz-header-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
}

.piz-header-brand {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  white-space: nowrap;
}

.piz-header-sep { color: var(--text3); margin: 0 2px; }

.piz-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.piz-header-right {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ── R1.3 Context pills ─────────────────────────────────────────── */

.piz-ctx-pill-wrap {
  position: relative;
  display: inline-flex;
}

.piz-ctx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0.5px solid var(--border2);
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  border-radius: 14px;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.piz-ctx-pill:hover { color: var(--text); border-color: var(--text3); }
.piz-ctx-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.piz-ctx-pill--match {
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 45%, var(--border2));
  background: color-mix(in srgb, var(--teal) 8%, var(--bg3));
}
.piz-ctx-pill--exercise {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, var(--border2));
  background: color-mix(in srgb, var(--amber) 8%, var(--bg3));
}

.piz-ctx-pill-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: 6px;
  overflow: hidden;
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
}
.piz-ctx-pill-menu[hidden] { display: none; }

.piz-ctx-pill-action {
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.piz-ctx-pill-action:hover { background: var(--bg3); color: var(--text); }
.piz-ctx-pill-action:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.piz-ctx-pill-action--primary { color: var(--teal); }
.piz-ctx-pill-action--primary:hover { background: color-mix(in srgb, var(--teal) 10%, var(--bg3)); }
.piz-ctx-pill-action--danger  { color: var(--red); }
.piz-ctx-pill-action--danger:hover  { background: color-mix(in srgb, var(--red) 10%, var(--bg3)); }

/* ── R1.4 Header buttons ────────────────────────────────────────── */

.piz-hbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0.5px solid transparent;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.piz-hbtn:hover { color: var(--text); background: var(--bg3); border-color: var(--border2); }
.piz-hbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.piz-hbtn[hidden] { display: none; }

.piz-hbtn--icon { padding: 0 8px; min-width: 32px; justify-content: center; }
.piz-hbtn--search { border-color: var(--border2); }

.piz-hbtn--share {
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 35%, transparent);
}
.piz-hbtn--share:hover {
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  border-color: var(--teal);
  color: var(--teal);
}

.piz-hbtn-kbd {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text3);
  border: 0.5px solid var(--border2);
  border-radius: 3px;
  padding: 1px 4px;
  line-height: 1.4;
}

.piz-hbtn-share-wrap,
.piz-hbtn-overflow-wrap { position: relative; }

.piz-header-overflow {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 150;
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: 6px;
  overflow: hidden;
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.piz-header-overflow[hidden] { display: none; }

.piz-header-overflow-item {
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.piz-header-overflow-item:hover { background: var(--bg3); color: var(--text); }
.piz-header-overflow-danger { color: var(--red); }
.piz-header-overflow-danger:hover {
  background: color-mix(in srgb, var(--red) 10%, var(--bg3));
  color: var(--red);
}

/* ── R1.5 Main: override al layout antiguo ──────────────────────── */

.piz-app .piz-page {
  --piz-tl-h: 60px;

  margin-top: 50px;           /* alto del header */
  height: calc(100dvh - 50px);
  /* Override del grid de 2 filas (toolbar + layout) */
  display: block;
  position: relative;
  overflow: hidden;
}

/* Ex-banner: reposicionar bajo el nuevo header */
.piz-app .piz-ex-banner { top: 50px; }

/* ── R1.6 Canvas fill absoluto ──────────────────────────────────── */

.piz-app .piz-canvas-wrap {
  position: absolute;
  inset: 0;
  bottom: var(--piz-tl-h);
  padding: 16px;
  /* Neutralizar los flex-center heredados */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── R1.7 Panel flotante sup-izq: tipo de campo + formación ─────── */

.piz-field-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  border: 0.5px solid var(--border2);
  border-radius: 6px;
  padding: 8px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* ── Fieldtype dropdown ─────────────────────────────────────────── */
.piz-fieldtype-seg {
  position: relative;
}

.piz-fieldtype-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}
.piz-fieldtype-trigger:hover { border-color: var(--text3); color: var(--text); }
.piz-fieldtype-trigger[aria-expanded="true"] { border-color: var(--teal); }
.piz-fieldtype-trigger:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.piz-fieldtype-chev {
  font-size: 9px;
  color: var(--text3);
  transition: transform 0.15s;
  line-height: 1;
}
.piz-fieldtype-trigger[aria-expanded="true"] .piz-fieldtype-chev { transform: scaleY(-1); }

.piz-fieldtype-dropdown {
  position: fixed;   /* escapa el stacking context del statusbar fixed */
  z-index: 200;      /* top/left calculados por JS via getBoundingClientRect */
  list-style: none;
  margin: 0;
  padding: 3px;
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  width: 12%;
  min-width: 80px;
}

.piz-fieldtype-opt {
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.piz-fieldtype-opt:hover { background: var(--bg3); color: var(--text2); }
.piz-fieldtype-opt.is-active { color: var(--teal); }
.piz-fieldtype-opt:focus-visible { outline: 2px solid var(--teal); outline-offset: -1px; }

.piz-formation-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Select compacto para formación dentro del panel */
.piz-select-sm {
  height: 26px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  border-radius: 3px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.piz-select-sm:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

/* Botón ↻ actualizar posiciones */
.piz-panel-btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  border-radius: 3px;
  color: var(--text2);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  flex-shrink: 0;
}
.piz-panel-btn:hover:not(:disabled) { color: var(--teal); border-color: var(--teal); }
.piz-panel-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.piz-panel-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

/* ── R1.8 Badge de frame (sup-der) ─────────────────────────────── */

.piz-frame-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  border: 0.5px solid var(--border2);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── R1.9 Dock vertical de herramientas ─────────────────────────── */

.piz-dock {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(2, 36px);
  gap: 2px;
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  border: 0.5px solid var(--border2);
  border-radius: 8px;
  padding: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Override .piz-tool dentro del dock */
.piz-dock .piz-tool {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 5px;
  border-color: transparent;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.piz-dock .piz-tool:hover:not(:disabled) {
  border-color: var(--border2);
  background: var(--bg3);
}
.piz-dock .piz-tool[aria-pressed="true"],
.piz-dock .piz-tool.is-active {
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--teal);
}

.piz-dock-sep {
  grid-column: 1 / -1;   /* span de las 2 columnas */
  height: 0.5px;
  background: var(--border2);
  margin: 1px 0;
}

.piz-dock-key {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  color: var(--text3);
  line-height: 1;
}

/* ── R1.10 FAB + popover de paleta ──────────────────────────────── */

.piz-fab {
  position: absolute;
  bottom: calc(var(--piz-tl-h) + 12px);
  left: 12px;
  z-index: 60;
  height: 34px;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--bg);
  background: var(--teal);
  border: none;
  border-radius: 17px;
  cursor: pointer;
  transition: background 0.12s, transform 0.1s;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.piz-fab:hover {
  background: color-mix(in srgb, var(--teal) 80%, white);
  transform: translateY(-1px);
}
.piz-fab:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.piz-fab-popover {
  position: absolute;
  bottom: calc(var(--piz-tl-h) + 54px);
  left: 12px;
  z-index: 70;
  width: 268px;
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.piz-fab-popover[hidden] { display: none; }

.piz-fab-tabs {
  display: flex;
  border-bottom: 0.5px solid var(--border2);
}

.piz-fab-tab {
  flex: 1;
  height: 34px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text3);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  margin-bottom: -0.5px; /* solapar borde */
}
.piz-fab-tab + .piz-fab-tab { border-left: 0.5px solid var(--border2); }
.piz-fab-tab.is-active,
.piz-fab-tab[aria-selected="true"] { color: var(--teal); border-bottom-color: var(--teal); }
.piz-fab-tab:hover:not(.is-active):not([aria-selected="true"]) { color: var(--text2); }
.piz-fab-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

.piz-fab-panel { padding: 10px; }
.piz-fab-panel[hidden] { display: none; }

.piz-fab-footer {
  border-top: 0.5px solid var(--border2);
  padding: 8px;
}

.piz-fab-formation-btn {
  width: 100%;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, var(--bg3));
  border: 0.5px solid color-mix(in srgb, var(--teal) 35%, var(--border));
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.piz-fab-formation-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--teal) 15%, var(--bg3));
  border-color: var(--teal);
}
.piz-fab-formation-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── R1.11 Timeline horizontal de frames ────────────────────────── */

.piz-timeline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--piz-tl-h, 60px);
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--bg2);
  border-top: 0.5px solid var(--border2);
}

.piz-tl-left,
.piz-tl-right {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.piz-tl-center {
  min-width: 0;
  overflow: hidden;
}

/* Lista de frames horizontal dentro del timeline */
.piz-timeline .piz-frames-list {
  display: flex;
  flex-direction: row;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding: 4px 0;
  /* Neutralizar herencia del layout vertical */
  max-height: unset;
  flex: unset;
  min-height: unset;
}

/* Frame compacto en modo timeline */
.piz-timeline .piz-frame {
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 5px 8px;
  gap: 2px;
  flex-shrink: 0;
}
.piz-timeline .piz-frame-num  { font-size: 14px; }
.piz-timeline .piz-frame-label { font-size: 9px; }
.piz-timeline .piz-frame-del  { font-size: 11px; padding: 1px 3px; }

/* Botones de la timeline */
.piz-tl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 5px;
  font-size: 12px;
  background: transparent;
  border: 0.5px solid transparent;
  color: var(--text2);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.1s, background 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.piz-tl-btn:hover { color: var(--text); background: var(--bg3); border-color: var(--border2); }
.piz-tl-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.piz-tl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.piz-tl-btn--play { color: var(--teal); }
.piz-tl-btn--capture {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 0 10px;
  border-color: var(--border2);
}
.piz-tl-btn--capture:hover { border-color: var(--teal); color: var(--teal); }

.piz-tl-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text3);
  letter-spacing: 0.04em;
  margin: 0 3px;
  white-space: nowrap;
}
.piz-tl-sep { color: var(--border2); margin: 0 1px; }

.piz-tl-speed-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  white-space: nowrap;
  margin-left: 4px;
}

.piz-tl-speed {
  width: 64px;
  accent-color: var(--teal);
}

/* ── R1.12 Mobile warning en modo app ───────────────────────────── */

@media (max-width: 600px) {
  .piz-app .piz-field-panel,
  .piz-app .piz-frame-badge,
  .piz-app .piz-dock,
  .piz-app .piz-fab,
  .piz-app .piz-fab-popover,
  .piz-app .piz-timeline { display: none; }
}

/* ── R1.13 Responsive header ────────────────────────────────────── */

@media (max-width: 900px) {
  .piz-header-brand { display: none; }
  .piz-hbtn-label   { display: none; }
  .piz-hbtn-kbd     { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   R2 — MODO PARTIDO (v18)
   Activado con body.piz-r2 cuando _ctxMatchId != null.
   Sub-vistas: body.piz-sv-plantilla / piz-sv-jugadas / piz-sv-live.
   ════════════════════════════════════════════════════════════════════ */

/* Tokens R2 */
.piz-app {
  --piz-r2-red-1:    #5C1818;
  --piz-r2-red-2:    #3D0F0F;
  --piz-r2-gold:     #F4CC31;
  --piz-r2-gold-dim: #C4A020;
  --piz-r2-cream:    #F4EBD0;
  --piz-r2-ink:      #0a0a08;
  --piz-marquee-h:   88px;
}

/* ── R2.1 Cambio de chrome (v22): el header sigue SIEMPRE visible con
   los mismos botones y handlers que en R1. En R2 cambia visualmente al
   tema rojo lacado + dorado, y debajo aparece una franja-marquesina con
   solo info del partido vinculado + botón EN VIVO. ──────────────── */

.piz-marquee {
  display: none;          /* oculta por defecto */
  flex-direction: column;
  position: fixed;
  top: var(--piz-header-h, 50px);   /* debajo del header, que sigue visible */
  left: 0; right: 0;
  height: var(--piz-marquee-h);
  z-index: 120;
  background: linear-gradient(135deg, var(--piz-r2-red-1) 0%, var(--piz-r2-red-2) 100%);
}
body.piz-r2 .piz-marquee { display: flex; }

/* Cuerpo de la marquesina */
.piz-marquee-body {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  min-height: 0;
}

/* Franja dorada inferior */
.piz-marquee-stripe {
  height: 4px;
  background: var(--piz-r2-gold);
  flex-shrink: 0;
}

/* ── R2.2 Marquesina — sección izquierda ────────────────────────── */

.piz-marquee-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Escudo pentagonal placeholder */
.piz-marquee-shield {
  width: 48px;
  height: 54px;
  background: var(--piz-r2-gold);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#piz-marquee-shield-initials {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--piz-r2-ink);
  letter-spacing: 0.06em;
}

.piz-marquee-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.piz-marquee-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--piz-r2-gold);
  opacity: 0.7;
}
.piz-marquee-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--piz-r2-cream);
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.piz-marquee-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--piz-r2-cream);
  opacity: 0.65;
  margin: 0;
  white-space: nowrap;
}

/* ── R2.3 Marquesina — rodillo central (sub-vistas) ─────────────── */

.piz-marquee-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.piz-r2-subview-bar {
  display: inline-flex;
  background: rgba(0,0,0,0.3);
  border: 0.5px solid rgba(244,204,49,0.25);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}

.piz-r2-sv-btn {
  height: 28px;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: rgba(244,235,208,0.55);
  cursor: pointer;
  border-radius: 16px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.piz-r2-sv-btn:hover:not(:disabled):not(.is-active) {
  color: var(--piz-r2-cream);
}
.piz-r2-sv-btn.is-active,
.piz-r2-sv-btn[aria-selected="true"] {
  background: var(--piz-r2-gold);
  color: var(--piz-r2-ink);
  font-weight: 600;
}
.piz-r2-sv-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.piz-r2-sv-btn:focus-visible { outline: 2px solid var(--piz-r2-gold); outline-offset: 2px; }

/* ── R2.4 Marquesina — acciones derecha ─────────────────────────── */

.piz-marquee-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.piz-marquee-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0.5px solid rgba(244,204,49,0.35);
  background: transparent;
  color: var(--piz-r2-cream);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.piz-marquee-btn:hover {
  background: rgba(244,204,49,0.12);
  border-color: var(--piz-r2-gold);
  color: var(--piz-r2-gold);
}
.piz-marquee-btn:focus-visible { outline: 2px solid var(--piz-r2-gold); outline-offset: 1px; }
.piz-marquee-btn--icon { padding: 0 8px; min-width: 32px; justify-content: center; }
.piz-marquee-btn--share {
  background: var(--piz-r2-gold);
  color: var(--piz-r2-ink);
  border-color: var(--piz-r2-gold);
  font-weight: 600;
}
.piz-marquee-btn--share:hover {
  background: color-mix(in srgb, var(--piz-r2-gold) 85%, white);
  border-color: var(--piz-r2-gold);
  color: var(--piz-r2-ink);
}
.piz-marquee-btn--unlink {
  color: rgba(244,235,208,0.5);
  border-color: transparent;
}
.piz-marquee-btn--unlink:hover {
  color: var(--red);
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

/* ── R2.5 Page offset para la marquesina (regla v18) ──────────────── */
/* IMPORTANTE: la regla v20 del bloque final reemplaza esta cuando body
 * tiene .piz-r2 + .piz-app, sin !important. Mantengo este comentario
 * por trazabilidad. */

/* Ex-banner en R2 */
body.piz-r2 .piz-ex-banner { top: var(--piz-marquee-h); }

/* ── R2.6 Banquillo ─────────────────────────────────────────────── */

.piz-bench {
  position: absolute;
  left: 0;
  top: 0;
  bottom: var(--piz-tl-h, 60px);
  width: 280px;
  z-index: 52;
  display: none;          /* oculto por defecto */
  flex-direction: column;
  background: color-mix(in srgb, var(--bg2) 96%, transparent);
  border-right: 0.5px solid var(--border2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

/* v20: Banquillo siempre visible en R2 (sub-vistas eliminadas) */
body.piz-r2 .piz-bench { display: flex; }

/* Cabecera del banquillo */
.piz-bench-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--border2);
  flex-shrink: 0;
}
.piz-bench-toggle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0.5px solid var(--border2);
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.1s, border-color 0.1s;
}
.piz-bench-toggle:hover { color: var(--piz-r2-gold); border-color: var(--piz-r2-gold); }
.piz-bench-head-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.piz-bench-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
}
.piz-bench-sys {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--piz-r2-gold);
  font-weight: 500;
}

/* Tabs A/B */
.piz-bench-tabs {
  display: flex;
  border-bottom: 0.5px solid var(--border2);
  flex-shrink: 0;
}
.piz-bench-tab {
  flex: 1;
  height: 32px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text3);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  margin-bottom: -0.5px;
}
.piz-bench-tab + .piz-bench-tab { border-left: 0.5px solid var(--border2); }
.piz-bench-tab.is-active,
.piz-bench-tab[aria-selected="true"] { color: var(--piz-r2-gold); border-bottom-color: var(--piz-r2-gold); }
.piz-bench-tab:focus-visible { outline: 2px solid var(--piz-r2-gold); outline-offset: -2px; }
.piz-bench-tab-count {
  color: var(--text3);
  margin-left: 3px;
  font-size: 9px;
}

/* Paneles de equipo */
.piz-bench-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
  padding: 8px 0;
}
.piz-bench-panel[hidden] { display: none; }

.piz-bench-section-title {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 4px 12px 2px;
  margin: 0;
}
.piz-bench-subs-title { margin-top: 10px; }

/* Lista de jugadores */
.piz-bench-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.piz-bench-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  transition: background 0.1s;
  position: relative;
}
.piz-bench-player:hover { background: var(--bg3); }

.piz-bench-num {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--piz-r2-gold);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}
.piz-bench-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--piz-r2-cream);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.piz-bench-remove {
  display: none;
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}
.piz-bench-player:hover .piz-bench-remove { display: block; }
.piz-bench-remove:hover { color: var(--red); }

/* Suplentes: num más pequeño */
.piz-bench-list--subs .piz-bench-num { font-size: 16px; color: var(--text3); }
.piz-bench-list--subs .piz-bench-name { color: var(--text2); }

/* Pie del banquillo */
.piz-bench-footer {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 0.5px solid var(--border2);
  flex-shrink: 0;
}
.piz-bench-foot-btn {
  flex: 1;
  height: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 0.5px solid rgba(244,204,49,0.3);
  color: var(--piz-r2-gold);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.piz-bench-foot-btn:hover {
  background: rgba(244,204,49,0.08);
  border-color: var(--piz-r2-gold);
}
.piz-bench-foot-btn:focus-visible { outline: 2px solid var(--piz-r2-gold); outline-offset: 1px; }

/* ── R2.7 Reposición del dock/panel/fab en modo R2 ──────────────── */

/* PLANTILLA: elementos desplazados al derecho del banquillo */
body.piz-r2.piz-sv-plantilla .piz-dock        { left: 292px; }
body.piz-r2.piz-sv-plantilla .piz-field-panel { left: 292px; }
body.piz-r2.piz-sv-plantilla .piz-fab         { left: 292px; }
body.piz-r2.piz-sv-plantilla .piz-fab-popover { left: 292px; }

/* JUGADAS: desplazados al derecho del banquillo colapsado (56px) */
body.piz-r2.piz-sv-jugadas .piz-dock        { left: 68px; }
body.piz-r2.piz-sv-jugadas .piz-field-panel { left: 68px; }
body.piz-r2.piz-sv-jugadas .piz-fab         { left: 68px; }
body.piz-r2.piz-sv-jugadas .piz-fab-popover { left: 68px; }

/* JUGADAS expandido: igual que PLANTILLA */
body.piz-r2.piz-sv-jugadas .piz-bench.is-expanded ~ * .piz-dock { left: 292px; }

/* LIVE: sin banquillo, posición normal */
body.piz-r2.piz-sv-live .piz-dock        { left: 12px; }
body.piz-r2.piz-sv-live .piz-field-panel { left: 12px; }
body.piz-r2.piz-sv-live .piz-fab         { left: 12px; }

/* ── R2.8 Timeline en sub-vista JUGADAS (más alto) ──────────────── */

body.piz-r2.piz-sv-jugadas .piz-timeline {
  height: 120px;
  grid-template-columns: auto 1fr auto;
}
body.piz-r2.piz-sv-jugadas .piz-canvas-wrap { bottom: 120px; }

/* Botones R2 solo visibles en JUGADAS */
.piz-r2-jugadas-only { display: none !important; }
body.piz-r2.piz-sv-jugadas .piz-r2-jugadas-only { display: inline-flex !important; }

/* ── R2.9 Barra PARTIDO LIVE ─────────────────────────────────────── */

.piz-r2-live-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  border: 0.5px solid rgba(240,75,75,0.5);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
body.piz-r2.piz-sv-live .piz-r2-live-bar { display: flex; }

.piz-r2-live-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}
.piz-r2-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f04b4b;
  flex-shrink: 0;
  animation: piz-rec-pulse 1.2s ease-in-out infinite;
}
.piz-r2-live-text {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.06em;
  color: #f04b4b;
}
.piz-r2-live-link-wrap {
  display: flex;
  gap: 6px;
}
.piz-r2-live-link {
  width: 220px;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  color: var(--text);
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 5px 10px;
  border-radius: 3px;
}
.piz-r2-live-copy {
  padding: 5px 12px;
  background: var(--bg3);
  border: 0.5px solid var(--border2);
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.1s, border-color 0.1s;
}
.piz-r2-live-copy:hover { color: var(--teal); border-color: var(--teal); }
.piz-r2-live-stop {
  padding: 5px 12px;
  background: color-mix(in srgb, var(--red) 12%, var(--bg3));
  border: 0.5px solid var(--red);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s;
}
.piz-r2-live-stop:hover { background: color-mix(in srgb, var(--red) 22%, var(--bg3)); }

/* ── R2.10 Camiseta SVG (clase aplicada por pizarra-render.js) ─── */

.piz-piece--shirt text { font-family: 'Bebas Neue', var(--font-display), cursive !important; }

/* ── R2.11 Responsive R2 ─────────────────────────────────────────── */

@media (max-width: 900px) {
  .piz-marquee-title { font-size: 16px; max-width: 200px; }
  .piz-marquee-meta  { display: none; }
  .piz-marquee-btn--unlink .piz-marquee-btn-text { display: none; }
  .piz-bench { width: 220px; }
  body.piz-r2.piz-sv-plantilla .piz-dock        { left: 232px; }
  body.piz-r2.piz-sv-plantilla .piz-field-panel { left: 232px; }
  body.piz-r2.piz-sv-plantilla .piz-fab         { left: 232px; }
  body.piz-r2.piz-sv-plantilla .piz-fab-popover { left: 232px; }
}

/* ════════════════════════════════════════════════════════════════════
   v20 — Opus: fix bug compartir + apretar layout + sin scroll body +
   eliminado rodillo R2 + selector modo en marquesina + dock R2 minimal +
   limpieza CSS muerto + ENTRENAMIENTO→ENTRENO + sin !important.
   ════════════════════════════════════════════════════════════════════ */

/* ── v20.0 Tokens más apretados (campo respira más) ─────────────── */
.piz-app {
  --piz-header-h: 44px;        /* antes 50: 6px liberados arriba */
  --piz-statusbar-h: 36px;     /* v37: corregido — coincide con height real de la statusbar */
}
.piz-app { --piz-marquee-h: 56px; }   /* antes 88: 32px liberados en R2 */

/* ── v20.1 Sin scroll del body — html/body 100dvh fijo ──────────── */
html, body { height: 100dvh; max-height: 100dvh; overflow: hidden; overscroll-behavior: none; }
body.piz-app { display: flex; flex-direction: column; }

/* ── v20.2 Header más apretado ───────────────────────────────────── */
body.piz-app .piz-header { height: var(--piz-header-h); padding: 0 12px; gap: 12px; }

/* Status bar también más fina */
.piz-statusbar { height: var(--piz-statusbar-h); padding: 0 10px; }
.piz-fieldtype-trigger, .piz-select-sm, .piz-panel-btn, .piz-form-team-btn { height: 22px; }

/* ── v20.3 Page offset basado en tokens (sin !important) ────────── */
/* En R1 (sin .piz-r2): header + status bar */
body.piz-app:not(.piz-r2) .piz-page {
  position: relative;
  top: 0; margin-top: calc(var(--piz-header-h) + var(--piz-statusbar-h));
  height: calc(100dvh - var(--piz-header-h) - var(--piz-statusbar-h));
  flex: 0 0 auto;
}
/* En R2 (v23): header + status bar (marquesina eliminada — info partido en
   el header izquierdo, EN VIVO en el header derecho). Mismo offset que R1. */
body.piz-app.piz-r2 .piz-page {
  position: relative;
  top: 0;
  margin-top: calc(var(--piz-header-h) + var(--piz-statusbar-h));
  height: calc(100dvh - var(--piz-header-h) - var(--piz-statusbar-h));
  flex: 0 0 auto;
}
body.piz-app.piz-r2 .piz-statusbar { top: var(--piz-header-h); }

/* Eliminar padding generoso del canvas-wrap → más campo útil */
body.piz-app .piz-canvas-wrap { padding: 6px; }

/* ── v20.4 Marquesina más compacta (56px en lugar de 88) ─────────── */
.piz-marquee { height: var(--piz-marquee-h); }
.piz-marquee-body { padding: 0 16px; align-items: center; gap: 12px; }
.piz-marquee-shield { width: 36px; height: 36px; font-size: 11px; }
.piz-marquee-eyebrow { font-size: 9px; }
.piz-marquee-title { font-size: 18px; line-height: 1; }
.piz-marquee-meta { font-size: 10px; }
.piz-marquee-stripe { height: 2px; }
.piz-marquee-btn { height: 28px; padding: 0 10px; font-size: 10px; }
.piz-marquee-btn--icon { width: 28px; height: 28px; padding: 0; }

/* Botón Limpiar (variante danger en marquesina R2) */
.piz-marquee-btn--danger { color: rgba(244,235,208,0.7); }
.piz-marquee-btn--danger:hover {
  color: var(--red);
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

/* Botón EN VIVO (link al partido en vivo público) */
.piz-marquee-btn--live {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 0.5px solid color-mix(in srgb, var(--red) 50%, var(--border2));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.piz-marquee-btn--live:hover { background: color-mix(in srgb, var(--red) 22%, transparent); border-color: var(--red); }

/* Selector modo dentro de la marquesina (variante dorada) */
.piz-mode-seg--marquee .piz-mode-btn {
  background: transparent;
  color: var(--piz-r2-cream);
  border-color: rgba(244,235,208,.25);
}
.piz-mode-seg--marquee .piz-mode-btn.is-active {
  background: var(--piz-r2-gold);
  color: var(--piz-r2-ink);
}

/* ── v20.5 Eliminado rodillo PLANTILLA/JUGADAS/PARTIDO LIVE ──────── */
/* Las clases .piz-r2-subview-bar y .piz-r2-sv-btn ya no se usan en HTML.
 * Quedan en el CSS como dead-style (eliminar en una limpieza posterior si
 * pesa). Lo importante es que ya no se generan elementos con esas clases. */

/* ── v20.6 Banquillo simplificado: siempre 280px en R2 ────────────── */
/* (las antiguas reglas piz-sv-jugadas/plantilla quedaron pero no aplican
 *  porque ya no se añaden esas clases al body) */

/* ── v20.7 (eliminado en v21): herramientas SIEMPRE visibles en modo
 * partido. Al vivir en la statusbar no compiten por espacio. */

/* ── v20.8 Frame badge: ellipsis si label largo ──────────────────── */
.piz-statusbar .piz-frame-badge {
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* ── v20.9 Ajustar offset cuando ex-banner activo (modo ?ex=) ────── */
.piz-app.piz-page--ex .piz-statusbar { top: calc(var(--piz-header-h) + 34px); }
body.piz-app:not(.piz-r2).piz-page--ex .piz-page {
  margin-top: calc(var(--piz-header-h) + var(--piz-statusbar-h) + 34px);
  height: calc(100dvh - var(--piz-header-h) - var(--piz-statusbar-h) - 34px);
}

/* ════════════════════════════════════════════════════════════════════
   v19 — REDISEÑO Opus: campo limpio + selector modos manual + R2 dock
   - Status bar entre header y campo (consolida tipo campo + sistema +
     frame badge que antes eran overlays sobre el campo).
   - Selector segmented LIBRE / ENTRENAMIENTO / PARTIDO en header.
   - Panel trayectorias fuera del canvas (encima de timeline).
   - R2: dock minimal (solo Select + acciones), botón Mostrar herramientas.
   ════════════════════════════════════════════════════════════════════ */

/* ── v19.1 Status bar (entre header y main) ────────────────────── */

.piz-statusbar {
  position: fixed;
  top: var(--piz-header-h, 50px);
  left: 0; right: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  background: var(--bg2);
  border-bottom: 0.5px solid var(--border2);
  z-index: 95;
}

.piz-statusbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.piz-statusbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.piz-statusbar-sep {
  width: 1px;
  height: 18px;
  background: var(--border2);
  opacity: 0.7;
}

/* Reemplaza el badge antiguo: ahora vive en la status bar como inline span */
.piz-statusbar-right .piz-frame-badge {
  position: static;
  padding: 0;
  background: none;
  border: none;
  backdrop-filter: none;
}

/* Page offset: sube por la status bar */
.piz-app .piz-page {
  top: calc(var(--piz-header-h, 50px) + 36px);
  height: calc(100dvh - var(--piz-header-h, 50px) - 36px);
}

/* (v21: reglas R2 page/statusbar movidas a v20.3 con header siempre visible.
   Esta sección ya no aplica — se mantiene comentada como referencia histórica). */
/* body.piz-r2 .piz-page { margin-top: ... !important; height: ... !important; }
   body.piz-r2 .piz-statusbar { top: var(--piz-marquee-h); } */

/* ── v19.2 Selector modos LIBRE / ENTRENAMIENTO / PARTIDO ─────── */

.piz-mode-seg {
  display: inline-flex;
  border: 0.5px solid var(--border2);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.piz-mode-btn {
  padding: 0 14px;
  height: 30px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  background: var(--bg3);
  border: none;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.piz-mode-btn + .piz-mode-btn { border-left: 0.5px solid var(--border2); }
.piz-mode-btn:hover:not(.is-active) { color: var(--text2); background: var(--bg4, var(--bg3)); }
.piz-mode-btn.is-active {
  color: var(--bg);
  background: var(--teal);
  font-weight: 500;
}
.piz-mode-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

/* En R2 el selector cambia a tonos dorados */
body.piz-r2 .piz-mode-btn.is-active {
  background: var(--piz-r2-gold);
  color: var(--piz-r2-ink);
}

/* ── v19.3 Panel trayectorias fuera del campo (encima de timeline) ── */

.piz-traj-panel {
  position: fixed;
  bottom: calc(var(--piz-tl-h, 60px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg2);
  border: 0.5px solid var(--teal);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  pointer-events: auto;
}

/* ── v19.4 (eliminado en v21): la lógica de ocultar tools en modo
 * partido + botón Mostrar herramientas ya no aplica.
 * Las herramientas viven en la statusbar y son las mismas en todos los
 * modos (selectores .piz-dock con clase ya no existen — el id="piz-dock"
 * sigue presente solo por compat con handlers). */

/* ── v19.5 Header height token + responsive ──────────────────── */

.piz-app { --piz-header-h: 50px; }

@media (max-width: 900px) {
  .piz-mode-btn { padding: 0 8px; font-size: 10px; }
}
/* (bloque ≤700px eliminado en v37: layout de dos filas lo gestiona el bloque ≤820px) */

/* ════════════════════════════════════════════════════════════════════
   v21 — Reestructura: header SIEMPRE visible (también en R2),
   herramientas en el centro de la status bar (sustituyen al dock vertical),
   banquillo colapsable, +MATERIAL eliminado, fix bug compartir R2.
   ════════════════════════════════════════════════════════════════════ */

/* ── v21.1 Status bar con grid 3 columnas (left · center tools · right) ── */
.piz-statusbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  /* Mantiene el `position: fixed; top: var(--piz-header-h)` ya definido */
}
.piz-statusbar-left   { justify-self: start; min-width: 0; overflow: hidden; }
.piz-statusbar-right  { justify-self: end; }

/* ── v21.2 Herramientas dentro de la status bar ──────────────────── */
.piz-statusbar-tools {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  flex-wrap: nowrap;
}

.piz-stb-tool {
  width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text2);
  border: 0.5px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.piz-stb-tool:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg3);
  border-color: var(--border2);
}
.piz-stb-tool[aria-pressed="true"],
.piz-stb-tool.is-active {
  color: var(--teal);
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 10%, transparent);
}
.piz-stb-tool:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.piz-stb-tool:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}
.piz-stb-tool--danger:hover:not(:disabled) {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 60%, var(--border2));
  background: color-mix(in srgb, var(--red) 10%, transparent);
}
.piz-stb-tool--multiselect[aria-pressed="true"] {
  color: var(--amber);
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}
.piz-stb-tool .piz-multisel-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--amber);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.piz-stb-sep {
  width: 1px;
  height: 16px;
  background: var(--border2);
  margin: 0 4px;
  opacity: 0.7;
}

/* v21.2.1: las herramientas son siempre las mismas en todos los modos
   (al estar en la statusbar ya no compiten por espacio con el campo).
   El botón ⋯ #piz-dock-expand queda como dead-code y se oculta. */
.piz-stb-expand { display: none !important; }

/* ── v21.3 Dock vertical eliminado: anular cualquier estilo residual
   (por si el JS añadiese .piz-dock a algún elemento). El propio nav del
   dock ahora vive en la statusbar y comparte clase #piz-dock por compat
   con handlers (is-expanded). Ocultamos cualquier .piz-dock que NO sea
   nuestra .piz-statusbar-tools, por seguridad. */
nav.piz-dock:not(.piz-statusbar-tools) { display: none; }

/* ── v21.4 Banquillo colapsable ──────────────────────────────────── */
.piz-bench { transition: width 0.18s ease; }
.piz-bench.is-collapsed {
  width: 40px;
  min-width: 40px;
  overflow: hidden;
}
.piz-bench.is-collapsed .piz-bench-head { padding: 8px 6px; }
.piz-bench.is-collapsed .piz-bench-tabs,
.piz-bench.is-collapsed .piz-bench-panel,
.piz-bench.is-collapsed .piz-bench-footer,
.piz-bench.is-collapsed .piz-bench-head-info {
  display: none;
}
.piz-bench.is-collapsed .piz-bench-toggle {
  /* Cuando está colapsado, el toggle apunta a la derecha (›) */
  transform: rotate(180deg);
}
.piz-bench-toggle {
  background: transparent;
  border: 0.5px solid var(--border2);
  color: var(--text2);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: color 0.12s, border-color 0.12s, transform 0.18s;
}
.piz-bench-toggle:hover { color: var(--text); border-color: var(--text3); }
.piz-bench-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

/* FAB no debe quedar oculto detrás del banquillo en R2 */
body.piz-r2 .piz-fab,
body.piz-r2 .piz-fab-popover { left: 292px; }
body.piz-r2 .piz-bench.is-collapsed ~ .piz-fab,
body.piz-r2 .piz-bench.is-collapsed ~ .piz-fab-popover { left: 52px; }

/* ── v21.5 Responsive: status bar con tools ──────────────────────── */
@media (max-width: 900px) {
  .piz-stb-tool { width: 24px; height: 22px; }
  .piz-statusbar-tools { gap: 1px; }
}

/* ≤820px: tablet portrait y móviles grandes — los tools van a su propia fila.
   Usamos body.piz-app (especificidad 0,1,1) para que la variable --piz-statusbar-h
   derrote a la regla base (0,1,0), de modo que v20 la recoja automáticamente
   y posicione piz-page correctamente sin reglas duplicadas. */
@media (max-width: 820px) {
  body.piz-app {
    --piz-statusbar-h: 66px; /* dos filas: ~30px row-left/right + ~30px row-tools + 6px gaps */
  }
  .piz-statusbar {
    height: auto;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 4px 10px;
    gap: 4px 0;
  }
  .piz-statusbar-tools { grid-column: 1 / -1; justify-self: center; padding: 2px 0; }
  .piz-statusbar-right { grid-row: 1; grid-column: 2; }
  .piz-statusbar-left  { grid-row: 1; grid-column: 1; }
  /* Paneles flotantes (trayectorias, conectar): centrados, anchura máxima táctil */
  .piz-traj-panel,
  .piz-link-panel { max-width: min(100%, calc(100% - 32px)); }
  .piz-marquee-body {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 6px 12px;
    text-align: center;
  }
  .piz-marquee-left {
    flex-wrap: wrap;
    justify-content: center;
  }
  body.piz-r2 .piz-fab,
  body.piz-r2 .piz-fab-popover {
    left: max(12px, env(safe-area-inset-left, 0px));
  }
  body.piz-r2 .piz-bench.is-collapsed ~ .piz-fab,
  body.piz-r2 .piz-bench.is-collapsed ~ .piz-fab-popover {
    left: max(12px, env(safe-area-inset-left, 0px));
  }
}

/* ════════════════════════════════════════════════════════════════════
   v22 — Header SIEMPRE visible (también en R2). Para que se note el
   modo Partido, el header cambia a tema rojo lacado + dorado, pero
   conserva su estructura, IDs, handlers y comportamiento de los botones.
   La marquesina queda DEBAJO del header como franja informativa
   (escudo + título partido + EN VIVO). Sin botones espejo: usar los
   del header para todo (Compartir, Guardar, Buscar, etc.).
   ════════════════════════════════════════════════════════════════════ */

/* Tema rojo lacado + dorado para el header en modo partido */
body.piz-r2 .piz-header {
  background: linear-gradient(135deg, var(--piz-r2-red-1) 0%, var(--piz-r2-red-2) 100%);
  border-bottom-color: var(--piz-r2-gold);
  color: var(--piz-r2-cream);
}
body.piz-r2 .piz-header-brand,
body.piz-r2 .piz-header-sep,
body.piz-r2 .piz-header-logo {
  color: var(--piz-r2-cream);
}
/* Botones del header en R2: bordes dorados sutiles, hover dorado */
body.piz-r2 .piz-hbtn {
  color: var(--piz-r2-cream);
  border-color: rgba(244,204,49,0.30);
  background: transparent;
}
body.piz-r2 .piz-hbtn:hover:not(:disabled) {
  color: var(--piz-r2-gold);
  border-color: var(--piz-r2-gold);
  background: rgba(244,204,49,0.10);
}
body.piz-r2 .piz-hbtn-kbd {
  color: rgba(244,235,208,0.55);
  background: rgba(0,0,0,0.25);
  border-color: rgba(244,204,49,0.20);
}
/* Selector de modo en R2: el activo dorado, los demás cream sobre transparente */
body.piz-r2 .piz-mode-seg { border-color: rgba(244,204,49,0.30); }
body.piz-r2 .piz-mode-btn {
  background: transparent;
  color: rgba(244,235,208,0.65);
}
body.piz-r2 .piz-mode-btn:hover:not(.is-active) {
  background: rgba(244,204,49,0.08);
  color: var(--piz-r2-cream);
}
body.piz-r2 .piz-mode-btn.is-active {
  background: var(--piz-r2-gold);
  color: var(--piz-r2-ink);
  font-weight: 600;
}
body.piz-r2 .piz-mode-btn + .piz-mode-btn { border-left-color: rgba(244,204,49,0.30); }

/* Pill de contexto en R2 (vinculación partido) */
body.piz-r2 .piz-ctx-pill {
  color: var(--piz-r2-cream);
  border-color: rgba(244,204,49,0.30);
}
body.piz-r2 .piz-ctx-pill:hover { border-color: var(--piz-r2-gold); }

/* Status bar en R2: borde dorado para que se note el modo */
body.piz-r2 .piz-statusbar {
  border-bottom-color: rgba(244,204,49,0.25);
}

/* ════════════════════════════════════════════════════════════════════
   v23 — Marquesina .piz-marquee eliminada (diseño duplicado).
   La info del partido vinculado vive ahora dentro del header (izquierda)
   y el botón EN VIVO en el header derecho.
   ════════════════════════════════════════════════════════════════════ */

/* Bloque info partido en el header izquierdo.
   v26: visibilidad gestionada SOLO por CSS (body.piz-r2) — sin atributo
   `hidden` desde JS. Esto evita el flash al recargar (el script inline en
   <body> aplica .piz-r2 antes del primer paint, así el bloque ya está
   visible o no desde el primer render). */
.piz-header-left { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.piz-header-match { display: none; }       /* oculto por defecto */
body.piz-r2 .piz-header-match {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 12px;
  border-left: 0.5px solid rgba(244,204,49,0.30);
  min-width: 0;
  text-decoration: none;
  color: inherit;
  cursor: default;
  border-radius: 3px;
  padding-right: 10px;
  transition: background 0.12s;
}
.piz-header-match.is-link { cursor: pointer; }
.piz-header-match.is-link:hover {
  background: rgba(244,204,49,0.10);
}
.piz-header-match.is-link:focus-visible {
  outline: 2px solid var(--piz-r2-gold);
  outline-offset: 1px;
}
.piz-header-match-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--piz-r2-gold);
  opacity: 0.85;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Puntito rojo "EN VIVO" antes del eyebrow cuando el bloque es link */
.piz-header-match.is-link .piz-header-match-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4b4b;
  box-shadow: 0 0 6px rgba(255,75,75,0.7);
  animation: piz-live-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes piz-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
.piz-header-match-title-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.piz-header-match-title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--piz-r2-cream);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
/* Indicador "cambios sin guardar" reubicado desde la pill match eliminada */
.piz-header-match .piz-ctx-dirty {
  color: var(--piz-r2-gold);
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}

/* ─── Modal de confirmación custom (reemplaza window.confirm) ────────────────
   Overlay reutiliza .piz-confirm-overlay que hereda el fondo de .piz-modal-overlay.
   El diálogo es compacto: solo mensaje + 2 botones, sin cabecera ni cierre.
──────────────────────────────────────────────────────────────────────────── */
.piz-confirm-overlay { z-index: 700; }  /* Por encima de otros modales */

.piz-confirm-dialog {
  background: var(--bg2);
  border: 0.5px solid var(--border2);
  border-radius: 6px;
  padding: 24px 24px 20px;
  width: 340px;
  max-width: min(100%, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.piz-confirm-msg {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.piz-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.piz-confirm-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 20px;
  border-radius: 4px;
  cursor: pointer;
  border: 0.5px solid var(--border2);
  background: none;
  color: var(--text2);
  transition: color .12s, border-color .12s, background .12s;
  min-width: 80px;
}
.piz-confirm-btn:hover { color: var(--text); border-color: var(--text3); background: var(--bg4); }
.piz-confirm-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.piz-confirm-btn--ok {
  background: color-mix(in srgb, var(--teal) 12%, var(--bg3));
  border-color: color-mix(in srgb, var(--teal) 40%, var(--border2));
  color: var(--teal);
}
.piz-confirm-btn--ok:hover {
  background: color-mix(in srgb, var(--teal) 20%, var(--bg3));
  border-color: var(--teal);
  color: var(--teal);
}

/* ══════════════════════════════════════════════════════════════════
   BOTÓN JUGADAS + MODAL (v40)
   ══════════════════════════════════════════════════════════════════ */

/* Botón flotante derecha */
.piz-jugadas-btn {
  position: fixed;
  right: 12px;
  bottom: calc(var(--piz-tl-h, 44px) + 12px);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 9px;
  border-radius: 20px;
  border: 0.5px solid var(--border2);
  background: color-mix(in srgb, var(--bg3) 90%, transparent);
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s, color .15s, border-color .15s;
  max-width: 180px;
  white-space: nowrap;
}
.piz-jugadas-btn:hover { background: var(--bg4); color: var(--text); border-color: var(--text3); }
.piz-jugadas-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.piz-jugadas-btn-label { overflow: hidden; text-overflow: ellipsis; max-width: 130px; }

/* En modo móvil se oculta (la pizarra ya tiene aviso de móvil) */
@media (max-width: 599px) { .piz-jugadas-btn { display: none; } }

/* Modal jugadas */
.piz-jugadas-modal-inner {
  width: min(420px, 92vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.piz-jugadas-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.piz-jugadas-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.piz-jugadas-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  cursor: pointer;
  border-bottom: 0.5px solid var(--border);
  transition: background .1s;
}
.piz-jugadas-row:hover { background: var(--bg4); }
.piz-jugadas-row.is-active { background: color-mix(in srgb, var(--teal) 10%, var(--bg3)); }

.piz-jugadas-row-order {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.piz-jugadas-order-btn {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  padding: 1px 2px;
}
.piz-jugadas-order-btn:hover { color: var(--text); }
.piz-jugadas-order-btn:disabled { opacity: 0.2; cursor: default; }

/* Nombre jugada: wrap, texto, lápiz, input, guardar */
.piz-jugadas-row-name-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.piz-jugadas-row-name-text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 4px;
}
.piz-jugadas-row.is-active .piz-jugadas-row-name-text { color: var(--teal); }
.piz-jugadas-pencil-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1;
  transition: opacity .15s, color .12s;
}
.piz-jugadas-row:hover .piz-jugadas-pencil-btn { opacity: 1; }
.piz-jugadas-pencil-btn:hover { color: var(--text); }
.piz-jugadas-row-name-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  border: none;
  background: var(--bg4);
  outline: 1px solid var(--teal);
  min-width: 0;
  padding: 2px 4px;
  border-radius: 3px;
}
.piz-jugadas-save-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--teal);
  background: none;
  border: 0.5px solid var(--teal);
  border-radius: 4px;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
  transition: background .12s;
}
.piz-jugadas-save-btn:hover { background: color-mix(in srgb, var(--teal) 12%, var(--bg3)); }

.piz-jugadas-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.piz-jugadas-action-btn {
  background: none;
  border: 0.5px solid transparent;
  color: var(--text3);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 4px;
  transition: color .12s, border-color .12s, background .12s;
  font-family: var(--font-mono);
}
.piz-jugadas-action-btn:hover { color: var(--text); border-color: var(--border2); background: var(--bg4); }
.piz-jugadas-action-btn:disabled { opacity: 0.25; cursor: not-allowed; }
.piz-jugadas-action-btn--del:hover { color: var(--red, #e05); border-color: var(--red, #e05); }

.piz-jugadas-modal-footer {
  padding: 10px 14px;
  border-top: 0.5px solid var(--border);
}
.piz-jugadas-add-btn {
  width: 100%;
  padding: 8px;
  border: 0.5px dashed var(--border2);
  border-radius: 6px;
  background: none;
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.piz-jugadas-add-btn:hover { color: var(--teal); border-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, var(--bg3)); }

/* ── R2: Panel de Highlights ──────────────────────────────────────── */

.piz-r2-hl-panel {
  position: fixed;
  /* Sobre el timeline (44px) + botón de jugadas (~36px) + márgenes para
     que NO tape la barra de estado ni el botón flotante de jugadas. */
  bottom: calc(var(--piz-tl-h, 44px) + 56px);
  right: 8px;
  width: 240px;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  /* Z-index por debajo del botón de jugadas (300) — si en algún solapamiento
     residual coinciden, el botón gana. */
  z-index: 110;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.piz-r2-hl-panel[hidden] { display: none; }

/* Panel colapsado: solo muestra la cabecera, el body y el refresh se ocultan.
   width: auto para que no ocupe los 240px cuando está cerrado (clave en tablet). */
.piz-r2-hl-panel.is-collapsed .piz-r2-hl-body    { display: none; }
.piz-r2-hl-panel.is-collapsed .piz-r2-hl-refresh { display: none; }
.piz-r2-hl-panel.is-collapsed                    { border-bottom: none; width: auto; }

.piz-r2-hl-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}
.piz-r2-hl-panel.is-collapsed .piz-r2-hl-head { border-bottom: none; }

/* Botón toggle (▸ / ▾) */
.piz-r2-hl-toggle {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 3px;
  border-radius: 3px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.piz-r2-hl-toggle:hover { color: var(--text); background: var(--bg4); }
.piz-r2-hl-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.piz-r2-hl-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text2);
  flex: 1;
}
.piz-r2-hl-refresh {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  transition: color .12s, background .12s;
}
.piz-r2-hl-refresh:hover { color: var(--text); background: var(--bg4); }
.piz-r2-hl-refresh:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }

.piz-r2-hl-body {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}
#piz-r2-hl-status {
  font-size: 11px;
  color: var(--text3);
  padding: 10px 12px;
  margin: 0;
}

/* Lista de highlights */
.piz-hl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.piz-hl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 0.5px solid var(--border);
  transition: background .1s;
}
.piz-hl-item:last-child { border-bottom: none; }
.piz-hl-item:hover { background: var(--bg3); }
.piz-hl-item.is-imported { opacity: 0.65; }

.piz-hl-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.piz-hl-stars {
  font-size: 9px;
  line-height: 1;
  color: var(--amber, #f59e0b);
}
.piz-hl-time {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text3);
  white-space: nowrap;
}
.piz-hl-label {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.piz-hl-import-btn {
  flex-shrink: 0;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border: 0.5px solid var(--border2);
  border-radius: 4px;
  background: none;
  color: var(--text2);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
  white-space: nowrap;
}
.piz-hl-import-btn:hover:not(:disabled) {
  color: var(--teal);
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, var(--bg2));
}
.piz-hl-import-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.piz-hl-import-btn:disabled { opacity: 0.5; cursor: default; }
.piz-hl-import-btn.is-done {
  color: var(--teal);
  border-color: var(--teal);
  opacity: 0.7;
}

/* Acciones del item: importar + editar + borrar (botones secundarios) */
.piz-hl-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.piz-hl-edit-btn,
.piz-hl-del-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 4px;
  border: 0.5px solid var(--border2);
  background: none;
  color: var(--text3);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .12s, border-color .12s, background .12s;
}
.piz-hl-edit-btn:hover {
  color: var(--teal);
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 8%, var(--bg2));
}
.piz-hl-del-btn:hover {
  color: var(--danger, #dc2626);
  border-color: var(--danger, #dc2626);
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, var(--bg2));
}
.piz-hl-edit-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.piz-hl-del-btn:focus-visible  { outline: 2px solid var(--danger, #dc2626); outline-offset: 1px; }

/* Modal de edición de highlight (panel R2 → editar) */
.piz-hl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.piz-hl-modal-card {
  background: var(--bg2);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.piz-hl-modal-title {
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text2);
  margin: 0 0 14px;
}
.piz-hl-modal-form { display: flex; flex-direction: column; gap: 14px; }
.piz-hl-modal-field { display: flex; flex-direction: column; gap: 6px; }
.piz-hl-modal-label {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 0;
}
.piz-hl-modal-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.piz-hl-modal-toggle {
  padding: 5px 10px;
  min-height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.piz-hl-modal-toggle:hover { border-color: rgba(245,158,11,0.45); }
.piz-hl-modal-toggle.is-active {
  border-color: rgba(245,158,11,0.85);
  background: rgba(245,158,11,0.12);
  color: var(--amber, #f5a623);
  font-weight: 600;
}
.piz-hl-modal-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 7px 9px;
  resize: vertical;
  font-family: inherit;
}
.piz-hl-modal-textarea:focus { border-color: var(--teal); outline: none; }
.piz-hl-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
.piz-hl-modal-btn {
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text2);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.piz-hl-modal-btn--primary {
  color: var(--teal);
  border-color: var(--teal);
}
.piz-hl-modal-btn--primary:hover {
  background: color-mix(in srgb, var(--teal) 12%, var(--bg2));
}
.piz-hl-modal-btn--ghost:hover {
  border-color: var(--text3);
  color: var(--text);
}
.piz-hl-modal-btn:disabled { opacity: 0.5; cursor: default; }

/* body.piz-r2 lo controla: el panel solo aparece en modo partido */
body:not(.piz-r2) .piz-r2-hl-panel { display: none !important; }

/* ── Pitch grid inline (modal edición highlights) ──────────────────────────── */
.mlive-hl-pitch-axis-hint {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--text3);
  text-align: center;
  margin: 0 0 4px;
  letter-spacing: 0.04em;
}

.mlive-hl-pitch-grid { display: grid; }

.mlive-hl-pitch-grid--inline {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 5 / 3;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  margin-block: .5rem;
  gap: 1px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background-color: rgba(0, 100, 30, 0.55);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MDAgMzAwJz48ZyBzdHJva2U9J3doaXRlJyBzdHJva2Utb3BhY2l0eT0nLjQ1JyBzdHJva2Utd2lkdGg9JzIuNScgZmlsbD0nbm9uZSc+PHJlY3QgeD0nMicgeT0nMicgd2lkdGg9JzQ5NicgaGVpZ2h0PScyOTYnIHJ4PScyJy8+PGxpbmUgeDE9JzAnIHkxPScxNTAnIHgyPSc1MDAnIHkyPScxNTAnLz48ZWxsaXBzZSBjeD0nMjUwJyBjeT0nMTUwJyByeD0nNTAnIHJ5PSc0MCcvPjxjaXJjbGUgY3g9JzI1MCcgY3k9JzE1MCcgcj0nMycgZmlsbD0nd2hpdGUnIGZpbGwtb3BhY2l0eT0nLjUnLz48cmVjdCB4PScxNTAnIHk9JzInIHdpZHRoPScyMDAnIGhlaWdodD0nNzUnLz48cmVjdCB4PScxNTAnIHk9JzIyMycgd2lkdGg9JzIwMCcgaGVpZ2h0PSc3NScvPjxyZWN0IHg9JzIwMCcgeT0nMicgd2lkdGg9JzEwMCcgaGVpZ2h0PSczMicvPjxyZWN0IHg9JzIwMCcgeT0nMjY2JyB3aWR0aD0nMTAwJyBoZWlnaHQ9JzMyJy8+PGNpcmNsZSBjeD0nMjUwJyBjeT0nNjUnIHI9JzMnIGZpbGw9J3doaXRlJyBmaWxsLW9wYWNpdHk9Jy41Jy8+PGNpcmNsZSBjeD0nMjUwJyBjeT0nMjM1JyByPSczJyBmaWxsPSd3aGl0ZScgZmlsbC1vcGFjaXR5PScuNScvPjwvZz48L3N2Zz4=");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Tema claro: fondo más suave + líneas oscuras (blanco invisible sobre claro) */
[data-theme="light"] .mlive-hl-pitch-grid--inline {
  background-color: rgba(0, 110, 30, 0.22);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MDAgMzAwJz48ZyBzdHJva2U9J3JnYmEoMCw4MCwyMCwwLjU1KScgc3Ryb2tlLXdpZHRoPScyLjUnIGZpbGw9J25vbmUnPjxyZWN0IHg9JzInIHk9JzInIHdpZHRoPSc0OTYnIGhlaWdodD0nMjk2JyByeD0nMicvPjxsaW5lIHgxPScwJyB5MT0nMTUwJyB4Mj0nNTAwJyB5Mj0nMTUwJy8+PGVsbGlwc2UgY3g9JzI1MCcgY3k9JzE1MCcgcng9JzUwJyByeT0nNDAnLz48Y2lyY2xlIGN4PScyNTAnIGN5PScxNTAnIHI9JzMnIGZpbGw9J3JnYmEoMCw4MCwyMCwwLjYpJy8+PHJlY3QgeD0nMTUwJyB5PScyJyB3aWR0aD0nMjAwJyBoZWlnaHQ9Jzc1Jy8+PHJlY3QgeD0nMTUwJyB5PScyMjMnIHdpZHRoPScyMDAnIGhlaWdodD0nNzUnLz48cmVjdCB4PScyMDAnIHk9JzInIHdpZHRoPScxMDAnIGhlaWdodD0nMzInLz48cmVjdCB4PScyMDAnIHk9JzI2Nicgd2lkdGg9JzEwMCcgaGVpZ2h0PSczMicvPjxjaXJjbGUgY3g9JzI1MCcgY3k9JzY1JyByPSczJyBmaWxsPSdyZ2JhKDAsODAsMjAsMC42KScvPjxjaXJjbGUgY3g9JzI1MCcgY3k9JzIzNScgcj0nMycgZmlsbD0ncmdiYSgwLDgwLDIwLDAuNiknLz48L2c+PC9zdmc+");
}

.mlive-hl-pitch-cell {
  cursor: pointer;
  position: relative;
  z-index: 1;
  background: transparent;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(255,255,255,0.12);
}
[data-theme="light"] .mlive-hl-pitch-cell {
  border-color: rgba(0, 80, 20, 0.18);
}
.mlive-hl-pitch-cell:hover       { background: rgba(245, 166, 35, 0.3); }
.mlive-hl-pitch-cell.is-selected { background: rgba(245, 166, 35, 0.45); }
.mlive-hl-pitch-cell.is-first    { background: rgba(245, 166, 35, 0.65); }
.mlive-hl-pitch-cell:focus-visible { outline: 2px solid var(--amber, #f5a623); outline-offset: -2px; }

.mlive-hl-chip-undo-btn {
  display: block;
  width: 100%;
  max-width: 260px;
  margin-inline: auto;
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  background: transparent;
  color: var(--amber, #f5a623);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.mlive-hl-chip-undo-btn:hover { background: rgba(245, 158, 11, 0.12); }
.mlive-hl-chip-undo-btn:focus-visible { outline: 2px solid var(--amber, #f5a623); outline-offset: 2px; }

/* Ownership: pizarra ajena / autoría jugadas y highlights */
.piz-ownership-banner {
  margin: 0;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--amber, #f5a623);
  background: color-mix(in srgb, var(--amber, #f5a623) 12%, transparent);
  border-radius: 6px;
  flex: 1 1 auto;
  text-align: center;
}
.piz-jugadas-row-creator,
.piz-hl-creator {
  display: block;
  font-size: 10px;
  color: var(--text3);
  font-family: var(--font-mono);
  margin-top: 2px;
}
body.piz-is-readonly .piz-toolbar button:not([data-tool="select"]):not([data-tool="play"]) {
  opacity: 0.45;
  pointer-events: none;
}

/* Modo día — overlays oscuros fijos */
[data-theme="light"] .piz-modal-overlay {
  background: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .piz-hl-modal-overlay {
  background: rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .piz-hl-modal-card {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .piz-r2-subview-bar {
  background: color-mix(in srgb, var(--text3) 12%, transparent);
}