/* P0 — prototipo funcional, sin diseño visual definitivo de OVR todavía.
   Reutiliza la paleta de color ya establecida en Analisis Tactico/index.html
   para no partir de cero, sin pretender que esto sea el diseño final. */
:root{
  --surface:#0E2037;
  --surface-2:#122A47;
  --surface-3:#0A1A2E;
  --border:#1E3658;
  --text:#FFFFFF;
  --text-2:#8FA3C4;
  --text-3:#5D7699;
  --pos:#2ECC71;
  --neg:#E74C3C;
  --accent:#D4A72E;
  --accent-ink:#0A1229;
  --radius:10px;
  --radius-sm:6px;
  /* Corrección (rediseño de barra) — todo menú/popover flotante debe ser
     translúcido (deja intuir el campo detrás), mismo valor que ya usaba
     .pt-present-bar (la única superficie que ya lo era) para no inventar
     un segundo criterio de opacidad. */
  /* Corrección — .92 de opacidad se seguía viendo sólido a ojo; bajado a
     .72, y de nuevo a .58 (pedido explícito: "quiero un grado de
     transparencia algo más alto") — el campo debe notarse con claridad
     detrás, apoyado en el blur (backdrop-filter) para que el texto del
     menú siga siendo legible encima de cualquier zona del campo. */
  --surface-translucent:rgba(14,32,55,.58);
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--surface-3);color:var(--text);overflow:hidden;
}
#app{display:flex;flex-direction:column;height:100vh;}

/* Cabecera replicada de Analisis Tactico/index.html (.topbar/.topbar-row1/
   .brand*) — mismas clases y mismos valores, solo el contenido de texto
   cambia (ver _build en tactical-board-editor.js). Un único row (aquí no
   existe la fila 2 de metadatos de scouting, no aplica a la pizarra). */
.pt-topbar{
  flex:0 0 auto;padding:9px 22px;background:linear-gradient(180deg,#0C1E36,#091626);
  border-bottom:1px solid var(--border);z-index:50;
}
.pt-topbar-row1{
  display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;margin:-4px -6px;padding:4px 6px;
  background:
    linear-gradient(112deg, transparent 26%, rgba(212,167,46,.16) 26.6%, rgba(212,167,46,.16) 27.1%, transparent 27.8%),
    linear-gradient(112deg, transparent 35%, rgba(212,167,46,.09) 35.6%, rgba(212,167,46,.09) 36.1%, transparent 36.8%);
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding-right:16px;text-decoration:none;}
.brand-lockup{height:34px;width:auto;flex:0 0 auto;}
.brand-divider{width:1px;align-self:stretch;margin:1px 4px;background:linear-gradient(180deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent);}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-text b{font-size:12.5px;font-weight:800;letter-spacing:.04em;color:#fff;}
.brand-text span{font-size:8.5px;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-weight:700;}
.topbar-hero{flex:1 1 auto;height:44px;border-radius:8px;overflow:hidden;position:relative;margin:0 16px;
  background:url('../assets/hero-stadium.jpg') center/cover no-repeat;}
.topbar-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(9,20,38,.9), rgba(9,20,38,.1) 35%, rgba(9,20,38,.1) 65%, rgba(9,20,38,.75));}
.pt-field-select{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius-sm);padding:6px 8px;font-size:12px;font-weight:600;outline:none;
}

.pt-btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;font-size:12px;
  font-weight:700;cursor:pointer;white-space:nowrap;
}
.pt-btn:hover{border-color:var(--accent);}
.pt-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.pt-btn-accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.pt-btn-danger{background:rgba(231,76,60,.14);color:var(--neg);border-color:rgba(231,76,60,.4);}
.pt-btn-sm{padding:5px 9px;font-size:11px;}

/* Rediseño de distribución (canvas-first, Bloque 1) — la columna lateral
   fija desaparece; la toolbar vive debajo del campo, a todo el ancho,
   sin restarle espacio nunca (mismo principio que ya aplicaba `.pt-props`).
   `.pt-tool`/`.pt-tool-variant`/`.pt-tool-category` se mantienen tal cual
   (mismo lenguaje visual, ahora en fila en vez de columna). */
