:root {
    --ground: #f7f8fa;
    --surface: #ffffff;
    --surface-2: #eef0f5;
    --ink: #171a22;
    --ink-soft: #5a6072;
    --ink-faint: #8b92a4;
    --line: #e0e4ec;
    --line-strong: #c3c9d8;
    --accent: #1d4e89;
    --accent-ink: #ffffff;
    --accent-wash: #e6ecf7;
    --critical: #b23a2f;
    --critical-wash: #f8e7e4;
    --warning: #8a6510;
    --warning-wash: #f8f0dd;
    --ok: #2c6e52;
    --ok-wash: #e3efe9;
    --cat1: #1d4e89;
    --cat2: #8a6510;
    --cat3: #2c6e52;
    --cat4: #7a3e8f;
    --cat5: #a8552c;
    --cat6: #2a6f7d;

    --font-prose: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-data: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

    --r: 3px;
    --shadow: 0 1px 2px rgba(23, 26, 34, .05), 0 3px 10px rgba(23, 26, 34, .04);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --ground: #0f1218; --surface: #161a22; --surface-2: #1e2430;
      --ink: #e9ecf3; --ink-soft: #9aa3b7; --ink-faint: #6f7889;
      --line: #262d3a; --line-strong: #3a4356;
      --accent: #82abe3; --accent-ink: #0f1218; --accent-wash: #1a2740;
      --critical: #e4796c; --critical-wash: #2d1c1a;
      --warning: #d9ae55; --warning-wash: #2a2315;
      --ok: #6fc79b; --ok-wash: #16271e;
      --cat1: #82abe3; --cat2: #d9ae55; --cat3: #6fc79b;
      --cat4: #c193d6; --cat5: #e09a72; --cat6: #7fc3ce;
      --shadow: 0 1px 2px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.3);
    }
  }
  :root[data-theme="dark"] {
    --ground: #0f1218; --surface: #161a22; --surface-2: #1e2430;
    --ink: #e9ecf3; --ink-soft: #9aa3b7; --ink-faint: #6f7889;
    --line: #262d3a; --line-strong: #3a4356;
    --accent: #82abe3; --accent-ink: #0f1218; --accent-wash: #1a2740;
    --critical: #e4796c; --critical-wash: #2d1c1a;
    --warning: #d9ae55; --warning-wash: #2a2315;
    --ok: #6fc79b; --ok-wash: #16271e;
    --cat1: #82abe3; --cat2: #d9ae55; --cat3: #6fc79b;
    --cat4: #c193d6; --cat5: #e09a72; --cat6: #7fc3ce;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 3px 10px rgba(0,0,0,.3);
  }
  :root[data-theme="light"] {
    --ground: #f7f8fa; --surface: #ffffff; --surface-2: #eef0f5;
    --ink: #171a22; --ink-soft: #5a6072; --ink-faint: #8b92a4;
    --line: #e0e4ec; --line-strong: #c3c9d8;
    --accent: #1d4e89; --accent-ink: #ffffff; --accent-wash: #e6ecf7;
    --critical: #b23a2f; --critical-wash: #f8e7e4;
    --warning: #8a6510; --warning-wash: #f8f0dd;
    --ok: #2c6e52; --ok-wash: #e3efe9;
    --cat1: #1d4e89; --cat2: #8a6510; --cat3: #2c6e52;
    --cat4: #7a3e8f; --cat5: #a8552c; --cat6: #2a6f7d;
    --shadow: 0 1px 2px rgba(23,26,34,.05), 0 3px 10px rgba(23,26,34,.04);
  }

  body {
    margin: 0; background: var(--ground); color: var(--ink);
    font-family: var(--font-ui); font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .label {
    font-family: var(--font-data); font-size: 10.5px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-faint);
  }

  /* ================= topbar ================= */
  .topbar {
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 8px 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  }
  .topbar h1 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
  .topbar h1 span { color: var(--ink-faint); font-weight: 400; }
  .ruta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .ruta .sep { color: var(--ink-faint); }
  .ruta button {
    font: inherit; font-size: 13px; background: none; color: var(--ink-soft);
    border: 1px solid var(--line-strong); border-radius: var(--r); padding: 4px 11px; cursor: pointer;
  }
  .ruta button[aria-current="true"] {
    background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600;
  }
  .ruta button:hover { border-color: var(--accent); color: var(--accent); }

  /* marca de submapa, al modo del subproceso colapsado de BPMN */
  .submapa {
    position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
    width: 18px; height: 15px; z-index: 3; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font: 600 12px/1 var(--font-data);
    background: var(--surface); color: var(--ink-soft);
    border: 1px solid var(--line-strong); border-radius: 2px; cursor: pointer;
  }
  .submapa:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
  .submapa.conhuecos { border-color: var(--critical); color: var(--critical); }
  .zoom-pan .submapa { display: none; }

  .projpick { display: flex; gap: 4px; }
  .projpick button {
    font: inherit; font-size: 13px; background: none; color: var(--ink-soft);
    border: 1px solid var(--line-strong); border-radius: var(--r);
    padding: 4px 11px; cursor: pointer;
  }
  .projpick button[aria-pressed="true"] {
    background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600;
  }
  .demo-note {
    margin: 0; font-family: var(--font-data); font-size: 10.5px;
    color: var(--warning); background: var(--warning-wash);
    border: 1px solid var(--warning); border-radius: var(--r); padding: 2px 7px;
  }

  /* ================= controls bar (max 3) ================= */
  .controls {
    display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
    padding: 7px 22px; background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  /* Por defecto solo lo que se usa a cada rato. El resto vive detras de
     "mas opciones": el lienzo debe quedarse con la pantalla. */
  .controls:not(.expandido) .secundario { display: none; }
  .ctl { display: flex; align-items: center; gap: 8px; }
  .ctl > .label { white-space: nowrap; }
  .seg { display: flex; }
  .seg button {
    font: inherit; font-size: 12.5px; background: none; color: var(--ink-soft);
    border: 1px solid var(--line-strong); border-right-width: 0;
    padding: 4px 10px; cursor: pointer;
  }
  .seg button:first-child { border-radius: var(--r) 0 0 var(--r); }
  .seg button:last-child { border-right-width: 1px; border-radius: 0 var(--r) var(--r) 0; }
  .seg button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); font-weight: 600; }
  input[type="search"], select {
    font: inherit; font-size: 13px; background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r); padding: 4px 8px;
  }
  input[type="search"] { width: 190px; }
  .switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
  .switch input { accent-color: var(--accent); width: 15px; height: 15px; }

  /* ================= shell ================= */
  .shell {
    display: grid; grid-template-columns: minmax(0, 1fr) 296px;
    align-items: start; min-height: calc(100vh - 116px);
  }
  .stage { padding: 14px 20px 30px; min-width: 0; }
  .dock { border-left: 1px solid var(--line); background: var(--surface); padding: 18px 16px; }
  @media (max-width: 1040px) {
    .shell { grid-template-columns: 1fr; }
    .dock { border-left: 0; border-top: 1px solid var(--line); }
  }

  /* ================= panorama ================= */
  /* Lienzo: caja fija que recorta, y una capa interior que se mueve y escala.
     Es el modelo estandar de todo editor de diagramas: el viewport es una
     transformacion, no un scroll. */
  .lienzo {
    position: relative; overflow: hidden;
    height: clamp(360px, calc(100vh - 250px), 940px);
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface);
    touch-action: none; cursor: default;
  }
  .lienzo.paneando { cursor: grabbing; }
  .lienzo.paneando * { pointer-events: none; }
  .capa { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
  .board { position: relative; }
  .card.arrastrando { z-index: 20; pointer-events: none; opacity: .9; cursor: grabbing; }
  .add-cell {
    align-self: center; flex: none; width: 24px; height: 18px; padding: 0; margin-top: 2px;
    font: inherit; font-size: 12px; line-height: 1;
    color: var(--ink-faint); background: var(--surface);
    border: 1px dashed var(--line-strong); border-radius: 3px;
    cursor: pointer; opacity: 0; transition: opacity .12s;
  }
  .cell:hover > .add-cell, .add-cell:focus-visible { opacity: 1; }
  .add-cell:hover { color: var(--accent); border-color: var(--accent); border-style: solid; background: var(--accent-wash); }
  .zoom-pan .add-cell { display: none; }

  .cell.dropping::after { animation: none; }
  .hud {
    position: absolute; right: 10px; bottom: 10px; z-index: 8;
    display: flex; gap: 4px; align-items: center;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r); padding: 3px 4px; box-shadow: var(--shadow);
  }
  .hud button {
    font: inherit; font-size: 13px; width: 26px; height: 24px;
    background: none; border: 1px solid var(--line-strong); border-radius: 2px;
    color: var(--ink-soft); cursor: pointer; line-height: 1;
  }
  .hud button.ancho { width: auto; padding: 0 8px; font-size: 12px; }
  .hud button:hover { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }
  .hud .pct {
    font-family: var(--font-data); font-size: 11.5px; color: var(--ink-soft);
    min-width: 42px; text-align: center; font-variant-numeric: tabular-nums;
  }
  .ayuda { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }
  .ayuda summary {
    cursor: pointer; font-family: var(--font-data); font-size: 10.5px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  }
  .ayuda summary:hover { color: var(--accent); }
  .ayuda p { margin: 8px 0 0; max-width: 78ch; line-height: 1.5; }
  .leyenda-marcas { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
  .leyenda-marcas span { display: inline-flex; align-items: center; gap: 7px; }
  .leyenda-marcas i { font-style: normal; flex: none; }
  .leyenda-marcas .m-dot {
    background: var(--critical); color: #fff; border-radius: 9px; padding: 1px 5px;
    font-family: var(--font-data); font-size: 10px;
  }
  .leyenda-marcas .m-linea { width: 24px; height: 0; border-top: 2px solid var(--ink-soft); }
  .leyenda-marcas .m-punteada {
    width: 24px; height: 0;
    border-top: 2px dashed var(--ink-faint);
  }
  .leyenda-marcas .m-corte { color: var(--critical); font-family: var(--font-data); }
  /* Las flechas van en una capa sobre la cuadricula, sin interceptar el mouse. */
  .rels-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
  .rels-layer path { fill: none; }
  .rels-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; }
  .rels-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
  .rels-legend i { display: block; width: 22px; height: 0; border-top-width: 2px; border-top-style: solid; }
  .rels-layer .hit { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
  .rels-layer .trazo { transition: stroke-width .12s, opacity .12s; }
  .rels-layer .sel { stroke: var(--accent) !important; stroke-width: 3.4 !important; opacity: 1 !important; }
  .rels-layer .hi { stroke-width: 3 !important; opacity: 1 !important; }
  .rels-layer .apagado { opacity: .12 !important; }
  .rels-layer .rotulo { opacity: 0; transition: opacity .12s; }
  .rels-layer .rotulo.visible { opacity: 1; }
  .rels-layer .rotulo text {
    font-family: var(--font-data); font-size: 9.5px; fill: var(--ink);
    text-anchor: middle; dominant-baseline: middle;
  }
  .rels-layer .rotulo rect { fill: var(--ground); stroke: var(--line); rx: 2; }
  .rels-layer #preview { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
  /* extremos arrastrables de la flecha seleccionada */
  .rels-layer .knob {
    fill: var(--surface); stroke: var(--accent); stroke-width: 2.5;
    pointer-events: all; cursor: grab; touch-action: none;
  }
  .rels-layer .knob:hover { fill: var(--accent-wash); }

  /* tirador para dibujar una flecha: visible al pasar el mouse, no un gesto oculto */
  .card-wrap { position: relative; width: 100%; }
  .handle {
    position: absolute; right: -8px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--accent);
    cursor: crosshair; opacity: 0; transition: opacity .12s; z-index: 4;
    touch-action: none;
  }
  .card-wrap:hover .handle, .handle:focus-visible, .card:focus-visible + .handle { opacity: 1; }
  .handle::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent);
  }
  .card.destino { box-shadow: 0 0 0 3px var(--ok); }
  .zoom-pan .handle { display: none; }

  /* modo conectar: aviso visible, no un gesto oculto */
  .modebar {
    display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
    background: var(--accent-wash); border: 1px solid var(--accent); border-radius: var(--r);
    padding: 9px 12px; margin-bottom: 14px; font-size: 13px; color: var(--accent);
  }
  .modebar b { font-weight: 600; }
  .modo-conectar .card { cursor: crosshair; }
  .card.origen { box-shadow: 0 0 0 3px var(--accent); }
  .board-row {
    display: grid;
    grid-template-columns: 150px repeat(var(--cols), minmax(150px, 1fr));
    align-items: stretch;
  }
  .colhead {
    padding: 4px 10px 22px; text-align: center; background: none; border: 0;
    cursor: pointer; border-radius: 2px; font: inherit;
    font-family: var(--font-prose); font-size: 16px; line-height: 1.25;
    color: var(--ink); text-wrap: balance;
  }
  .colhead small {
    display: block; margin-top: 5px; font-family: var(--font-data);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  }
  .colhead.is-empty small { color: var(--critical); }
  .colhead:hover { background: var(--surface-2); }
  .colhead.elegido { background: var(--accent); color: var(--accent-ink); }
  .colhead.elegido small { color: var(--accent-ink); opacity: .8; }
  .corner { padding-bottom: 22px; }

  .thread { position: relative; }
  .thread + .thread { margin-top: 4px; }
  .rowlabel {
    display: flex; flex-direction: column; justify-content: center;
    padding: 10px 14px 10px 0; text-align: right;
  }
  .rowlabel .nm {
    font-family: var(--font-prose); font-size: 15px; line-height: 1.25;
    background: none; border: 0; padding: 2px 4px; margin: 0; text-align: right;
    color: inherit; cursor: pointer; border-radius: 2px; width: 100%;
  }
  .rowlabel .nm:hover { background: var(--surface-2); }
  .rowlabel .nm.elegido { background: var(--accent); color: var(--accent-ink); }
  .rowlabel .nm.nuevo-hilo, .colhead.nueva {
    font-family: var(--font-data); font-size: 11px; color: var(--ink-faint);
    border: 1px dashed var(--line-strong); background: none; cursor: pointer;
  }
  .rowlabel .nm.nuevo-hilo:hover, .colhead.nueva:hover { color: var(--accent); border-color: var(--accent); }
  .colhead.nueva { align-self: start; padding: 6px 10px; border-radius: var(--r); }
  .rowlabel .meta { font-family: var(--font-data); font-size: 10px; color: var(--ink-faint); margin-top: 3px; }
  .rowlabel .dead { color: var(--critical); }

  .cell { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 8px; }
  .cell.dropping::after {
    content: ""; position: absolute; inset: 4px; border: 2px dashed var(--accent);
    border-radius: var(--r); background: var(--accent-wash); opacity: .5;
  }
  /* the thread line: one segment per column, drawn behind the cards */
  .seg-line { position: absolute; left: 0; right: 0; top: 50%; height: 0; z-index: 0; }
  .seg-line i { display: block; height: 2px; margin-top: -1px; }
  .seg-line.live i { background: var(--tc); }
  .seg-line.gap i { background: repeating-linear-gradient(to right, var(--tc) 0 3px, transparent 3px 8px); opacity: .55; }
  .seg-line.pre i { background: var(--line); }
  .seg-line.post i { background: var(--line); }
  .seg-line.dead i { background: repeating-linear-gradient(to right, var(--critical) 0 2px, transparent 2px 7px); }
  .deadmark {
    position: absolute; top: 50%; left: 2px; transform: translateY(-50%);
    font-family: var(--font-data); font-size: 12px; color: var(--critical);
    background: var(--ground); padding: 0 3px; z-index: 1;
  }
  .emptythread {
    position: absolute; top: 50%; left: 8px; transform: translateY(-50%);
    font-family: var(--font-data); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--critical); background: var(--ground); padding: 1px 6px;
    border: 1px solid var(--critical); border-radius: 2px; z-index: 1;
  }

  /* ================= cards ================= */
  .card {
    position: relative; z-index: 1; font: inherit; text-align: left; display: block; width: 100%;
    background: var(--surface); color: inherit; cursor: grab;
    border: 1px solid var(--cc, var(--line-strong)); border-left: 3px solid var(--cc, var(--accent));
    border-radius: var(--r); box-shadow: var(--shadow); padding: 7px 8px;
  }
  .card:hover { border-color: var(--accent); }
  .card[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
  .card.dragging { opacity: .35; }
  .card.dim { opacity: .18; }
  .card.pregunta { border-style: dashed; background: var(--surface-2); }
  .card .t { font-size: 12.5px; line-height: 1.35; display: block; }
  .card .body { display: none; }
  /* Regla: el estado normal no gasta tinta. Los chips solo existen en zoom Detalle;
     la desviacion se marca con un punto que no ocupa espacio de layout. */
  .card .marks { display: none; }
  .zoom-det .card .marks { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
  .card .dot {
    position: absolute; top: -6px; right: -7px; z-index: 2;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    cursor: help;
    background: var(--critical); color: #fff; border: 1.5px solid var(--surface);
    font-family: var(--font-data); font-size: 10px; line-height: 14px; text-align: center;
  }
  .zoom-pan .card .dot { display: none; }

  /* zoom: panorama */
  .zoom-pan .card { padding: 0; height: 14px; border-left-width: 0; border-radius: 2px; background: var(--cc); border-color: var(--cc); }
  .zoom-pan .card .t, .zoom-pan .card .marks { display: none; }
  .zoom-pan .card.pregunta { background: var(--surface); border: 1.5px dashed var(--cc); }
  .zoom-pan .card.hashole { box-shadow: 0 0 0 1.5px var(--critical); }
  .zoom-pan .cell { padding: 9px 8px; flex-direction: row; gap: 4px; align-items: center; }
  .zoom-pan .colhead { font-size: 13.5px; padding-bottom: 16px; }
  .zoom-pan .rowlabel { padding-top: 6px; padding-bottom: 6px; }
  .zoom-pan .rowlabel .nm { font-size: 13px; }

  /* zoom: detalle */
  .zoom-det .card .body { display: block; font-family: var(--font-prose); font-size: 12.5px; line-height: 1.4; margin-top: 5px; color: var(--ink-soft); }
  .zoom-det .card .t { font-weight: 600; }

  .flag {
    font-family: var(--font-data); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
    padding: 1px 5px; border-radius: 2px; border: 1px solid currentColor;
  }
  .flag.ok { color: var(--ok); background: var(--ok-wash); }
  .flag.warn { color: var(--warning); background: var(--warning-wash); }
  .flag.crit { color: var(--critical); background: var(--critical-wash); }
  .flag.plain { color: var(--ink-soft); background: var(--surface-2); border-color: var(--line-strong); }
  .flag.tag { color: var(--accent); background: var(--accent-wash); border-color: var(--accent); border-style: dashed; }
  .flag.tag button {
    font: inherit; font-size: 11px; line-height: 1; background: none; border: 0;
    color: inherit; cursor: pointer; padding: 0 0 0 5px;
  }
  .fuentes-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .fuentes-lista li { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .fuentes-lista .uso { display: block; margin: 3px 0 0 22px; }
  .fuentes-lista li.eliminada { opacity: .65; border-left: 3px solid var(--critical); padding-left: 8px; }
  .fuentes-lista .proc {
    display: block; margin: 2px 0 0 22px; cursor: help;
    font-family: var(--font-data); font-size: 10px; color: var(--accent);
  }
  .fuentes-lista .donde { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 0 22px; }

  .evid-fila { border-bottom: 1px solid var(--line); padding-bottom: 4px; }
  .evid-sub { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 3px 0 0 21px; }
  .evid-sub .pag { width: 42px; font-size: 11px; padding: 1px 3px; }
  .evid-sub button {
    font: inherit; font-size: 10.5px; font-family: var(--font-data);
    background: var(--accent-wash); color: var(--accent);
    border: 1px solid var(--accent); border-radius: 2px; padding: 1px 5px; cursor: copy;
  }
  .evid-sub button:hover { background: var(--accent); color: var(--accent-ink); }
  .evid-sub button.aprox {
    background: var(--warning-wash); color: var(--warning); border-color: var(--warning);
  }
  .evid-sub button.aprox:hover { background: var(--warning); color: var(--surface); }

  .evid-lista { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; max-height: 190px; overflow-y: auto; }
  .evid-item { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
  .evid-item .k { font-family: var(--font-data); font-size: 11px; flex: 1; }
  .evid-item input { accent-color: var(--accent); }
  .evid-item select { font-size: 11px; padding: 1px 3px; }
  #nueva-fuente { width: 100%; font-size: 12px; }

  .tagedit { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
  #tag-input { width: 100%; font-size: 12.5px; }

  /* ================= tray ================= */
  .tray { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 16px; }
  .tray-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
  .tray-head h3 { font-size: 13.5px; font-weight: 600; margin: 0; }
  .tray-head p { margin: 0; font-size: 12.5px; color: var(--ink-soft); max-width: 60ch; }
  .tray-items { display: flex; flex-wrap: wrap; gap: 8px; min-height: 54px; align-items: flex-start; }
  .tray-items.dropping { outline: 2px dashed var(--accent); outline-offset: 4px; }
  .tray-items .card-wrap { width: 216px; }
  .tray-empty { font-family: var(--font-data); font-size: 11px; color: var(--ink-faint); }

  /* ================= dock ================= */
  .dock-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px 0 16px; }
  .dock-tabs button {
    font: inherit; font-size: 13.5px; background: none; border: 0;
    border-bottom: 2px solid transparent; padding: 6px 8px 8px; color: var(--ink-soft); cursor: pointer;
  }
  .dock-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
  .dock-tabs .n { font-family: var(--font-data); font-size: 11px; }

  .score { display: flex; align-items: baseline; gap: 9px; margin: 0 0 14px; }
  .score .big { font-family: var(--font-data); font-size: 30px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
  .score .big.crit { color: var(--critical); }
  .score .big.ok { color: var(--ok); }
  .score p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

  .holes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .hole { border: 1px solid var(--line); border-left: 3px solid var(--sev); border-radius: var(--r); background: var(--surface); padding: 8px 10px; }
  .hole.sev-crit { --sev: var(--critical); }
  .hole.sev-warn { --sev: var(--warning); }
  .hole.sev-info { --sev: var(--ink-faint); }
  .hole-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
  .hole-check { font-family: var(--font-data); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
  .hole-msg { font-size: 13px; margin: 3px 0 0; }
  .hole .jump {
    font: inherit; font-size: 12px; margin-top: 6px; background: none;
    border: 1px solid var(--line-strong); border-radius: var(--r);
    padding: 3px 8px; color: var(--accent); cursor: pointer;
  }
  .hole .jump:hover { background: var(--accent-wash); }
  .clear-state { border: 1px dashed var(--ok); background: var(--ok-wash); color: var(--ok); border-radius: var(--r); padding: 14px; font-size: 13px; }

  .btn {
    font: inherit; font-size: 13px; background: var(--accent); color: var(--accent-ink);
    border: 1px solid var(--accent); border-radius: var(--r); padding: 6px 12px; cursor: pointer; font-weight: 600;
  }
  .btn.ghost { background: none; color: var(--accent); font-weight: 400; }
  .btn.ghost:hover { background: var(--accent-wash); }
  .empty-detail { font-size: 13px; color: var(--ink-soft); }

  .conector-grupo { border-bottom: 1px solid var(--line); padding: 0 0 10px; margin-bottom: 10px; }
  .conector-grupo b { font-size: 13px; }
  .conector-grupo p { margin: 2px 0 6px; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
  .conector-grupo.pertinente { border-left: 3px solid var(--accent); padding-left: 9px; }
  .conector-grupo.evitar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }

  .facets { display: flex; flex-direction: column; gap: 12px; }
  .facets .fgroup { font-size: 12.5px; color: var(--ink-soft); }
  .facets .fgroup b { display: block; color: var(--ink); font-size: 12.5px; margin-bottom: 4px; }
  .facets .fitems { display: flex; flex-wrap: wrap; gap: 4px; }

  /* ================= lista ================= */
  .outline { display: flex; flex-direction: column; gap: 16px; }
  .outline section { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .outline h3 {
    margin: 0 0 8px; font-family: var(--font-prose); font-size: 16px; font-weight: 400;
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  }
  .outline h3 em { font-family: var(--font-data); font-style: normal; font-size: 10.5px; color: var(--ink-faint); letter-spacing: .07em; text-transform: uppercase; }
  .outline ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .outline li { display: grid; grid-template-columns: 3px 1fr; gap: 10px; }
  .outline .tick { border-radius: 2px; }
  .outline .claim { font-family: var(--font-prose); font-size: 14px; line-height: 1.45; }
  .outline .meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; align-items: center; }
  .outline .sec-empty { font-size: 13px; color: var(--critical); }

  .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
  table { border-collapse: collapse; width: 100%; font-size: 13px; }
  th, td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
  thead th {
    font-family: var(--font-data); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-soft); background: var(--surface-2); white-space: nowrap;
  }
  tbody tr:last-child td { border-bottom: 0; }
  td.name { font-weight: 600; }
  td .defn { font-family: var(--font-prose); font-size: 13px; line-height: 1.4; }
  tr.conflict td { background: var(--critical-wash); }
  tr.conflict td.name { color: var(--critical); }
  .missing { color: var(--ink-faint); font-family: var(--font-data); font-size: 11.5px; }

  /* ================= modal de edicion ================= */
  .overlay {
    position: fixed; inset: 0; z-index: 50; padding: 22px;
    background: rgba(9, 11, 16, .5);
    display: flex; align-items: center; justify-content: center;
  }
  .modal {
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .32);
    width: min(1060px, 100%); max-height: min(90vh, 920px);
    display: grid; grid-template-columns: 244px minmax(0, 1fr); overflow: hidden;
  }
  .modal-side { background: var(--surface-2); border-right: 1px solid var(--line); padding: 18px 16px; overflow-y: auto; }
  .modal-side dl { margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
  .modal-side dt { font-family: var(--font-data); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
  .modal-side dd { margin: 0; font-size: 13px; }
  .modal-side select { width: 100%; }
  .modal-main { display: flex; flex-direction: column; min-width: 0; }
  .modal-head { padding: 15px 20px 12px; border-bottom: 1px solid var(--line); }
  .modal-head h2 { font-family: var(--font-prose); font-size: 20px; font-weight: 400; margin: 3px 0 0; text-wrap: balance; }
  .titulo-input {
    font-family: var(--font-prose); font-size: 20px; font-weight: 400;
    width: 100%; margin: 3px 0 0; padding: 3px 5px;
    background: none; border: 1px solid transparent; border-radius: 2px; color: var(--ink);
  }
  .titulo-input:hover { border-color: var(--line); }
  .titulo-input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .toolbar { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; padding: 8px 20px; border-bottom: 1px solid var(--line); }
  .toolbar button {
    font: inherit; font-size: 13px; min-width: 30px; height: 28px; padding: 0 8px;
    background: none; border: 1px solid var(--line-strong); border-radius: 2px;
    color: var(--ink-soft); cursor: pointer;
  }
  .toolbar button:hover { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }
  .toolbar b { font-weight: 700; }
  .toolbar i { font-style: italic; font-family: var(--font-prose); }
  .toolbar .sep { width: 1px; height: 20px; background: var(--line-strong); margin: 0 5px; }
  .editor {
    flex: 1; overflow-y: auto; padding: 20px 24px 30px; outline: none;
    font-family: var(--font-prose); font-size: 16.5px; line-height: 1.68;
  }
  .editor:empty::before { content: "Escribe algo..."; color: var(--ink-faint); font-style: italic; }
  .editor p { margin: 0 0 .9em; }
  .editor blockquote { margin: 14px 0; padding-left: 14px; border-left: 3px solid var(--line-strong); color: var(--ink-soft); }
  .editor h4 { font-family: var(--font-ui); font-size: 16px; font-weight: 600; margin: 18px 0 6px; }
  .editor ul, .editor ol { padding-left: 24px; margin: 0 0 .9em; }
  .modal-foot { padding: 10px 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
  .modal-foot .wcount { font-family: var(--font-data); font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .modal-foot .acts { display: flex; gap: 8px; }
  @media (max-width: 880px) {
    .overlay { padding: 0; }
    .modal { grid-template-columns: 1fr; max-height: 100vh; border-radius: 0; }
    .modal-side { border-right: 0; border-bottom: 1px solid var(--line); }
  }

  .aviso {
    margin: 0; padding: 9px 22px; font-size: 13px;
    background: var(--warning-wash); color: var(--warning);
    border-bottom: 1px solid var(--warning);
  }
  .card.elegida { box-shadow: 0 0 0 2px var(--accent); }

  /* ================= panel ocultable ================= */
  .shell.no-dock { grid-template-columns: minmax(0, 1fr); }
  .shell.no-dock .dock { display: none; }
  .panelbtn {
    font: inherit; font-size: 12.5px; background: none; color: var(--ink-soft);
    border: 1px solid var(--line-strong); border-radius: var(--r); padding: 4px 11px; cursor: pointer;
  }
  .panelbtn:hover { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }
  .panelbtn .n { font-family: var(--font-data); color: var(--critical); font-weight: 600; }

  /* ============ barra flotante de la seleccion ============
     Los controles viven junto al objeto, no en un panel lejano. */
  .barra-sel[hidden] { display: none; }   /* display de autor vence al [hidden] del navegador */
  .barra-sel {
    position: absolute; z-index: 6; transform: translate(-50%, 0);
    display: flex; gap: 4px; align-items: center; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--accent);
    border-radius: var(--r); box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    padding: 4px 5px;
  }
  .barra-sel select {
    font-size: 12px; padding: 2px 4px; border-color: var(--line-strong);
  }
  .barra-sel button {
    font: inherit; font-size: 12px; line-height: 1.5;
    background: none; border: 1px solid var(--line-strong); border-radius: 2px;
    padding: 2px 8px; color: var(--ink-soft); cursor: pointer;
  }
  .barra-sel button:hover { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }
  .barra-sel button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .barra-sel button.del:hover { background: var(--critical-wash); color: var(--critical); border-color: var(--critical); }
  .barra-sel .sep { width: 1px; height: 16px; background: var(--line); }

  /* ================= manuscrito ================= */
  .ms { max-width: 70ch; margin: 0 auto; }
  .ms-bar {
    display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
    border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 22px;
  }
  .ms-bar .tot { font-family: var(--font-data); font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .ms h3 {
    font-family: var(--font-prose); font-size: 21px; font-weight: 400; margin: 34px 0 14px;
    padding-bottom: 6px; border-bottom: 1px solid var(--line); text-wrap: balance;
  }
  .ms h3:first-of-type { margin-top: 0; }
  .ms h3 em { font-family: var(--font-data); font-style: normal; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); float: right; padding-top: 8px; }
  .ms-block { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: start; margin-bottom: 4px; }
  .ms-gutter { text-align: right; padding-top: 5px; font-family: var(--font-data); font-size: 10px; line-height: 1.5; color: var(--ink-faint); }
  .ms-gutter b { display: block; color: var(--ink-soft); font-weight: 400; }
  .ms-gutter .wc { font-variant-numeric: tabular-nums; }
  .ms-gutter .warn { color: var(--warning); }
  .ms-gutter .crit { color: var(--critical); }
  .ms-prose {
    font-family: var(--font-prose); font-size: 16.5px; line-height: 1.65;
    padding: 4px 8px; border-left: 2px solid transparent; border-radius: 2px; outline: none;
  }
  .ms-prose:hover { border-left-color: var(--line-strong); }
  .ms-prose:focus { border-left-color: var(--accent); background: var(--accent-wash); }
  .ms-prose:empty::before { content: "Sin texto. Escribe aca."; color: var(--critical); font-style: italic; }
  .ms.seamless .ms-block { grid-template-columns: 1fr; }
  .ms.seamless .ms-gutter { display: none; }
  .ms.seamless .ms-prose { border-left-color: transparent; padding-left: 0; }
  .ms.seamless .ms-prose:focus { border-left-color: var(--accent); padding-left: 8px; }

  .stage-head { margin-bottom: 20px; }
  .stage-head h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
  .stage-head p { margin: 0; font-size: 13px; color: var(--ink-soft); max-width: 74ch; }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  .sync-error { color: var(--critical); font-weight: 600; }