html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.canvas {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  background: #0b0e1a;
  color: var(--canvas-node-text);
  font-family: Calibri, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* === Toolbar === */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: #0b0f23;
  border-bottom: 1px solid #141a3b;
  box-shadow: 0 1px 0 #0a0d1e inset;
  user-select: none;
}
.toolbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid #29305f;
  background: #121739;
  color: #cfe1ff;
  border-radius: 10px;
  cursor: pointer;
}
.toolbar .btn:hover { border-color: #3b4588; }
.btn-left { margin-left: auto; }

.sep { width: 1px; height: 22px; background: #202653; margin: 0 6px; }
.hint { opacity: .7; font-size: 12px; }

/* === Leyenda inferior === */
.legend {
  position: absolute;
  right: 10px; bottom: 10px;
  font-size: 14px; opacity: .7;
  font-weight: 400;
  background: rgba(0,0,0,.25);
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #1b2146;
}
.leg-r {
  right: 10px; bottom: 10px;
}
/* === Leyenda inferior === */
.leg-l {
  right: auto; bottom: 10px;
}

/* Transición suave para las leyendas */
.viewport .legend {
  transition: opacity .18s ease, transform .18s ease;
}

/* Estado oculto (toggle) */
.viewport.help-off .legend {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

/* (opcional) feedback visual en el botón activo */
.btn[aria-pressed="false"] { opacity: .75; }

/* === Viewport/Cámara === */
.viewport {
  position: relative;
  overflow: hidden;
  /* variables de sync */
  --bgx: 0px;
  --bgy: 0px;
  --bgs: 1;
  /*background: transparent; /**/
  background:
    /* puntos (ya tiene size por celda) */
    radial-gradient(circle at center, var(--canvas-grid-dot) 1px, transparent 1px)
      0 0 / calc(var(--canvas-grid-size) * var(--bgs)) calc(var(--canvas-grid-size) * var(--bgs)),
    /* líneas horizontales */
    repeating-linear-gradient(
      0deg,
      var(--canvas-grid-line) 0 1px,
      transparent 1px calc(var(--canvas-grid-size) * var(--bgs))
    )
      0 0 / calc(var(--canvas-grid-size) * var(--bgs)) calc(var(--canvas-grid-size) * var(--bgs)),
    /* líneas verticales */
    repeating-linear-gradient(
      90deg,
      var(--canvas-grid-line) 0 1px,
      transparent 1px calc(var(--canvas-grid-size) * var(--bgs))
    )
      0 0 / calc(var(--canvas-grid-size) * var(--bgs)) calc(var(--canvas-grid-size) * var(--bgs));

  background-position:
    var(--bgx) var(--bgy),
    var(--bgx) var(--bgy),
    var(--bgx) var(--bgy);
}
/* === Titles === */
.viewport h4 {
  font-weight: 400;
}

.meta{
  font-weight: 400;
}
.drag-handle {
  font-weight: 300;
}

/* El elemento transformado (mundo) */
.camera {
  position: absolute;
  inset: 0;
  /* Grilla infinita tipo */
  background: transparent; /**/
  /*background: /**/
    /* puntos */
    /*radial-gradient(circle at center, var(--canvas-grid-dot) 1px, transparent 1px) 0 0 / var(--canvas-grid-size) var(--canvas-grid-size),/**/
    /* líneas */
    /*repeating-linear-gradient(0deg, var(--canvas-grid-line) 0 1px, transparent 1px var(--canvas-grid-size)), /**/
    /*repeating-linear-gradient(90deg, var(--canvas-grid-line) 0 1px, transparent 1px var(--canvas-grid-size));/**/
  transform-origin: 0 0;  /* importante para los cálculos */
  will-change: transform; /* ayuda a la GPU */
  cursor: grab;
}
.camera.dragging { cursor: grabbing; }

/* Capa de nodos */
.nodes {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: auto;
}

/* Tarjeta/nodo */
.node {
  position: absolute;
  min-width: 192px;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--canvas-node);
  border: 1px solid var(--canvas-node-border);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  color: var(--canvas-node-text);
  user-select: none;
  pointer-events: auto;
}
.node:hover { border-color: #3b4588; }
.node.selected { outline: 2px solid var(--canvas-accent); outline-offset: 2px; }

.node h4 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: .2px;
  pointer-events: auto;
  user-select: text;
}
.node .meta { opacity: .8; font-size: 12px; }
.node h4 .icon {
  margin-right: 6px;
  display: inline-block;
  transform: translateY(1px);
}
.title-text {
  font-size: 14px;
}

.node .drag-handle {
  font-size: 12px;
  opacity: .75;
  user-select: none;
  pointer-events: none;
}

/* Capa de aristas */
svg.edges {
  position: absolute;
  inset: 0;
  overflow: visible;
}

svg.edges .edge,
svg.edges .edge-hit {
  cursor: default;
}

/* antes: body.alt-down svg.edges ... */
#viewport.alt-down svg.edges .edge,
#viewport.alt-down svg.edges .edge-hit { cursor: not-allowed; }
#viewport.alt-down svg.edges .edge { opacity: .9; }
#viewport.alt-down svg.edges .edge:hover { filter: brightness(1.2); opacity: .7; }

/* El "hit" solo capta eventos cuando mantienes Alt dentro del canvas */
#viewport .edge-hit { pointer-events: none; }
#viewport.alt-down { cursor: crosshair; }
#viewport.alt-down .edge-hit { pointer-events: stroke; } /* o 'auto' */

/* cuando el snap está off, solo resalta el #status */
#status.is-off {
  color: #f59e0b;
  font-weight: 600;
}

/* ya lo tenés: borde punteado en nodos */
body.snap-off .node {
  outline: 2px dashed #f59e0b;
  outline-offset: 2px;
}

/* Caja de selección (marquee) */
.marquee {
  position: absolute;
  border: 1px dashed var(--canvas-accent);
  background: rgba(122,162,255,0.1);
  pointer-events: none;
  z-index: 10;
}

/* Asegura el stacking */
#camera { position: relative; }
#camera.dragging, #camera.dragging * { user-select: none; }
#nodes, #edges { position: absolute; inset: 0; }

/* El trazo visible nunca debe recibir eventos */
#edges .edge { pointer-events: none; }