.pt-toolbar-main{
  /* Corrección — mismo motivo que .pt-props: menos margen vertical
     (6px/8px, antes 10px/16px) para ceder esa franja a la pizarra. */
  flex:0 0 auto;display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:6px 10px;margin:6px auto 8px;box-shadow:0 10px 26px rgba(0,0,0,.4);
  align-self:center;width:fit-content;max-width:calc(100% - 32px);
}
.pt-toolbar-sep{width:1px;align-self:stretch;margin:4px 8px;background:var(--border);flex:0 0 auto;}
/* Rediseño de barra (iconos+tooltips+popovers) — la barra principal pasa
   de icono+etiqueta a icono SOLO (la etiqueta sigue en el DOM para
   lectores de pantalla y para _toggleToolPalette, que la reactiva: ver
   `.pt-tool-variant .pt-tool-label` más abajo). El tooltip nativo
   (`title`, fijado en JS) es el único mecanismo de descubrimiento del
   nombre — nunca el sustituto de un icono poco reconocible. Botón más
   compacto (antes min-width:62px con icono+texto en 2 líneas) porque ya
   no hay texto que acomodar: reduce al máximo el espacio de la barra,
   cediéndoselo al campo. */
.pt-tool{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px;border-radius:10px;min-width:38px;
  border:1px solid transparent;background:none;color:var(--text);cursor:pointer;font-size:11px;font-weight:700;
  text-align:center;white-space:nowrap;flex:0 0 auto;
}
.pt-tool:hover{background:var(--surface-2);}
.pt-tool.active{background:var(--accent);color:var(--accent-ink);}
.pt-tool svg{flex:0 0 auto;}
.pt-tool-label{display:none;}
/* Corrección — "los materiales/toda variante tampoco deben tener texto,
   solo icono, lo dejamos claro varias veces": la etiqueta se queda oculta
   SIEMPRE, también dentro de una paleta ya abierta (Jugador/Zona/
   Materiales) — el tooltip nativo es el único mecanismo de descubrimiento
   en cualquier contexto, no solo en la barra principal. */
/* Bloque "Posición/Formación/Acciones" — Vaciar campo es destructivo,
   mismo lenguaje de color que .pt-btn-danger pero en el formato tile de
   .pt-tool (icono arriba/etiqueta abajo). */
.pt-tool-danger{color:var(--neg);}
.pt-tool-danger:hover{background:rgba(231,76,60,.14);}
/* Popover de Formación — mismo contenedor que .pt-tool-palette, solo
   necesita algo más de ancho para el selector + campo de equipo. */
.pt-formation-panel{min-width:180px;gap:8px;padding:10px;}
.pt-formation-panel .pt-btn{margin-top:2px;}
/* UX-4A — botón de categoría (Zona/Materiales/Formación/Vistas): mismo
   botón que una herramienta directa. `.open` es un estado distinto de
   `.active` a propósito — una categoría puede estar desplegada sin que
   ninguna de sus variantes sea la herramienta activa.
   Corrección (pedido explícito) — se quita la flechita/cuña gris bajo el
   icono (.pt-tool-caret, triángulo CSS): no aportaba información real
   (el popover ya se abre con cualquier clic en el botón) y deformaba la
   altura de los botones en la barra. */
.pt-tool-category.open{background:var(--surface-2);}
/* Paleta de variantes — ya no es un acordeón que empuja la barra, es un
   popover flotante sobre el botón que lo abre (ver _toggleToolPalette),
   mismo lenguaje que .pt-account-menu/.pt-cloud-popover. */
