/* E2E PPM · Canvas de proyectos. Tokens y reglas de la skill e2eppm-brand. */
:root {
  --navy: #0B2042;
  --blue: #0074FF;
  --text: #7D869C;
  --ink: #33373D;
  --paper: #F7F6F5;
  --white: #FFFFFF;
  --line: #CED2D9;
  --err: #D33A3A;
  --warm: #D98A00;
  --ok: #0E7F3F;
  --display: "Clash Display", "Montserrat", sans-serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --track: .05rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: var(--sans); font-weight: 300; font-size: 1rem; line-height: 1.5rem;
  letter-spacing: var(--track); color: var(--text); background: var(--paper);
  height: 100vh; height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
}
input, select, textarea, button { font: inherit; letter-spacing: inherit; color: var(--navy); }

/* ---------- Botones (pill, como en el sitio) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: .8px solid var(--navy); background: var(--navy); color: var(--paper);
  font: 500 .875rem/1.375rem var(--sans); letter-spacing: var(--track);
  padding: 10px 32px; border-radius: 50px; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--blue); border-color: var(--blue); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover:not(:disabled) { background: var(--navy); color: var(--paper); }
.btn.sm { padding: 8px 22px; }
.btn.danger { background: transparent; color: var(--err); border-color: var(--err); }
.btn.danger:hover { background: var(--err); color: var(--white); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Barra superior ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 24px;
  background: var(--white); border-bottom: .8px solid var(--line); position: relative; z-index: 10;   /* por encima de las cards, para que el menú no quede tapado */
}
.topbar img { height: 30px; display: block; }
.topbar-divider { width: .8px; height: 28px; background: var(--line); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Menú de canvas */
.canvas-menu { position: relative; min-width: 0; }
.menu-button {
  display: inline-flex; align-items: center; gap: 10px; max-width: 300px; padding: 7px 14px 7px 12px; cursor: pointer;
  background: var(--white); border: .8px solid var(--line); border-radius: 50px;
  font: 500 .875rem/1.375rem var(--sans); letter-spacing: var(--track); color: var(--navy); transition: border-color .15s;
}
.menu-button:hover, .menu-button[aria-expanded="true"] { border-color: var(--blue); }
.menu-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.menu-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-button .chev { width: 16px; height: 16px; flex: none; }
.menu-button[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* El panel mide 26rem (crece con el tamaño de letra del navegador) y nunca muestra scroll horizontal:
   todo lo que hay adentro se encoge en lugar de ensancharlo. */
.menu-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 12; width: min(26rem, calc(100vw - 32px)); max-height: calc(100dvh - 92px);
  overflow-x: hidden; overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px; scrollbar-width: thin;
  background: var(--white); border: .8px solid var(--line); border-radius: 25px; box-shadow: 0 24px 60px rgba(11,32,66,.12);
}
.menu-panel > * { min-width: 0; }
.menu-panel .group-label { font-size: .75rem; }
/* minmax(0, 1fr): un nombre largo se corta con "…" en vez de ensanchar el panel */
.canvas-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.canvas-item { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 18px; }
.canvas-item.current { background: var(--paper); }
.canvas-open {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  background: none; border: 0; border-radius: 15px; text-align: left;
}
.canvas-open:hover .canvas-name { color: var(--blue); }
.canvas-open:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.canvas-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 1rem/1.5rem var(--sans); letter-spacing: var(--track); color: var(--navy); }
.canvas-meta { margin-left: auto; flex: none; font-size: .8125rem; line-height: 1.25rem; color: var(--text); font-variant-numeric: tabular-nums; }
.dot { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); }
.canvas-item.current .dot { background: var(--blue); border-color: var(--blue); }

.icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0; cursor: pointer;
  background: none; border: 0; border-radius: 50%; color: var(--text); transition: background-color .15s, color .15s;
}
.icon-btn:hover:not(:disabled) { background: var(--paper); color: var(--navy); }
.icon-btn.danger:hover:not(:disabled) { background: rgba(211,58,58,.08); color: var(--err); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.canvas-item .icon-btn { width: 36px; height: 36px; }
.canvas-item .icon-btn svg { width: 20px; height: 20px; }
.confirm-row { display: grid; gap: 10px; width: 100%; padding: 10px 12px; }
.confirm-text { font-size: .875rem; line-height: 1.375rem; color: var(--ink); }
.confirm-actions { display: flex; gap: 8px; }
.menu-new { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 20px; border-top: .8px solid var(--line); }
.menu-new .group-label { margin-bottom: 2px; }
/* El campo ocupa lo que sobra (minmax(0, 1fr)) y el botón su ancho: el ancho propio del campo no cuenta,
   así que no se sale del panel con ninguna letra ni zoom. */
.new-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }
.rename-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%; padding: 4px 4px 4px 10px; }
.new-row .btn { padding: 10px 28px; }
.rename-row input, .new-row input {
  width: 100%; min-width: 0; padding: 10px 2px; font: 300 1.0625rem/1.5rem var(--sans); letter-spacing: var(--track); color: var(--navy);
  background: transparent; border: 0; border-bottom: .8px solid var(--text); border-radius: 0; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.rename-row input:focus, .new-row input:focus { border-bottom-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
::placeholder { color: #A9B0C0; }
.menu-error { margin: 0; font-size: .8125rem; line-height: 1.25rem; color: var(--err); }
.menu-error:empty { display: none; }
.menu-error.ok { color: var(--ok); }   /* el aviso de algo que salió bien (ej. "Blueprint copiado") */
.menu-note { margin: 0; font-size: .8125rem; line-height: 1.25rem; }

/* Blueprint (JSON) del menú de canvas */
.menu-blueprint { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 20px; border-top: .8px solid var(--line); }
.menu-blueprint .group-label { margin-bottom: 0; }
.blueprint-row { display: flex; flex-wrap: wrap; gap: 8px; }
.blueprint-row .btn { padding: 8px 18px; }
.blueprint-import { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.blueprint-import textarea {
  width: 100%; min-width: 0; min-height: 6.5rem; max-height: 14rem; padding: 12px 14px; resize: vertical;
  font: 400 .75rem/1.125rem ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--navy); background: var(--white);
  border: .8px solid var(--line); border-radius: 16px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.blueprint-import textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }

/* Ruta de canvas abiertos por enlaces */
.crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; font: 500 .8125rem/1.25rem var(--sans); letter-spacing: var(--track); }
.crumb { max-width: 160px; padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy); }
button.crumb { background: none; border: 0; border-radius: 8px; color: var(--text); cursor: pointer; }
button.crumb:hover { color: var(--blue); }
button.crumb:focus-visible { outline: 2px solid var(--blue); }
.crumb-sep { color: var(--text); }

/* ---------- Lienzo ---------- */
.stage { position: relative; overflow: hidden; }
.viewport {
  position: absolute; inset: 0; overflow: hidden;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  /* Trama de puntos: canvas.js ajusta tamaño y posición para que acompañe el zoom y el arrastre */
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgba(11,32,66,.16) 1.2px, transparent 1.6px);
  background-size: 26px 26px;
}
.viewport.panning { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* Zoom con botones: transición corta. Al arrastrar no hay transición, el lienzo sigue al puntero. */
.viewport.animating { transition: background-size .2s ease, background-position .2s ease; }
.viewport.animating .world { transition: transform .2s ease; }

/* ---------- Colores (tokens de marca + tinte claro para rellenos) ---------- */
.color-navy  { --c: var(--navy); --tint: #E7EAF0; --c-text: var(--navy); }
.color-blue  { --c: var(--blue); --tint: #E6F1FF; --c-text: var(--blue); }
.color-green { --c: var(--ok);   --tint: #E3F2E9; --c-text: var(--ok); }
.color-amber { --c: var(--warm); --tint: #FBF0DC; --c-text: #A36700; }   /* ámbar más oscuro: el texto se lee sobre el papel */
.color-red   { --c: var(--err);  --tint: #FBE6E6; --c-text: var(--err); }
.color-gray  { --c: var(--text); --tint: #EEF0F3; --c-text: var(--text); }

/* ---------- Objetos del lienzo ---------- */
.objects-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.obj { position: absolute; cursor: grab; touch-action: none; font-size: var(--fs); line-height: var(--lh); }
.obj.size-sm { --fs: .875rem; --lh: 1.375rem; }
.obj.size-md { --fs: 1.25rem;  --lh: 1.75rem; }
.obj.size-lg { --fs: 2.25rem;  --lh: 2.75rem; }
.obj-body { position: relative; min-width: 0; }
.obj-shape { display: none; }   /* solo el rombo dibuja su silueta */

/* Marco de selección: un rectángulo alrededor del objeto (aunque la forma sea redonda) con tiradores en las
   cuatro esquinas. Todo se contrapone al zoom (calc(… / var(--zoom))) para verse igual a cualquier escala. */
.obj::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none; inset: calc(-4px / var(--zoom, 1));
  border: calc(1.5px / var(--zoom, 1)) solid transparent; border-radius: calc(3px / var(--zoom, 1)); transition: border-color .12s;
}
.obj:hover::before { border-color: rgba(0,116,255,.45); }
.obj.selected::before { border-color: var(--blue); }

.obj-handle {
  display: none; position: absolute; z-index: 3; transform: translate(-50%, -50%);
  width: calc(10px / var(--zoom, 1)); height: calc(10px / var(--zoom, 1));
  background: var(--white); border: calc(1.5px / var(--zoom, 1)) solid var(--blue); border-radius: calc(2px / var(--zoom, 1));
}
.obj-handle::after { content: ""; position: absolute; inset: calc(-8px / var(--zoom, 1)); }   /* zona de toque más grande */
.obj.selected .obj-handle { display: block; }
.obj-handle[data-corner="nw"] { left: calc(-4px / var(--zoom, 1)); top: calc(-4px / var(--zoom, 1)); cursor: nwse-resize; }
.obj-handle[data-corner="ne"] { left: calc(100% + 4px / var(--zoom, 1)); top: calc(-4px / var(--zoom, 1)); cursor: nesw-resize; }
.obj-handle[data-corner="sw"] { left: calc(-4px / var(--zoom, 1)); top: calc(100% + 4px / var(--zoom, 1)); cursor: nesw-resize; }
.obj-handle[data-corner="se"] { left: calc(100% + 4px / var(--zoom, 1)); top: calc(100% + 4px / var(--zoom, 1)); cursor: nwse-resize; }
/* La insignia de enlace ocupa la esquina superior derecha de estas formas: ahí no va tirador */
.obj.has-link.shape-card .obj-handle[data-corner="ne"],
.obj.has-link.shape-sticky .obj-handle[data-corner="ne"],
.obj.has-link.shape-bubble .obj-handle[data-corner="ne"] { display: none; }

/* Medida que aparece debajo del objeto mientras se redimensiona */
.obj-dims {
  display: none; position: absolute; z-index: 4; left: 50%; top: calc(100% + 16px / var(--zoom, 1)); transform: translateX(-50%);
  padding: calc(3px / var(--zoom, 1)) calc(10px / var(--zoom, 1)); border-radius: 50px; white-space: nowrap; pointer-events: none;
  background: var(--navy); color: var(--paper);
  font: 500 calc(12px / var(--zoom, 1)) / 1.3 var(--sans); letter-spacing: var(--track); font-variant-numeric: tabular-nums;
}
.obj.resizing .obj-dims { display: block; }

/* Insignia de las viñetas y notas que enlazan a otro canvas: un clic la abre. Se contrapone al zoom como los tiradores. */
.obj-link {
  position: absolute; z-index: 2; top: 0; right: 0; transform: translate(50%, -50%);
  display: grid; place-items: center; width: calc(26px / var(--zoom, 1)); height: calc(26px / var(--zoom, 1)); border-radius: 50%;
  background: var(--navy); color: var(--paper); cursor: pointer; border: calc(2px / var(--zoom, 1)) solid var(--white);
  transition: background-color .15s;
}
.obj-link:hover { background: var(--blue); }
.obj-link:focus-visible { outline: calc(2px / var(--zoom, 1)) solid var(--blue); outline-offset: calc(2px / var(--zoom, 1)); }
.obj-link svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* En las formas redondas la insignia va sobre el borde, no en la esquina vacía de la caja */
.obj.shape-circle .obj-link, .obj.shape-round .obj-link { top: 14.6%; right: 14.6%; }
.obj.shape-diamond .obj-link { top: 25%; right: 25%; }
.obj.shape-pill .obj-link { right: 14%; }

/* Enlace web del objeto: insignia azul con un eslabón en la esquina de arriba a la izquierda (la del canvas enlazado va a la derecha) */
.obj-url {
  position: absolute; z-index: 2; top: 0; left: 0; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: calc(26px / var(--zoom, 1)); height: calc(26px / var(--zoom, 1)); border-radius: 50%;
  background: var(--blue); color: var(--white); cursor: pointer; border: calc(2px / var(--zoom, 1)) solid var(--white);
  text-decoration: none; transition: background-color .15s;
}
.obj-url[hidden] { display: none; }
.obj-url:hover { background: var(--navy); }
.obj-url:focus-visible { outline: calc(2px / var(--zoom, 1)) solid var(--navy); outline-offset: calc(2px / var(--zoom, 1)); }
.obj-url svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.obj.shape-circle .obj-url, .obj.shape-round .obj-url, .obj.ellipse .obj-url { top: 14.6%; left: 14.6%; }
.obj.shape-diamond .obj-url { top: 25%; left: 25%; }
.obj.shape-pill .obj-url { left: 14%; }
/* El tirador de esa esquina cede el lugar a la insignia (los otros tres siguen sirviendo para cambiar el tamaño) */
.obj.has-url.shape-card .obj-handle[data-corner="nw"], .obj.has-url.shape-sticky .obj-handle[data-corner="nw"],
.obj.has-url.shape-bubble .obj-handle[data-corner="nw"], .obj.has-url.rect .obj-handle[data-corner="nw"],
.obj.has-url.text .obj-handle[data-corner="nw"] { display: none; }

/* Puntos de conexión: el medio de cada lado. Se ven al pasar el mouse o al seleccionar; arrastrar desde uno hasta otro objeto
   los conecta. Se contraponen al zoom como los tiradores. */
.obj-port {
  display: none; position: absolute; z-index: 3; transform: translate(-50%, -50%);
  width: calc(12px / var(--zoom, 1)); height: calc(12px / var(--zoom, 1)); border-radius: 50%; cursor: crosshair;
  background: var(--blue); border: calc(2px / var(--zoom, 1)) solid var(--white);
  box-shadow: 0 0 0 calc(1px / var(--zoom, 1)) rgba(0,116,255,.35);
}
.obj-port::after { content: ""; position: absolute; inset: calc(-8px / var(--zoom, 1)); }   /* zona de toque más grande */
.obj:hover .obj-port, .obj.selected .obj-port { display: block; }
.obj-port[data-side="top"] { left: 50%; top: calc(-4px / var(--zoom, 1)); }
.obj-port[data-side="bottom"] { left: 50%; top: calc(100% + 4px / var(--zoom, 1)); }
.obj-port[data-side="left"] { left: calc(-4px / var(--zoom, 1)); top: 50%; }
.obj-port[data-side="right"] { left: calc(100% + 4px / var(--zoom, 1)); top: 50%; }
/* El objeto sobre el que está el puntero mientras se conecta: ahí se va a soltar la línea */
.obj.connect-target::before { border-color: var(--blue); border-width: calc(3px / var(--zoom, 1)); background: rgba(0,116,255,.08); }

/* ---------- Conexiones entre objetos (connections.js) ----------
   Van debajo de las viñetas y notas (capa 1) y encima de las formas de fondo (capa 0). El grosor no cambia con el zoom. */
.connections-layer { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; z-index: 1; pointer-events: none; }
.conn-line {
  fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke;
  transition: stroke-width .12s;
}
.conn-arrow { fill: var(--c); }
/* Zona ancha e invisible para poder tocar la línea: 18 px de pantalla a cualquier zoom. No lleva `non-scaling-stroke`: para detectar el
   clic el navegador usa el ancho en unidades del lienzo (con ese efecto quedaba de 18 × zoom px: 3 px a 17 %); por eso se divide por --zoom. */
.conn-hit {
  fill: none; stroke: transparent; stroke-width: calc(18px / var(--zoom, 1)); stroke-linecap: round; stroke-linejoin: round;
  pointer-events: stroke; cursor: pointer;
}
.conn-arrow-hit { stroke: transparent; stroke-width: calc(10px / var(--zoom, 1)); stroke-linejoin: round; pointer-events: all; cursor: pointer; }   /* la punta también se toca */
.conn:hover .conn-line { stroke-width: 3; }
.conn.selected .conn-line { stroke-width: 3.5; }
.conn.selected .conn-line, .conn.selected .conn-arrow { filter: drop-shadow(0 0 3px rgba(0,116,255,.55)); }
.conn-preview {
  fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round;
  vector-effect: non-scaling-stroke; pointer-events: none;
}

/* ---------- Guías de alineación y cotas (guides.js) ----------
   Se dibujan encima de todo mientras se mueve o redimensiona un objeto. Los grosores no cambian con el zoom. */
.guides-layer { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; z-index: 1000002; pointer-events: none; }
.guide-line { stroke: var(--blue); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cota-line { stroke: var(--navy); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cota-label { fill: var(--navy); }
.cota-text {
  fill: var(--paper); font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums;
  text-anchor: middle; dominant-baseline: central; letter-spacing: .02em;
}

/* ---------- Seleccionar varios ---------- */
/* Un objeto que forma parte de un grupo seleccionado: solo el marco (sin tiradores ni puntos de conexión: se acomodan juntos) */
.obj.multi::before { border-color: var(--blue); background: rgba(0,116,255,.05); }
/* El objeto de referencia del grupo: marco navy, más grueso, para distinguirlo de los demás */
.obj.multi.anchor::before { border-color: var(--navy); border-width: calc(2.5px / var(--zoom, 1)); background: rgba(11,32,66,.06); }
/* Marco del grupo: detrás de todos los objetos (por eso z-index negativo); arrastrarlo desde cualquier parte mueve el grupo */
.group-frame {
  position: absolute; z-index: -1000001; cursor: move; touch-action: none;
  border: calc(1.5px / var(--zoom, 1)) dashed var(--blue); border-radius: calc(10px / var(--zoom, 1)); background: rgba(0,116,255,.04);
}
.marquee {
  position: absolute; z-index: 5; pointer-events: none; border: 1px solid var(--blue); background: rgba(0,116,255,.08);
}
.viewport.select-mode { cursor: crosshair; }
.viewport.select-mode .obj { cursor: pointer; }
/* Modo conectar: se toca un objeto y luego otro; no se mueven ni se seleccionan, y los puntos azules sobran */
.viewport.connect-mode, .viewport.connect-mode .obj { cursor: crosshair; }
.viewport.connect-mode .obj-port { display: none; }
.obj.connect-source::before { border-color: var(--navy); border-width: calc(3px / var(--zoom, 1)); background: rgba(11,32,66,.06); }
.tb-auto {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 8px; cursor: pointer;
  border: .8px solid var(--blue); border-radius: 50px; background: rgba(0,116,255,.06); color: var(--blue);
  font: 500 .75rem/1.25rem var(--sans); letter-spacing: var(--track); transition: background-color .15s, color .15s;
}
.tb-auto svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-auto:hover { background: var(--blue); color: var(--white); }
.tb-auto:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tb-count { padding: 0 10px 0 6px; font: 500 .8125rem/1.25rem var(--sans); letter-spacing: var(--track); color: var(--navy); white-space: nowrap; }

/* Formas y texto */
.obj.rect, .obj.ellipse {
  display: flex; align-items: center; justify-content: center; padding: 12px 16px; text-align: center;
  background: var(--tint); border: 1.6px solid var(--c); border-radius: 16px; color: var(--navy); font-weight: 600;
}
.obj.ellipse { border-radius: 50%; padding: calc(var(--w, 0px) * .12) calc(var(--w, 0px) * .14); background: none; border-color: transparent; }   /* --w: el ancho del objeto (objects.js); el aro y el fondo, aparte (abajo) */

/* Los círculos (la viñeta de proyecto y la forma «Círculo») dibujan su aro y su fondo con dos elipses recortadas, apiladas, como el rombo, y no
   con `border` + `border-radius: 50%`: a veces el navegador dibujaba por el centro de un aro así dos rayas finas (una horizontal y una vertical).
   El borde del objeto queda transparente: solo reserva su lugar, así que el texto y las medidas no cambian. */
.obj.project.shape-circle .obj-shape, .obj.ellipse .obj-shape { display: block; position: absolute; inset: 0; pointer-events: none; }
.obj.project.shape-circle .obj-shape::before, .obj.project.shape-circle .obj-shape::after,
.obj.ellipse .obj-shape::before, .obj.ellipse .obj-shape::after { content: ""; position: absolute; clip-path: ellipse(50% 50% at 50% 50%); }
.obj.project.shape-circle .obj-shape::before, .obj.ellipse .obj-shape::before { inset: 0; background: var(--c); }
.obj.project.shape-circle .obj-shape::after { inset: 1.6px; background: var(--white); }   /* 1,6 px: lo que quedaba del borde de 2 px a 125 % de escala */
.obj.ellipse .obj-shape::after { inset: 1.6px; background: var(--tint); }
.obj.ellipse.fill-white .obj-shape::after { background: var(--white); }
.obj.rect .obj-body, .obj.ellipse .obj-body { max-width: 100%; max-height: 100%; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }

.obj.rect.fill-white, .obj.text.fill-white { background: var(--white); }   /* fondo blanco (elegido en la barra del objeto); el del círculo, abajo */

.obj.text { padding: 6px 8px; border-radius: 8px; color: var(--c-text); font-weight: 500; }
.obj.text.size-lg { font-family: var(--display); font-weight: 400; }
.obj.text .obj-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.obj.text .obj-label:empty::before { content: "Texto"; opacity: .4; }   /* un texto vacío sigue siendo visible y seleccionable */

/* Viñetas de proyecto y notas: el tamaño de letra es fijo, no depende de "Tamaño de letra" */
.obj.project, .obj.note { font-size: .875rem; line-height: 1.375rem; color: var(--text); }
.obj h3 { margin: 0; font: 600 1rem/1.5rem var(--sans); letter-spacing: var(--track); color: var(--navy); overflow-wrap: anywhere; }
.v-text {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.v-top { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; min-width: 0; }
.v-client {
  margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track); text-transform: uppercase; color: var(--text);
}
.v-dates {
  display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: .8px solid var(--line);
  font: 500 .8125rem/1.25rem var(--sans); letter-spacing: var(--track); color: var(--navy); font-variant-numeric: tabular-nums;
}
.v-dates svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.v-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v-range { font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track); color: var(--navy); font-variant-numeric: tabular-nums; }
.v-range.late { color: var(--err); }

/* Viñeta de proyecto · tarjeta */
.obj.project.shape-card {
  padding: 14px 18px 16px; border-radius: 16px; background: var(--white); border: .8px solid var(--line); border-top: 6px solid var(--c);
}
.obj.project.shape-card h3 { margin-bottom: 4px; }

/* Descripción en las formas chicas: una nota corta bajo el título, de letra más chica y con pocas líneas (en lectura se corta con
   "…"; al editar se ve entera). La píldora crece con ella; el círculo y el rombo no pueden crecer: se agranda la forma. */
.obj.project.shape-pill .v-text, .edit-pill .in-text { font-size: .8125rem; line-height: 1.25rem; }
.obj.project.shape-pill .v-text { -webkit-line-clamp: 2; }
.obj.project.shape-circle .v-text, .edit-circle .in-text { font-size: .75rem; line-height: 1.125rem; }
.obj.project.shape-circle .v-text { -webkit-line-clamp: var(--desc-lines, 3); }
.obj.project.shape-diamond .v-text, .edit-diamond .in-text { font-size: .6875rem; line-height: 1rem; }
.obj.project.shape-diamond .v-text { -webkit-line-clamp: var(--desc-lines, 2); }
.obj.selected.shape-circle .obj-body, .obj.selected.shape-diamond .obj-body { overflow-y: auto; scrollbar-width: none; }
.obj.selected.shape-circle .obj-body::-webkit-scrollbar, .obj.selected.shape-diamond .obj-body::-webkit-scrollbar { display: none; }

/* Viñeta de proyecto · píldora */
.obj.project.shape-pill {
  display: flex; flex-direction: column; justify-content: center; padding: 8px 28px;
  border-radius: 50px; background: var(--white); border: 1.6px solid var(--c);
}
.obj.project.shape-pill h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Viñeta de proyecto · círculo */
.obj.project.shape-circle {
  display: flex; align-items: center; justify-content: center; padding: calc(var(--w, 0px) * .12); text-align: center;
  border-radius: 50%; background: none; border: 2px solid transparent;   /* el aro y el fondo se dibujan aparte (.obj-shape, abajo); el borde solo reserva su lugar */
}
.obj.project.shape-circle .obj-body { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; max-height: 100%; overflow: hidden; }
.obj.project.shape-circle .v-row { justify-content: center; }
.obj.project.shape-circle h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Viñeta de proyecto · rombo (hito): la silueta se dibuja aparte para que el marco de selección siga siendo rectangular */
.obj.project.shape-diamond { display: flex; align-items: center; justify-content: center; padding: calc(var(--w, 0px) * .25) calc(var(--w, 0px) * .24); text-align: center; }
.obj.shape-diamond .obj-shape { display: block; position: absolute; inset: 0; pointer-events: none; }
.obj.shape-diamond .obj-shape::before,
.obj.shape-diamond .obj-shape::after { content: ""; position: absolute; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.obj.shape-diamond .obj-shape::before { inset: 0; background: var(--c); }
.obj.shape-diamond .obj-shape::after { inset: 3px; background: var(--white); }
.obj.project.shape-diamond .obj-body { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; max-height: 100%; overflow: hidden; }
.obj.project.shape-diamond h3 { font-size: .9375rem; line-height: 1.25rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.obj.project.shape-diamond h3.tight { -webkit-line-clamp: 2; }

/* Notas · post-it, globo y redonda */
.obj.note .v-text { color: var(--ink); -webkit-line-clamp: 8; }
.obj.note.shape-sticky, .obj.note.shape-bubble, .obj.note.shape-round { background: var(--tint); border: .8px solid rgba(11,32,66,.08); }
.obj.note.shape-sticky { padding: 14px 18px 16px; border-radius: 6px 6px 0 6px; }
.obj.note.shape-sticky::after {   /* esquina doblada */
  content: ""; position: absolute; right: -.8px; bottom: -.8px; width: 22px; height: 22px;
  background: linear-gradient(135deg, transparent 50%, rgba(11,32,66,.12) 50%);
}
.obj.note.shape-bubble { padding: 14px 18px; border-radius: 22px; }
.obj.note.shape-bubble::after {   /* cola del globo */
  content: ""; position: absolute; left: 28px; bottom: -13px;
  border-top: 14px solid var(--tint); border-right: 16px solid transparent;
}
.obj.note.shape-round {
  display: flex; align-items: center; justify-content: center; padding: calc(var(--w, 0px) * .14); text-align: center; border-radius: 50%;
}
.obj.note.shape-round .obj-body { max-width: 100%; max-height: 100%; overflow: hidden; }

/* Chips de estado */
.chip {
  display: inline-block; padding: 2px 10px; border-radius: 50px; white-space: nowrap;
  font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track); background: var(--paper); color: var(--navy);
}
.chip.status-in_progress { background: rgba(0,116,255,.1); color: var(--blue); }
.chip.status-on_hold { background: rgba(217,138,0,.12); color: #A36700; }
.chip.status-done { background: rgba(14,127,63,.12); color: var(--ok); }
.chip.overdue { background: rgba(211,58,58,.1); color: var(--err); }

/* ---------- Controles de zoom (pill flotante) ---------- */
.zoom {
  position: absolute; right: 24px; bottom: 24px; z-index: 1;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--white); border: .8px solid var(--line); border-radius: 50px;
}
.zoom button {
  display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50px; background: transparent; color: var(--navy); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.zoom button:hover:not(:disabled) { background: var(--paper); color: var(--blue); }
.zoom button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.zoom button:disabled { color: var(--line); cursor: default; }
.zoom button[aria-pressed="true"] { color: var(--blue); }   /* interruptor activado (guías y medidas) */
.zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.zoom .zoom-level {
  min-width: 60px; padding: 0 8px;
  font: 500 .8125rem/1 var(--sans); letter-spacing: var(--track); font-variant-numeric: tabular-nums;
}
.zoom-divider { width: .8px; height: 22px; margin: 0 4px; background: var(--line); }

/* Pista de uso: se oculta después del primer arrastre */
.hint {
  position: absolute; left: 50%; bottom: 24px; z-index: 1; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  padding: 8px 18px; border: .8px solid var(--line); border-radius: 50px; background: var(--white);
  font: 500 .8125rem/1.25rem var(--sans); letter-spacing: var(--track); color: var(--navy);
  transition: opacity .35s;
}
.hint.hidden { opacity: 0; }

/* ---------- Card flotante de diseño (paleta, a la izquierda) ---------- */
.palette {
  position: absolute; top: 16px; left: 16px; z-index: 3; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
  background: var(--white); border: .8px solid var(--line); border-radius: 25px; box-shadow: 0 24px 60px rgba(11,32,66,.12);
  width: 17rem; max-height: calc(100% - 32px);   /* ancho en rem: si el navegador usa letra más grande, la card crece con ella y nada se corta */
}

.eyebrow { display: block; margin-bottom: 4px; font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track); text-transform: uppercase; color: var(--blue); }
.group-label { display: block; margin-bottom: 8px; font: 500 .6875rem/1rem var(--sans); letter-spacing: var(--track); text-transform: uppercase; color: var(--blue); }
.chev {
  grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 2;
  stroke-linecap: round; transition: transform .2s;
}
kbd {
  padding: 0 6px; border: .8px solid var(--line); border-radius: 6px; background: var(--paper);
  font: 500 .6875rem/1.0625rem var(--sans); letter-spacing: var(--track); color: var(--navy);
}

/* Paleta */
.palette-head {
  display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; padding: 16px 20px 12px;
  background: none; border: 0; border-radius: 25px; text-align: left; cursor: pointer;
}
.palette-head .eyebrow { margin: 0; }
.palette-title { grid-column: 1; font: 400 1.25rem/1.75rem var(--display); letter-spacing: var(--track); color: var(--navy); }
.palette-head[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.palette-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.palette-body { display: grid; gap: 14px; padding: 2px 16px 16px; }
.palette-groups { display: grid; }

.tabs { display: flex; padding: 3px; border: .8px solid var(--line); border-radius: 50px; background: var(--paper); }
.tab {
  flex: 1; padding: 6px 8px; border: 0; border-radius: 50px; background: none; cursor: pointer;
  font: 500 .8125rem/1.25rem var(--sans); letter-spacing: var(--track); color: var(--text); transition: background-color .15s, color .15s;
}
.tab:hover { color: var(--navy); }
.tab[aria-selected="true"] { background: var(--navy); color: var(--paper); }
.tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tool {
  display: grid; gap: 6px; padding: 6px 6px 8px; cursor: grab; touch-action: none; user-select: none;
  background: var(--white); border: .8px solid var(--line); border-radius: 16px; transition: border-color .15s;
}
.tool:hover { border-color: var(--blue); }
.tool:active { cursor: grabbing; }
.tool:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tool-preview { display: block; height: 56px; border-radius: 11px; background: var(--paper); transition: background-color .15s; }
.tool:hover .tool-preview { background: var(--white); }
.tool-name { font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track); color: var(--navy); text-align: center; }

.palette-tips {
  list-style: none; margin: 0; padding: 14px 0 0; border-top: .8px solid var(--line);
  display: grid; gap: 8px; font-size: .75rem; line-height: 1.125rem;
}
.palette-tips li { display: flex; align-items: flex-start; gap: 8px; }
.palette-tips svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Fantasma que acompaña al puntero mientras se arrastra una herramienta al lienzo */
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; display: grid; place-items: center;
  border: 2px dashed var(--blue); border-radius: 16px; background: rgba(0,116,255,.08); color: var(--blue);
  font: 500 .8125rem/1 var(--sans); letter-spacing: var(--track); transition: opacity .1s;
}
.drag-ghost.round { border-radius: 50%; }
.drag-ghost.pill { border-radius: 999px; }
.drag-ghost.off { opacity: .35; border-color: var(--text); color: var(--text); }   /* fuera del lienzo: no se va a soltar */

/* ---------- Edición dentro de la card (el objeto seleccionado: editor.js) ---------- */
/* Los campos se ven como el texto de lectura (mismo tamaño, color y posición): solo cambia el fondo al pasar el mouse
   o escribir. Así la card no "salta" al seleccionarla. Los márgenes negativos compensan el relleno de cada campo. */
.edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; width: 100%; min-width: 0; }
.obj .in-field, .obj .in-date, .obj .in-status, .obj .in-add-chip { touch-action: manipulation; }
.in-field {
  display: block; width: calc(100% + 12px); min-width: 0; margin: 0 -6px; padding: 1px 6px;
  border: 0; border-radius: 8px; outline: none; background: transparent; cursor: text;
  font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit; text-overflow: ellipsis;
  -webkit-user-select: text; user-select: text; transition: background-color .15s, box-shadow .15s;
}
.in-field:hover, .in-date:hover { background: rgba(0,116,255,.06); }
.in-field:focus, .in-date:focus { background: rgba(0,116,255,.08); box-shadow: inset 0 0 0 1.5px var(--blue); }
.in-field.bad { box-shadow: inset 0 0 0 1.5px var(--err); background: rgba(211,58,58,.06); }
.in-field::placeholder { color: var(--text); opacity: .65; font-weight: 300; }

/* Cajas de texto que crecen con lo que se escribe: una réplica invisible del texto le da el alto al campo */
.autosize { display: grid; width: calc(100% + 12px); min-width: 0; margin: 0 -6px; }
.autosize::after {
  content: attr(data-value) " "; grid-area: 1 / 1; visibility: hidden; pointer-events: none; padding: 1px 6px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.autosize > .in-field { grid-area: 1 / 1; width: 100%; margin: 0; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }

.in-title { font: 600 1rem/1.5rem var(--sans); letter-spacing: var(--track); color: var(--navy); }
.in-text { color: var(--text); }
.obj.note .in-text { color: var(--ink); }
.in-client { font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track); text-transform: uppercase; color: var(--text); text-align: right; }
.in-label { text-align: inherit; }
.edit-diamond .in-title { font-size: .9375rem; line-height: 1.25rem; }
.edit-note .in-title { margin-bottom: 2px; }

/* Estado: un desplegable con el aspecto de la etiqueta que se ve en el lienzo */
.in-status {
  appearance: none; -webkit-appearance: none; min-width: 0; padding: 2px 24px 2px 10px; border: 0; border-radius: 50px; cursor: pointer;
  font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track); background-color: var(--paper); color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D869C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 11px;
}
.in-status.status-in_progress { background-color: rgba(0,116,255,.1); color: var(--blue); }
.in-status.status-on_hold { background-color: rgba(217,138,0,.12); color: #A36700; }
.in-status.status-done { background-color: rgba(14,127,63,.12); color: var(--ok); }
.in-status:hover { box-shadow: inset 0 0 0 1px currentColor; }
.in-status:focus-visible, .in-add-chip:focus-visible, .in-remove:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.in-status option { color: var(--navy); background: var(--white); }

.in-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin-bottom: 6px; }
.in-top:not(:has(> :not([hidden]))) { display: none; }   /* sin estado, sin "Vencido" y sin cliente, la fila no se ve */
.edit-pill .in-top, .edit-circle .in-top, .edit-diamond .in-top { margin-bottom: 0; }
.edit-pill .in-add { justify-content: flex-start; }
.rm-status, .rm-status > :first-child { flex: none; }
.edit-circle .in-top, .edit-diamond .in-top { justify-content: center; }

/* Atributo opcional con su "×" para quitarlo */
.in-removable { display: flex; align-items: flex-start; gap: 2px; min-width: 0; }
.in-removable > :first-child { flex: 1; min-width: 0; }
.rm-client { flex: 1 1 5rem; margin-left: auto; }
.in-remove {
  flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  font: 400 1rem/1 var(--sans); color: var(--text); opacity: 0; transition: opacity .15s, background-color .15s;
}
.edit-card .rm-dates .in-remove { margin-top: 12px; }   /* alinea la "×" con la primera fecha, no con la línea de arriba */
.in-removable:hover .in-remove, .in-removable:focus-within .in-remove, .in-remove:focus-visible { opacity: 1; }
.in-remove:hover { background: var(--paper); color: var(--navy); }
@media (hover: none) { .in-remove { opacity: 1; } }

/* Plazo */
.in-dates-block { min-width: 0; }
.in-dates {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; padding-top: 8px; border-top: .8px solid var(--line);
  font: 500 .8125rem/1.25rem var(--sans); letter-spacing: var(--track); color: var(--navy); font-variant-numeric: tabular-nums;
}
.in-dates svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.in-date-pair { display: flex; flex: 1 1 8.5rem; align-items: center; gap: 6px; min-width: 0; cursor: text; }
.in-date-pair > span { font-size: .75rem; color: var(--text); }
.in-date {
  flex: 1 1 0; min-width: 0; padding: 2px 4px; border: 0; border-radius: 8px; outline: none; background: transparent; cursor: text;
  font: inherit; letter-spacing: inherit; color: var(--navy); transition: background-color .15s, box-shadow .15s;
}
.in-error { display: block; margin-top: 4px; font-size: .75rem; line-height: 1.125rem; color: var(--err); }
.in-error[hidden] { display: none; }
/* En las formas chicas el plazo va en una línea corta, sin ícono: un clic en la fecha abre el calendario */
.compact .in-dates { flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin: 0; padding: 0; border-top: 0; font-size: .6875rem; line-height: 1.125rem; }
.compact .in-date { flex: none; width: 5.6rem; text-align: center; }
.compact .in-date::-webkit-calendar-picker-indicator { display: none; }
.edit-pill .in-dates { justify-content: flex-start; }

/* "+ Cliente", "+ Descripción", "+ Plazo": agregan el atributo en la misma card */
.in-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.compact .in-add { margin-top: 0; justify-content: center; }
.in-add-chip {
  padding: 1px 10px; border: .8px dashed var(--text); border-radius: 50px; background: transparent; cursor: pointer;
  font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track); color: var(--text); transition: border-color .15s, color .15s;
}
.in-add-chip:hover { border-style: solid; border-color: var(--blue); color: var(--blue); }

/* Referencias a otros proyectos. En la tarjeta de lectura son chips que se abren con un clic (↗ este proyecto hace
   referencia a él, ↙ él hace referencia a este); al editar, cada una tiene su "×" y un selector agrega más. */
.v-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: .8px solid var(--line); }
.v-ref {
  max-width: 100%; padding: 1px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  border: .8px solid var(--line); border-radius: 50px; background: var(--white);
  font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track); color: var(--navy);
  transition: border-color .15s, color .15s, background-color .15s;
}
.v-ref.in { color: var(--text); }
.v-ref:hover { border-color: var(--blue); color: var(--blue); background: rgba(0,116,255,.06); }
.v-ref:focus-visible, .in-ref:focus-visible, .in-ref-x:focus-visible, .in-ref-add:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.in-links { display: grid; gap: 10px; min-width: 0; margin-top: 10px; padding-top: 10px; border-top: .8px solid var(--line); }
.in-links[hidden] { display: none; }
.in-ref-section { display: grid; gap: 6px; min-width: 0; }
.in-ref-title { font: 500 .6875rem/1rem var(--sans); letter-spacing: var(--track); text-transform: uppercase; color: var(--blue); }
.in-ref-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.in-ref-list:empty { display: none; }
.in-ref-chip { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; border: .8px solid var(--line); border-radius: 50px; background: var(--white); }
.in-ref {
  min-width: 0; padding: 1px 4px 1px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  border: 0; border-radius: 50px; background: none; font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track); color: var(--navy);
}
.in-ref:only-child { padding-right: 10px; }
.in-ref:hover { color: var(--blue); }
.in-ref-x {
  flex: none; width: 20px; height: 20px; margin-right: 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  font: 400 1rem/1 var(--sans); color: var(--text); transition: background-color .15s, color .15s;
}
.in-ref-x:hover { background: var(--paper); color: var(--navy); }
.in-ref-add {
  appearance: none; -webkit-appearance: none; justify-self: start; min-width: 0; max-width: 100%; padding: 2px 26px 2px 10px; cursor: pointer; text-overflow: ellipsis;
  border: .8px dashed var(--text); border-radius: 50px; background-color: transparent; color: var(--text);
  font: 500 .75rem/1.125rem var(--sans); letter-spacing: var(--track);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D869C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 11px; transition: border-color .15s, color .15s;
}
.in-ref-add:hover:not(:disabled) { border-style: solid; border-color: var(--blue); color: var(--blue); }
.in-ref-add:disabled { cursor: default; opacity: .6; }
.in-ref-add option, .in-ref-add optgroup { color: var(--navy); background: var(--white); }

/* Manija para arrastrar la card seleccionada (los campos de adentro no la mueven) */
.obj-grip { display: none; position: absolute; z-index: 2; left: 30%; right: 30%; top: 0; height: 16px; cursor: grab; }
.obj-grip::after {
  content: ""; position: absolute; left: 50%; top: 5px; width: 28px; height: 4px; transform: translateX(-50%);
  border-radius: 4px; background: var(--line); transition: background-color .15s;
}
.obj-grip:hover::after { background: var(--blue); }
.obj.selected.shape-card .obj-grip, .obj.selected.shape-sticky .obj-grip, .obj.selected.shape-bubble .obj-grip,
.obj.selected.shape-circle .obj-grip, .obj.selected.shape-round .obj-grip { display: block; }

/* ---------- Barra de opciones del objeto seleccionado (pegada a él: toolbar.js) ---------- */
.obj-toolbar {
  position: absolute; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  max-width: calc(100% - 16px); padding: 5px 10px;
  background: var(--white); border: .8px solid var(--line); border-radius: 25px; box-shadow: 0 12px 32px rgba(11,32,66,.14);
}
.tb-group { display: flex; align-items: center; gap: 2px; }
.tb-group + .tb-group { margin-left: 8px; }   /* sin líneas divisorias: si la barra se parte en dos filas no quedan sueltas */
.tb-shape {
  width: 44px; height: 30px; padding: 2px; cursor: pointer; background: transparent;
  border: 1.5px solid transparent; border-radius: 10px; transition: border-color .15s, background-color .15s;
}
.tb-shape svg, .tool-preview svg { display: block; width: 100%; height: 100%; }
.tb-shape:hover { background: var(--paper); }
.tb-shape.on { border-color: var(--blue); background: rgba(0,116,255,.06); }
.tb-color {
  width: 22px; height: 22px; margin: 0 3px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer;
  transition: box-shadow .15s;
}
.tb-color.on { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--c); }
/* Fondo de una forma: con el color del objeto (o sin fondo, en el texto) y blanco; el borde toma el color elegido */
.tb-fill {
  width: 26px; height: 20px; margin: 0 3px; padding: 0; background: var(--white); border: 1.5px solid var(--c); border-radius: 6px;
  cursor: pointer; transition: box-shadow .15s;
}
.tb-fill.tinted { background: var(--tint); }
.tb-fill.clear { background: transparent; border-style: dashed; }
.tb-fill.on { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--blue); }
.tb-size {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  font-family: var(--display); color: var(--navy); transition: background-color .15s, color .15s;
}
.tb-size.sm { font-size: .75rem; }
.tb-size.md { font-size: 1rem; }
.tb-size.lg { font-size: 1.375rem; }
.tb-size:hover { background: var(--paper); }
.tb-size.on { background: var(--navy); color: var(--paper); }
.obj-toolbar .icon-btn.on { background: rgba(0,116,255,.1); color: var(--blue); }   /* interruptor activo (la flecha de la conexión) */
.tb-shape:focus-visible, .tb-color:focus-visible, .tb-fill:focus-visible, .tb-size:focus-visible, .tb-link select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tb-link { position: relative; display: flex; align-items: center; }
.tb-link svg { position: absolute; left: 10px; width: 14px; height: 14px; pointer-events: none; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-link select {
  appearance: none; -webkit-appearance: none; max-width: 11rem; padding: 4px 26px 4px 30px; cursor: pointer; text-overflow: ellipsis;
  border: .8px solid var(--line); border-radius: 50px; background-color: var(--white);
  font: 500 .75rem/1.25rem var(--sans); letter-spacing: var(--track); color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2042' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 13px; transition: border-color .15s;
}
.tb-link select:hover { border-color: var(--blue); }
.tb-url input {
  width: 11rem; padding: 4px 12px 4px 30px; border: .8px solid var(--line); border-radius: 50px; background: var(--white);
  font: 500 .75rem/1.25rem var(--sans); letter-spacing: var(--track); color: var(--navy); transition: border-color .15s;
}
.tb-url input::placeholder { color: var(--text); font-weight: 400; }
.tb-url input:hover { border-color: var(--blue); }
.tb-url input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tb-ref select { max-width: 14rem; }


/* ---------- Solo vista (view.html) ---------- */
.view-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 14px; border-radius: 50px; white-space: nowrap;
  background: rgba(0,116,255,.1); color: var(--blue); font: 500 .8125rem/1.25rem var(--sans); letter-spacing: var(--track);
}
.view-badge svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-button.single { cursor: default; }
.menu-button.single:hover { border-color: var(--line); }
.menu-button.single .chev { display: none; }
.viewer .obj.has-url { cursor: pointer; }   /* en solo vista, un clic en el objeto abre su enlace web */
.viewer .obj::before { display: none; }   /* nada se puede seleccionar: sin marco al pasar el mouse */
.view-gone { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: var(--paper); }
.view-gone > div { max-width: 26rem; padding: 40px; text-align: center; background: var(--white); border: .8px solid var(--line); border-radius: 25px; }
.view-gone h2 { margin: 0 0 8px; font: 400 1.5rem/2rem var(--display); letter-spacing: var(--track); color: var(--navy); }
.view-gone p { margin: 0; }
@media (max-width: 640px) { .view-badge { padding: 6px 10px; } }