.pt-tool-palette{
  position:fixed;z-index:55;background:var(--surface-translucent);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 10px 30px rgba(0,0,0,.5);padding:6px;
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
/* Icono solo, igual que en la barra principal — ya no hay etiqueta que
   acomodar en fila, así que vuelve al tile compacto centrado. */
.pt-tool-variant{min-width:38px;}

.pt-canvas-wrap{position:relative;flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden;background:radial-gradient(circle at 50% 0%, #10233c, var(--surface-3));}
/* Corrección — "la pizarra debe verse en todo momento, sin deslizar":
   antes era width:100%;height:auto, que solo respetaba el ANCHO
   disponible — con paneles altos (propiedades con muchos campos, toolbar)
   la altura resultante (por el aspect-ratio del viewBox) podía superar el
   alto real del hueco y obligaba a hacer scroll dentro de canvas-wrap.
   height:100% dentro de un flex-item con alto definido (.pt-canvas-wrap)
   deja que preserveAspectRatio="xMidYMid meet" (ya fijado en el <svg>, ver
   _build) encaje la pizarra dentro de AMBAS dimensiones a la vez, nunca
   desbordando ninguna — mismo criterio que un object-fit:contain. */
.pt-board-svg{width:100%;height:100%;max-width:1050px;background:#0E2037;border-radius:var(--radius);box-shadow:0 10px 40px rgba(0,0,0,.4);touch-action:none;}
.pt-board-svg.mode-select{cursor:default;}
.pt-board-svg:not(.mode-select){cursor:crosshair;}

/* Corrección (punto 3) — overlay de edición inline de Texto, ver
   _startTextEdit en tactical-board-editor.js. translate(-50%,-50%) lo
   recentra automáticamente en cada tecleo según crece su propia altura
   (scrollHeight), sin recálculo manual de posición. */
.pt-text-edit-overlay{
  position:absolute;z-index:30;box-sizing:border-box;resize:none;overflow:hidden;
  background:transparent;border:1.5px dashed rgba(255,255,255,.6);border-radius:4px;
  padding:4px 6px;outline:none;font-weight:700;white-space:pre-wrap;word-break:break-word;
}

/* M3.1 — modo presentación: campo limpio + barra mínima de controles.
   Anterior/Play/Pausa/Siguiente quedan deshabilitados hasta que exista más
   de una escena (ver tactical-board-editor.js _togglePresent). */
.pt-present-bar{
  display:none;position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  background:rgba(14,32,55,.92);border:1px solid var(--border);border-radius:999px;
  padding:8px 10px;gap:6px;backdrop-filter:blur(6px);box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.pt-present-bar .pt-btn{border-radius:999px;}
.pt-present-bar .pt-btn:disabled{opacity:.35;cursor:default;}
.pt-presenting .pt-topbar, .pt-presenting .pt-toolbar-main, .pt-presenting .pt-props{display:none;}
.pt-presenting .pt-present-bar{display:flex;}
.pt-presenting .pt-canvas-wrap{padding:0;}
.pt-presenting .pt-board-svg{max-width:100%;border-radius:0;box-shadow:none;}
.pt-presenting .selection-layer{display:none;}

.pt-props{
  /* Rediseño de barra, punto 7 — ya no reserva una franja fija ("Ningún
     objeto seleccionado" desaparece, ver _renderToolDefaults): sin
     min-height, el padding también se colapsa a 0 cuando no hay nada que
     mostrar (Dibujo/Texto/Materiales ya ni siquiera llegan aquí, viven en
     su panel flotante — ver .pt-edit-panel). Sigue con overflow-y:auto
     como red de seguridad para selecciones con muchos campos. */
  flex:0 0 auto;max-height:120px;overflow-y:auto;background:var(--surface);
  border-top:1px solid var(--border);padding:8px 16px;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
}
.pt-props:empty{padding:0;border-top:none;}
.pt-props-empty{color:var(--text-3);font-size:12px;font-weight:600;padding:6px 0;}
.pt-prop-field{display:flex;flex-direction:column;gap:4px;}
.pt-prop-field label{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700;}
.pt-prop-field input[type=text], .pt-prop-field input[type=number], .pt-prop-field select, .pt-prop-field textarea{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);
  padding:6px 8px;font-size:12px;outline:none;width:120px;
}
.pt-prop-field textarea{resize:none;height:44px;width:200px;}
.pt-prop-colors{display:flex;gap:6px;}
.pt-color-swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;}
.pt-color-swatch.active{border-color:var(--text);}
.pt-props-actions{display:flex;gap:8px;margin-left:auto;align-self:center;}
.pt-props-count{font-size:12px;color:var(--text-2);font-weight:700;align-self:center;}

/* Rediseño de barra v2 — MENÚ EN CASCADA: sustituye la cuadrícula ancha de
   botones-icono (todas las opciones a la vista de golpe) por una ÚNICA
   columna, una fila por propiedad (Color/Forma/Estilo/...). La fila
   muestra el valor ACTUAL; al pasar el ratón por encima se despliega
   LATERALMENTE el abanico de opciones — nunca una lista vertical ya
   desplegada. Puro :hover en CSS, sin JS (ni showPopover ni outside-click
   que gestionar: el abanico es contenido del propio DOM de la fila). */
.pt-cascade-menu{display:flex;flex-direction:column;gap:1px;}
.pt-cascade-row{
  position:relative;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:7px;cursor:default;
  z-index:0; /* ver regla :hover — evita que una fila SIGUIENTE (pintada
    después en el DOM) tape el abanico de ESTA fila cuando se solapan
    verticalmente por 1-2px (el abanico mide ~40px, la fila ~38px) */
}
.pt-cascade-row:hover{background:var(--surface-2);z-index:5;}
.pt-cascade-row-icon{display:flex;align-items:center;justify-content:center;width:22px;height:16px;flex:0 0 auto;color:var(--text);}
/* Corrección (pedido explícito) — el círculo de Color se veía más pegado
   al margen izquierdo que el icono de Camiseta/Tamaño: a diferencia de
   .pt-cascade-row-icon (caja de 22px que centra lo que sea que lleve
   dentro), el swatch era un círculo de 16px suelto, sin esa caja — mismo
   ancho de columna (22px) para que los tres iconos queden en la misma
   línea vertical, con el círculo (16px) centrado dentro. */
.pt-cascade-row-swatch{display:flex;align-items:center;justify-content:center;width:22px;height:16px;flex:0 0 auto;}
.pt-cascade-row-swatch-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.25);}
.pt-cascade-row-text{font-size:12px;font-weight:700;min-width:22px;text-align:center;flex:0 0 auto;}
.pt-cascade-caret{
  margin-left:auto;width:0;height:0;flex:0 0 auto;
  border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid var(--text-3);
}
/* Corrección — el hueco (antes margin-left:6px) entre la fila y su propio
   abanico era zona muerta: al cruzarlo con el ratón en diagonal, ningún
   elemento quedaba en :hover durante ese instante y el abanico se cerraba
   antes de llegar a él ("cuesta que se quede permanente", "hay que
   intentarlo varias veces"). Tocándose borde con borde (margin-left:0) no
   hay hueco que cruzar — el abanico es descendiente de la fila, así que
   :hover sobre él mantiene :hover en la fila sin solución de continuidad. */
.pt-cascade-flyout{
  position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0;
  display:none;align-items:center;gap:4px;padding:6px;
  background:var(--surface-translucent);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.pt-cascade-row:hover .pt-cascade-flyout{display:flex;}
/* Corrección (pedido explícito) — paleta más extensa (11 colores, antes
   5): en una sola fila horizontal el abanico se habría vuelto larguísimo
   hacia el lateral. max-width + flex-wrap lo convierte en una cuadrícula
   compacta (varias filas, nunca una tira interminable). */
.pt-cascade-flyout-colors{flex-wrap:wrap;max-width:148px;}
/* Variante lista vertical (Tamaño/Tamaño de letra "como en Word" —
   demasiados valores discretos para una fila horizontal de iconos). */
.pt-cascade-flyout-list{flex-direction:column;align-items:stretch;max-height:220px;overflow-y:auto;padding:4px;gap:1px;}
.pt-opt-btn-text{justify-content:flex-start;min-width:64px;height:26px;padding:0 10px;font-size:12px;}
/* Fila simple (texto/número libres — Nombre, Equipo...): no hay un
   conjunto discreto de opciones que desplegar, así que se queda como
   campo normal dentro de la misma columna única — el pedido de "una
   columna, no una cuadrícula" ya queda satisfecho sin forzar un abanico
   donde no hay nada que elegir. */
.pt-cascade-field{padding:4px 10px 8px;}
.pt-cascade-field label{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:700;display:block;margin-bottom:4px;}
.pt-cascade-field input[type=text], .pt-cascade-field input[type=number]{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);
  padding:6px 8px;font-size:12px;outline:none;width:100%;
}

.pt-opt-btn{
  display:flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 6px;
  border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;
}
.pt-opt-btn:hover{border-color:var(--accent);}
.pt-opt-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.pt-opt-btn:disabled{opacity:.35;cursor:default;}
.pt-opt-btn:disabled:hover{border-color:var(--border);}
.pt-font-btn{font-size:13px;font-weight:700;min-width:34px;}
.pt-stepper{display:flex;align-items:center;gap:8px;padding:4px 10px 8px;}
.pt-stepper-value{font-size:13px;font-weight:700;min-width:20px;text-align:center;}

/* "Paneles de edición" flotantes y ARRASTRABLES (Texto/Materiales/Jugador/
   Zona), a diferencia de los popovers simples anclados (.pt-tool-palette,
   y ahora también Dibujo — ver .pt-dibujo-menu) que no se mueven.
   Translúcido como el resto (punto 1), mismo lenguaje de superficie. */
/* Corrección — ni el panel ni su cuerpo pueden usar overflow:hidden/auto:
   el abanico lateral de cada fila (.pt-cascade-flyout) se posiciona
   absoluto respecto a SU fila y necesita escapar del panel hacia la
   derecha; cualquier overflow no-visible en un antecesor lo recorta (y,
   por la regla CSS de "si un eje es visible y el otro no, el visible se
   trata como auto", NO basta con poner overflow-x:visible si
   overflow-y sigue siendo auto — hay que quitar el scroll interno del
   todo). El panel crece con su contenido en vez de hacer scroll; con las
   listas de campos actuales (máx. ~8 filas) nunca se acerca a ocupar el
   alto de la ventana. */
/* Corrección — "como máximo el ancho de la palabra Jugador/Texto": antes
   210px (pensado para selects anchos que ya no existen aquí), ahora una
   columna fina — basta para icono+acento de cada fila en reposo (los
   abanicos NO cuentan, viven fuera en position:absolute) y para que un
   campo de texto/número quepa sin agobiarse. */
.pt-edit-panel{
  position:fixed;z-index:58;background:var(--surface-translucent);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 14px 36px rgba(0,0,0,.55);
  display:flex;flex-direction:column;width:124px;
}
.pt-edit-panel-header{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--border);
  cursor:grab;touch-action:none;user-select:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.pt-edit-panel-header:active{cursor:grabbing;}
.pt-edit-panel-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);}
.pt-edit-panel-close{
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:5px;
  border:none;background:none;color:var(--text-2);cursor:pointer;font-size:15px;line-height:1;padding:0;
}
.pt-edit-panel-close:hover{background:var(--surface-3);color:var(--text);}
.pt-edit-panel-body{
  display:flex;flex-direction:column;gap:2px;padding:6px;
}
.pt-edit-panel-body .pt-props-actions{margin:6px 4px 2px;}

/* Dibujo/Jugador/Posición/Texto/Materiales/Zona — menú de DEFAULTS
   ANCLADO a su botón de la barra, nunca una ventana libre: mismo
   contenedor que .pt-tool-palette, con el menú en cascada dentro en vez
   de una lista de variantes.
   Corrección — "como máximo el ancho de la palabra Equipo": el campo de
   texto de Equipo (Jugador) no tenía ningún límite propio y su ancho
   intrínseco de <input> (bastante mayor que una fila de icono+acento)
   era lo que más ensanchaba todo el popover. Ancho fijo, igual criterio
   ya usado en .pt-edit-panel (punto 1 de la ronda anterior) — basta para
   icono+acento en reposo (los abanicos viven fuera, position:absolute) y
   para que el campo de texto quepa sin agobiarse. */
.pt-dibujo-menu{width:110px;padding:4px;}

.tb-player{cursor:grab;}
.tb-player.pt-selected circle{stroke:var(--accent) !important;stroke-width:3.5 !important;}
.pt-selection-ring{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:5 4;pointer-events:none;}

/* M3.0-A — handles de escala/rotación */
.pt-handle{fill:var(--accent);stroke:var(--accent-ink);stroke-width:1.5;cursor:pointer;}
.pt-handle-rotate,.pt-handle-curve{cursor:grab;}
.pt-handle-guide{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 3;opacity:.6;pointer-events:none;}