/* ---------- Inicio de sesión (login.html): navy con trama de puntos y tarjeta blanca centrada ---------- */
body.login {
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  height: auto; min-height: 100vh; min-height: 100dvh; padding: 20px; background: var(--navy);
}
body.login::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(124,166,255,.18) 1px, transparent 1px); background-size: 26px 26px;
}
.login-card {
  position: relative; z-index: 1; width: 100%; max-width: 26.25rem; padding: 44px 40px;
  background: var(--white); border-radius: 25px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.login-card .logo-img { display: block; height: 34px; margin: 0 auto 28px; }
.login-card h1 { margin: 0 0 6px; text-align: center; font: 400 1.75rem/2.25rem var(--display); letter-spacing: var(--track); color: var(--navy); }
.login-card .login-hint { margin: 0 0 28px; text-align: center; font-size: .875rem; line-height: 1.375rem; }
.login-card label { display: block; margin-bottom: 18px; }
.login-card label span { display: block; margin-bottom: 6px; font: 500 .8125rem/1.25rem var(--sans); letter-spacing: var(--track); color: var(--navy); }
.login-card input {
  width: 100%; min-width: 0; padding: 8px 2px; font: 300 1.0625rem/1.625rem var(--sans); letter-spacing: var(--track); color: var(--navy);
  background: transparent; border: 0; border-bottom: .8px solid var(--text); border-radius: 0; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.login-card input:focus { border-bottom-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.login-card input.bad { border-bottom-color: var(--err); box-shadow: 0 1px 0 var(--err); }
.login-error { margin: -6px 0 0; font-size: .8125rem; line-height: 1.25rem; color: var(--err); }
.login-error:empty { display: none; }
.login-card .btn { width: 100%; margin-top: 12px; padding: 12px 24px; font-size: .9375rem; }
@media (max-width: 640px) { .login-card { padding: 36px 24px; } }

/* Botón y panel "Compartir" (share.js): el enlace de solo vista del canvas */
.share-menu { position: relative; margin-left: auto; }
.share-menu + .logout { margin-left: 0; }
.share-button {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer;
  background: var(--white); border: .8px solid var(--line); border-radius: 50px;
  font: 500 .875rem/1.375rem var(--sans); letter-spacing: var(--track); color: var(--navy); transition: border-color .15s, color .15s;
}
.share-button:hover, .share-button[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }
.share-button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.share-button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.share-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 12; width: min(26rem, calc(100vw - 32px)); max-height: calc(100dvh - 92px);
  overflow-x: hidden; overflow-y: auto; display: grid; gap: 14px; padding: 22px; scrollbar-width: thin;
  background: var(--white); border: .8px solid var(--line); border-radius: 25px; box-shadow: 0 24px 60px rgba(11,32,66,.12);
}
.share-panel h2 { margin: 0; font: 400 1.25rem/1.75rem var(--display); letter-spacing: var(--track); color: var(--navy); }
.share-panel #share-body { display: grid; gap: 14px; min-width: 0; }
.share-note { margin: 0; font-size: .875rem; line-height: 1.375rem; }
.share-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.share-link input {
  width: 100%; min-width: 0; padding: 8px 2px; text-overflow: ellipsis; font: 300 .9375rem/1.5rem var(--sans); letter-spacing: var(--track); color: var(--navy);
  background: transparent; border: 0; border-bottom: .8px solid var(--text); border-radius: 0; outline: none; transition: border-color .2s, box-shadow .2s;
}
.share-link input:focus { border-bottom-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-actions .btn { text-decoration: none; }
.share-confirm { display: grid; gap: 10px; padding: 12px 14px; background: var(--paper); border-radius: 16px; }
.share-confirm p { margin: 0; font-size: .875rem; line-height: 1.375rem; color: var(--ink); }
.share-error { margin: 0; font-size: .8125rem; line-height: 1.25rem; color: var(--err); }

/* Botón "Salir" de la barra superior */
.logout {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 7px 14px; cursor: pointer;
  background: var(--white); border: .8px solid var(--line); border-radius: 50px;
  font: 500 .875rem/1.375rem var(--sans); letter-spacing: var(--track); color: var(--navy); transition: border-color .15s, color .15s;
}
.logout:hover { border-color: var(--blue); color: var(--blue); }
.logout:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.logout svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Aviso (toast) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 20; transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 10px 22px; border-radius: 50px; background: var(--navy); color: var(--paper);
  font-size: .875rem; line-height: 1.375rem; text-align: center;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }
.toast.show.has-action { pointer-events: auto; }   /* solo mientras se ve: así el botón "Deshacer" se puede tocar */
.toast.error { background: var(--err); color: var(--white); }
.toast-action {
  margin-left: 14px; padding: 2px 14px; cursor: pointer; background: transparent; color: var(--paper);
  border: .8px solid rgba(247,246,245,.6); border-radius: 50px;
  font: 500 .8125rem/1.25rem var(--sans); letter-spacing: var(--track); transition: background-color .15s, color .15s;
}
.toast-action:hover { background: var(--paper); color: var(--navy); }
.toast-action:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .topbar { padding: 0 16px; gap: 12px; }
  .topbar img { height: 24px; }
  .menu-button { max-width: 220px; }
  .menu-panel { position: fixed; top: 72px; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 84px); }
  .crumbs { display: none; }
  .logout span, .share-button span { display: none; }   /* en celular, solo el ícono */
  .logout, .share-button { padding: 7px 10px; }
  .share-menu { position: static; }
  .share-panel { position: fixed; top: 72px; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 84px); }
  .zoom { right: 16px; bottom: 16px; }
  .hint { display: none; }
  .palette { top: 12px; left: 12px; right: 12px; width: auto; }
  .tools { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  /* La barra de opciones del objeto queda fija abajo, sobre el zoom (en escritorio va pegada al objeto) */
  .obj-toolbar { position: fixed; top: auto; left: 8px; right: 8px; bottom: 72px; max-width: none; justify-content: center; border-radius: 22px; }
  .toast { bottom: 76px; }
}
@media (max-width: 420px) {
  .topbar-divider { display: none; }
}