/* M3.0-C — handles de formas (bounding box de rect, ejes de elipse,
   vértices de polígono) */
.pt-handle-shape{cursor:nwse-resize;}
.pt-handle-vertex{cursor:move;fill:var(--pos);}

/* Revisión P1 — menú contextual de jugador (clic derecho): popover
   flotante compacto, posicionado en coordenadas de pantalla (position:
   fixed) junto al punto del clic, independiente del zoom/pan del SVG. */
.pt-ctxmenu{
  position:fixed;z-index:40;background:var(--surface-translucent);backdrop-filter:blur(10px);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:0 10px 30px rgba(0,0,0,.5);
  padding:10px;display:flex;flex-direction:column;gap:8px;width:180px;
}
.pt-ctxmenu-title{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:800;}
.pt-ctxmenu .pt-prop-field input,.pt-ctxmenu .pt-prop-field select{width:100%;}
.pt-ctxmenu-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}

/* Fase 6D — Supabase: pantalla de login (gate antes del editor) e
   indicador de estado de guardado en la topbar. */
.pt-save-status{font-size:11px;font-weight:700;margin-right:10px;white-space:nowrap;}
.pt-save-status-saved{color:var(--pos);}
.pt-save-status-pending{color:var(--text-2);}
.pt-save-status-saving{color:var(--accent);}
.pt-save-status-conflict,.pt-save-status-error{color:var(--neg);}
/* Revisión de producto — CTA de login para anónimos: invitación, no
   puerta de entrada. Mismo tono que pt-btn-accent pero con su propia
   clase para poder diferenciarlo visualmente si hace falta más adelante
   (p.ej. un icono de nube propio) sin tocar el botón "Guardar ahora". */
.pt-btn-cloud{background:var(--accent);color:var(--accent-ink);}
.pt-cloud-popover{
  position:fixed;z-index:50;background:var(--surface-translucent);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px;width:220px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:10px;
}
.pt-cloud-popover p{margin:0;color:var(--text-2);font-size:12px;line-height:1.4;}
/* Modal de migración de pizarra local → cuenta, al iniciar sesión por
   primera vez con trabajo local real — ver confirmMigrateLocalBoard(). */
.pt-modal-overlay{position:fixed;inset:0;z-index:60;background:rgba(5,10,20,.6);display:flex;align-items:center;justify-content:center;}
.pt-modal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:320px;text-align:center;}
.pt-modal-card h2{font-size:15px;margin:0 0 8px;}
.pt-modal-card p{color:var(--text-2);font-size:13px;line-height:1.4;margin:0 0 16px;}
.pt-modal-actions{display:flex;gap:8px;justify-content:center;}
.pt-modal-card-wide{max-width:420px;text-align:left;}
.pt-suggestion-textarea{width:100%;min-height:110px;resize:vertical;background:var(--surface-2);
  border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);
  padding:9px 10px;font-size:12.5px;outline:none;font-family:inherit;line-height:1.5;
  box-sizing:border-box;margin-bottom:8px;}
.pt-suggestion-status{min-height:16px;font-size:11.5px;margin:0 0 8px;color:var(--text-2);}
.pt-suggestion-status-ok{color:var(--pos);}
.pt-suggestion-status-error{color:var(--neg);}

/* Feedback mínimo de arranque — ver bootPizarraTactica(). Reemplazado
   por completo en cuanto el editor real se monta. */
.pt-boot-loading{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.pt-boot-loading .brand-lockup{height:40px;opacity:.9;}
.pt-boot-loading span{color:var(--text-2);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}

/* Revisión de cabecera OVR (ver OVR_HEADER_SPEC.md) — Perfil: menú de
   cuenta/contexto, mismo lenguaje visual que el .account-menu de
   Analisis Tactico/index.html (misma paleta, mismos radios). */
.pt-profile-btn{display:flex;align-items:center;gap:7px;}
.pt-profile-avatar{width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:10.5px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.pt-account-menu{
  position:fixed;z-index:60;min-width:220px;background:var(--surface-translucent);backdrop-filter:blur(10px);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:0 10px 30px rgba(0,0,0,.5);padding:6px;display:flex;flex-direction:column;gap:2px;
}
.pt-account-menu-email{padding:8px 10px 10px;font-size:10.5px;color:var(--text-3);border-bottom:1px solid var(--border);margin-bottom:4px;word-break:break-all;}
.pt-account-menu-sep{height:1px;background:var(--border);margin:4px 6px;}
.pt-account-menu .pt-save-status{padding:2px 10px 8px;margin:0;}
.pt-account-menu .pt-btn{background:none;border:none;justify-content:flex-start;width:100%;border-radius:6px;}
.pt-account-menu .pt-btn:hover{background:var(--surface-2);}
.pt-account-menu .pt-btn-accent{background:var(--accent);color:var(--accent-ink);}
.pt-account-menu .pt-btn-accent:hover{background:var(--accent);}
.pt-account-menu .pt-btn-danger{color:var(--neg);}

/* Selector de fichero de Drive — mismo lenguaje que .drive-file-row de
   Analisis Tactico/index.html. */
.pt-drive-file-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;margin-bottom:14px;}
.pt-drive-file-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:11px 13px;cursor:pointer;text-align:left;color:var(--text);font-family:inherit;width:100%;}
.pt-drive-file-row:hover{border-color:var(--accent);background:var(--surface-3);}
.pt-drive-file-name{font-size:12px;font-weight:700;}
.pt-drive-file-date{font-size:9.5px;color:var(--text-3);flex:0 0 auto;}
.pt-drive-file-empty{font-size:11.5px;color:var(--text-3);text-align:center;padding:24px 10px;}