/* Lectógrafo — estilos de aplicación
   Consume tokens de Stella Nova (static/sistema/tokens.css).
   Regla operativa: no se declaran colores, tipografías ni tamaños aquí;
   todo se referencia mediante --sn-*. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; width: 100%;
  font-family: var(--sn-font-text);
  font-size: var(--sn-fs-base);
  color: var(--sn-ink);
  background: var(--sn-field);
  line-height: var(--sn-leading);
}

/* ── Topbar ───────────────────────────────────────────────────────── */
#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--sn-header-h);
  background: var(--sn-paper);
  border-bottom: var(--sn-hair);
  display: flex;
  align-items: center;
  padding: 0 var(--sn-s-4);
  z-index: var(--sn-z-header);
  box-shadow: var(--sn-lift-paper);
}

#topbar-left {
  flex: 1;
  min-width: 0;
  display: flex; align-items: baseline; gap: var(--sn-s-3);
}

#app-name {
  font-weight: 700; font-size: var(--sn-fs-xs);
  line-height: 1;
  letter-spacing: .10em; text-transform: uppercase;
  color: var(--sn-nova);
  white-space: nowrap;
}

#transcripcion-titulo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Tab navigation ─────────────────────────────────────────────── */
#tabs {
  display: flex; align-items: center;
  gap: var(--sn-s-1);
}

.tab-btn {
  padding: var(--sn-s-1) var(--sn-s-3);
  border: none; border-radius: var(--sn-radius);
  background: none; cursor: pointer;
  font-size: var(--sn-fs-xs); font-weight: 500;
  line-height: 1;
  color: var(--sn-ink-soft);
  transition: all var(--sn-dur-1) var(--sn-ease);
  font-family: var(--sn-font-text);
  white-space: nowrap;
}
.tab-btn:hover { background: var(--sn-sunk); color: var(--sn-ink); }
.tab-btn.active { background: var(--sn-ink); color: var(--sn-paper); }

/* ── Buscador de conceptos (mapa) ─────────────────────────────────── */
#mapa-buscar-wrap {
  position: absolute;
  top: var(--sn-s-4);
  left: var(--sn-s-4);
  z-index: 10;
  pointer-events: auto;
}
#mapa-buscar-wrap .buscar-input { width: 200px; }
#mapa-buscar-wrap .buscar-input:focus { width: 260px; }

.mapa-buscar-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 220px;
  max-width: 360px;
  background: var(--sn-paper);
  border: var(--sn-hair);
  border-radius: var(--sn-radius);
  box-shadow: var(--sn-lift);
  z-index: calc(var(--sn-z-header) + 20);
  list-style: none;
  padding: var(--sn-s-1) 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}
.mapa-buscar-dropdown[hidden] { display: none; }

.gp-ac-item.mapa-buscar-dropdown li,
.mapa-buscar-dropdown .gp-ac-item {
  padding: var(--sn-s-2) var(--sn-s-3);
  cursor: pointer;
  font-size: var(--sn-fs-xs);
  display: flex; align-items: baseline; gap: var(--sn-s-2);
  overflow: hidden;
}
.mapa-buscar-dropdown .gp-ac-item:hover,
.mapa-buscar-dropdown .gp-ac-item.active {
  background: var(--sn-sunk);
}
.mapa-buscar-dropdown .gp-ac-item-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mapa-buscar-dropdown .gp-ac-item-meta {
  color: var(--sn-ink-faint); font-size: var(--sn-fs-xs); white-space: nowrap;
}

/* ── Topbar right ─────────────────────────────────────────────────── */
#topbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--sn-s-2);
}

/* ── Settings button ─────────────────────────────────────────────── */
#btn-settings {
  display: flex; align-items: center; justify-content: center;
  width: var(--sn-ctl); height: var(--sn-ctl);
  background: none; border: none; cursor: pointer;
  border-radius: var(--sn-radius);
  color: var(--sn-icon);
  flex-shrink: 0;
  transition: background var(--sn-dur-1) var(--sn-ease),
              color      var(--sn-dur-1) var(--sn-ease);
}
#btn-settings svg { display: block; }
#btn-settings:hover,
#btn-settings.active {
  background: var(--sn-sunk);
  color: var(--sn-ink);
}

/* ── Settings panel ──────────────────────────────────────────────── */
#settings-panel {
  position: fixed;
  top: calc(var(--sn-header-h) + var(--sn-s-2));
  right: var(--sn-s-4);
  z-index: var(--sn-z-panel);
  background: var(--sn-paper);
  border: var(--sn-hair);
  border-radius: var(--sn-radius-l);
  box-shadow: var(--sn-lift);
  padding: var(--sn-s-4);
  width: 280px;
}
#settings-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sn-s-3);
}
#settings-panel-header .campo-etiq { margin: 0; }
#settings-panel-header button {
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  background: none; border: none; cursor: pointer;
  border-radius: var(--sn-radius);
  font-size: 1rem; line-height: 1;
  color: var(--sn-ink-soft);
}
#settings-panel-header button:hover { background: var(--sn-sunk); color: var(--sn-ink); }
#settings-model-wrap {
  display: flex; flex-direction: column; gap: var(--sn-s-2); margin-top: var(--sn-s-2);
}
#settings-model-select { width: 100%; }
#settings-model-status { min-height: 1em; }
#settings-providers { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sn-s-2); }
.settings-provider-opt {
  display: flex; align-items: center; gap: var(--sn-s-2);
  padding: var(--sn-s-1) var(--sn-s-2);
  border-radius: var(--sn-radius);
  cursor: pointer;
  font-size: var(--sn-fs-s);
  transition: background 0.1s;
}
.settings-provider-opt:hover { background: var(--sn-sunk); }
.settings-provider-opt input[type="radio"] { cursor: pointer; flex-shrink: 0; }
.settings-provider-opt > span:first-of-type { flex: 1; }
.settings-badge-local {
  font-size: var(--sn-fs-xs);
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--sn-sunk);
  color: var(--sn-ink-soft);
}
.settings-key-ind {
  font-size: var(--sn-fs-xs);
  font-weight: 600;
  width: 14px;
  text-align: center;
}

#progreso-barra-wrap {
  width: 72px; height: 3px;
  background: var(--sn-sunk); border-radius: var(--sn-radius-pill); overflow: hidden;
}

#progreso-barra {
  height: 100%; width: 0%;
  background: var(--sn-nova);
  border-radius: var(--sn-radius-pill);
  transition: width var(--sn-dur-2) var(--sn-ease);
}

#filtro-estado { display: flex; gap: var(--sn-s-1); }

.filtro-btn {
  padding: var(--sn-s-1) var(--sn-s-3); font-size: var(--sn-fs-xs);
  border: var(--sn-hair); border-radius: var(--sn-radius);
  background: none; cursor: pointer; color: var(--sn-ink-soft);
  transition: all var(--sn-dur-1);
}
.filtro-btn:hover { background: var(--sn-nova-wash); color: var(--sn-nova); border-color: var(--sn-nova); }
.filtro-btn.active { background: var(--sn-ink); color: var(--sn-paper); border-color: var(--sn-ink); }

/* ── Tab panels ──────────────────────────────────────────────────── */
.tab-panel {
  position: fixed;
  top: var(--sn-header-h); left: 0; right: 0; bottom: 0;
  display: flex;
  overflow: hidden;
}

[hidden] { display: none !important; }

/* ── Validar tab ─────────────────────────────────────────────────── */
#sidebar {
  width: 300px;
  flex-shrink: 0;
  border-right: var(--sn-hair);
  background: var(--sn-paper);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#decision-list { flex: 1; overflow-y: auto; }

#contenido {
  flex: 1;
  overflow-y: auto;
  padding: var(--sn-s-6) var(--sn-s-6);
  max-width: 760px;
}

/* ── Decision list ──────────────────────────────────────────────── */
#decision-list { list-style: none; padding: var(--sn-s-2) 0; }

.decision-item {
  display: flex; align-items: flex-start;
  padding: var(--sn-s-2) var(--sn-s-4) var(--sn-s-2) var(--sn-s-3);
  gap: var(--sn-s-2); cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--sn-dur-1);
}
.decision-item:hover { background: var(--sn-sunk); }
.decision-item.active { background: var(--sn-nova-wash); border-left-color: var(--sn-nova); }

.decision-item .estado-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; margin-top: 6px;
  background: var(--sn-hairline);
}
.decision-item.resuelta-aceptada   .estado-dot { background: var(--sn-ok); }
.decision-item.resuelta-rechazada  .estado-dot { background: var(--sn-danger); }
.decision-item.resuelta-modificada .estado-dot { background: var(--sn-warn); }
.decision-item.diferida            .estado-dot { background: var(--sn-ink-soft); }

.decision-item .info { flex: 1; min-width: 0; }

.decision-item .item-label {
  font-size: var(--sn-fs-sm); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.decision-item .item-meta {
  font-size: var(--sn-fs-xs); color: var(--sn-ink-soft);
  display: flex; gap: var(--sn-s-2); align-items: center; margin-top: 2px;
}

/* Badge de tipo de decisión */
.tipo-badge {
  display: inline-block; padding: 1px var(--sn-s-2); border-radius: var(--sn-radius-s);
  font-size: var(--sn-fs-xs); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.tipo-badge.sinonimia         { background: var(--sn-info-wash);   color: var(--sn-ink-soft); }
.tipo-badge.bidireccionalidad { background: var(--sn-ok-wash);     color: var(--sn-ok); }
.tipo-badge.confianza_baja    { background: var(--sn-warn-wash);   color: var(--sn-warn); }
.tipo-badge.confirmar_bucle   { background: color-mix(in oklab, var(--sn-ok) 10%, var(--sn-paper)); color: var(--sn-ok); }
.tipo-badge.metalenguaje      { background: var(--sn-danger-wash); color: var(--sn-danger); }

/* ── Metadatos del texto ─────────────────────────────────────────── */
#metadatos-panel {
  margin-bottom: var(--sn-s-5);
  padding: var(--sn-s-3) var(--sn-s-4);
  background: var(--sn-paper); border: var(--sn-hair);
  border-radius: var(--sn-radius-l);
  box-shadow: var(--sn-lift-paper);
}

#metadatos-header {
  display: flex; align-items: baseline; gap: var(--sn-s-3);
}

#metadatos-cita {
  flex: 1;
  font-size: var(--sn-fs-sm);
  font-family: var(--sn-font-quote);
  color: var(--sn-ink-soft);
  line-height: var(--sn-leading);
}
#metadatos-cita.vacia::before {
  content: "Sin metadatos — click en ✎ para añadir autor, título, año…";
  font-style: italic; opacity: .6;
}

#metadatos-form { margin-top: var(--sn-s-4); }

.meta-fila {
  display: flex; gap: var(--sn-s-3); flex-wrap: wrap;
}
.meta-fila .campo { flex: 1; min-width: 120px; }

#meta-anio { width: 90px; }

/* ── Detalle ─────────────────────────────────────────────────────── */
#empty-state { color: var(--sn-ink-soft); padding-top: var(--sn-s-8); text-align: center; }

#detalle-header { display: flex; align-items: center; gap: var(--sn-s-3); margin-bottom: var(--sn-s-6); }
#detalle-id { font-size: var(--sn-fs-xs); font-family: var(--sn-font-mono); color: var(--sn-ink-soft); }

.estado-badge {
  margin-left: auto; padding: 2px var(--sn-s-2); border-radius: var(--sn-radius-s);
  font-size: var(--sn-fs-xs); font-weight: 600; text-transform: uppercase;
}
.estado-badge.pendiente  { background: var(--sn-sunk); color: var(--sn-ink-soft); }
.estado-badge.diferida   { background: color-mix(in oklab, var(--sn-ink-soft) 12%, var(--sn-paper)); color: var(--sn-ink-soft); }
.estado-badge.aceptada   { background: var(--sn-ok-wash);     color: var(--sn-ok); }
.estado-badge.rechazada  { background: var(--sn-danger-wash); color: var(--sn-danger); }
.estado-badge.modificada { background: var(--sn-warn-wash);   color: var(--sn-warn); }

#detalle-cuerpo { margin-bottom: var(--sn-s-5); }

.campo { margin-bottom: var(--sn-s-4); }
.campo-etiq {
  display: block; font-size: var(--sn-fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--sn-ink-soft); margin-bottom: var(--sn-s-1);
}
.campo-valor { font-size: var(--sn-fs-base); }
.campo-valor.large { font-size: var(--sn-fs-lg); font-weight: 600; }

.cita {
  font-size: var(--sn-fs-sm); color: var(--sn-ink-soft);
  font-family: var(--sn-font-quote); line-height: var(--sn-leading);
  border-left: 3px solid var(--sn-hairline); padding-left: var(--sn-s-3);
}

.tag {
  display: inline-block; padding: 1px var(--sn-s-2); border-radius: var(--sn-radius-s);
  font-size: var(--sn-fs-xs); background: var(--sn-sunk); border: var(--sn-hair);
  margin: 2px 2px 2px 0;
}

.sinonimos-lista { display: flex; flex-wrap: wrap; gap: var(--sn-s-1); margin-top: var(--sn-s-2); }

.label-propuesto {
  display: inline-block; padding: 2px var(--sn-s-3); border-radius: var(--sn-radius);
  background: var(--sn-nova-wash); color: var(--sn-nova);
  font-weight: 600; font-size: var(--sn-fs-base);
}

.relacion-flecha {
  display: flex; align-items: center; gap: var(--sn-s-3);
  font-size: var(--sn-fs-md); font-weight: 600; margin-bottom: var(--sn-s-4);
}
.relacion-flecha .flecha { color: var(--sn-ink-soft); font-size: var(--sn-fs-lg); }

.conf-baja { color: var(--sn-warn); font-weight: 600; }

#detalle-recomendacion {
  margin-top: var(--sn-s-4); padding: var(--sn-s-3) var(--sn-s-4);
  background: var(--sn-sunk); border-radius: var(--sn-radius);
  border: var(--sn-hair);
}

/* ── Acciones ──────────────────────────────────────────────────────── */
#acciones { margin-top: var(--sn-s-6); }

.input-row { display: flex; gap: var(--sn-s-2); }
#input-label {
  flex: 1; padding: var(--sn-s-2) var(--sn-s-3);
  border: var(--sn-hair); border-radius: var(--sn-radius);
  font-size: var(--sn-fs-base); font-family: var(--sn-font-text);
  background: var(--sn-paper); color: var(--sn-ink); outline: none;
}
#input-label:focus { border-color: var(--sn-focus-border); box-shadow: var(--sn-focus-ring); }

.tipo-opciones { display: flex; gap: var(--sn-s-2); margin-top: var(--sn-s-2); }
#botones-principales { display: flex; gap: var(--sn-s-2); margin-top: var(--sn-s-4); flex-wrap: wrap; }

.btn {
  padding: var(--sn-s-2) var(--sn-s-4); border-radius: var(--sn-radius);
  font-size: var(--sn-fs-sm); font-weight: 500; cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--sn-dur-1) var(--sn-ease);
  font-family: var(--sn-font-text);
  display: inline-flex; align-items: center; gap: var(--sn-s-2);
}
.btn:hover  { filter: brightness(.93); }
.btn:active { transform: scale(.98); }

.btn-aceptar  { background: var(--sn-ok);      color: var(--sn-paper); }
.btn-rechazar { background: var(--sn-danger);   color: var(--sn-paper); }
.btn-diferir  { background: var(--sn-ink-soft); color: var(--sn-paper); }
.btn-modificar { background: var(--sn-warn);    color: var(--sn-paper); }
.btn-neutro   { background: var(--sn-sunk); color: var(--sn-ink); border-color: var(--sn-hairline); }
.btn-neutro.active { background: var(--sn-ink); color: var(--sn-paper); border-color: var(--sn-ink); }
.btn-tipo     { background: var(--sn-sunk); color: var(--sn-ink); border-color: var(--sn-hairline); }
.btn-tipo:hover { background: var(--sn-nova-wash); border-color: var(--sn-nova); color: var(--sn-nova); }
.btn.small { padding: var(--sn-s-1) var(--sn-s-3); font-size: var(--sn-fs-xs); }

#nota-panel { margin-top: var(--sn-s-3); }
#input-nota {
  width: 100%; padding: var(--sn-s-2) var(--sn-s-3);
  border: var(--sn-hair); border-radius: var(--sn-radius);
  font-family: var(--sn-font-text); font-size: var(--sn-fs-sm); resize: vertical;
  color: var(--sn-ink); background: var(--sn-paper); outline: none;
}
#input-nota:focus { border-color: var(--sn-focus-border); box-shadow: var(--sn-focus-ring); }

#atajos { margin-top: var(--sn-s-4); font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); }

kbd {
  display: inline-block; padding: 1px var(--sn-s-2);
  border: var(--sn-hair); border-radius: var(--sn-radius-s);
  background: var(--sn-sunk); font-family: var(--sn-font-mono);
  font-size: var(--sn-fs-xs); color: var(--sn-ink);
}

#resuelta-panel { margin-top: var(--sn-s-6); }
#resuelta-resolucion { font-size: var(--sn-fs-md); font-weight: 600; margin-bottom: var(--sn-s-2); }
.res-aceptada   { color: var(--sn-ok); }
.res-rechazada  { color: var(--sn-danger); }
.res-modificada { color: var(--sn-warn); }

/* ── Mapa tab: layout en columna ─────────────────────────────────── */
#tab-mapa { flex-direction: column; }

/* ── Columna de navegación (concepto + relaciones) ───────────────── */
.nav-col {
  flex: 0 0 380px;
  background: var(--sn-paper);
  border-left: 1px solid var(--sn-hairline);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;     /* needed for the resize handle */
}

/* Resize handle — borde derecho arrastrable */
.nav-col-resize {
  position: absolute;
  top: 0; right: -3px; bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 5;
}
.nav-col-resize::after {
  content: "";
  position: absolute;
  top: 0; left: 50%; bottom: 0;
  width: 1px; margin-left: -0.5px;
  background: var(--sn-hairline);
  transition: background 0.12s, width 0.12s;
}
.nav-col-resize:hover::after,
.nav-col-resize--dragging::after {
  background: var(--sn-nova);
  width: 3px; margin-left: -1.5px;
}

.nav-col-header {
  flex-shrink: 0;
  padding: var(--sn-s-2) var(--sn-s-3) var(--sn-s-2) var(--sn-s-4);
  border-bottom: 1px solid var(--sn-hairline);
  background: var(--sn-paper);
}

/* Encabezado: "↳ dirección + frase" que trajo hasta esta columna */
.nav-col-rama {
  display: flex; align-items: flex-start; gap: var(--sn-s-1);
  margin-bottom: var(--sn-s-1);
}
.nav-col-dir {
  flex-shrink: 0;
  font-size: 0.7rem; font-weight: 700;
  color: var(--sn-nova);
  margin-top: 2px;
  width: 12px; text-align: center;
}
.nav-col-frase-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nav-col-frase {
  font-family: var(--sn-font-serif); font-style: italic;
  font-size: var(--sn-fs-xs); line-height: 1.4;
  color: var(--sn-ink);
}
.nav-col-tipo-tag {
  font-size: 0.58rem; font-style: normal;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sn-ink-faint);
}

.nav-col-titlerow {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sn-s-2);
}
.nav-col-raiz {
  font-size: var(--sn-fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sn-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.nav-col-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--sn-ink-soft);
  padding: 2px var(--sn-s-1); border-radius: var(--sn-radius-s); line-height: 1;
  flex-shrink: 0;
}
.nav-col-close:hover { background: var(--sn-sunk); color: var(--sn-ink); }

.nav-col-body { flex: 1; overflow-y: auto; padding-bottom: var(--sn-s-6); }

/* ── Mapa tab (force-directed) ───────────────────────────────────── */
#grafo-wrap {
  flex: 1; position: relative; overflow: hidden;
  display: flex; flex-direction: row;
  background: var(--sn-field);
}

#grafo-canvas { flex: 1 1 auto; min-width: 280px; position: relative; overflow: hidden; }
#nav-cols { flex: 0 0 auto; display: flex; flex-direction: row; overflow-x: auto; max-width: 78%; }

#grafo-svg { width: 100%; height: 100%; }
#grafo-3d  { position: absolute; inset: 0; background: var(--sn-paper, #fff); }
#grafo-3d canvas { outline: none; display: block; }
#grafo-svg .node text,
#grafo-svg .node circle.focus-halo,
#grafo-svg .links line,
#grafo-svg .link-labels text {
  transition: opacity 0.18s ease, fill-opacity 0.18s ease,
              stroke-opacity 0.18s ease, stroke-width 0.18s ease, fill 0.18s ease;
}

#grafo-controles {
  position: absolute; bottom: var(--sn-s-4); left: var(--sn-s-4);
  display: flex; flex-direction: column; gap: var(--sn-s-2); align-items: flex-start;
  pointer-events: none;
}
#grafo-controles > * { pointer-events: auto; }

#leyenda-wrap {
  background: var(--sn-paper); border: var(--sn-hair);
  border-radius: var(--sn-radius); box-shadow: var(--sn-lift-paper);
  font-size: var(--sn-fs-xs); overflow: hidden;
}

.leyenda-summary {
  padding: var(--sn-s-1) var(--sn-s-3);
  font-size: var(--sn-fs-xs); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--sn-ink-soft); cursor: pointer;
  list-style: none; user-select: none;
}
.leyenda-summary::-webkit-details-marker { display: none; }
.leyenda-summary::marker { display: none; }
#leyenda-wrap[open] .leyenda-summary { border-bottom: var(--sn-hair); }

#leyenda-tipos {
  padding: var(--sn-s-2) var(--sn-s-3);
}

.leyenda-item { display: flex; align-items: center; gap: var(--sn-s-2); padding: 2px 0; }
.leyenda-line { width: 18px; height: 1.5px; border-radius: 1px; flex-shrink: 0; }

.panel-editado {
  padding: var(--sn-s-2) var(--sn-s-5) 0;
}

.panel-seccion {
  padding: var(--sn-s-2) var(--sn-s-4); border-bottom: 1px solid var(--sn-hairline-soft);
  font-size: var(--sn-fs-xs);
}
.panel-seccion:last-child { border-bottom: none; }
.panel-seccion .campo { margin-bottom: var(--sn-s-3); }
.panel-seccion .campo:last-child { margin-bottom: 0; }

.panel-seccion-titulo {
  font-size: var(--sn-fs-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sn-ink-soft); margin-bottom: var(--sn-s-3);
}
.panel-seccion-header { display: flex; align-items: center; gap: var(--sn-s-2); margin-bottom: var(--sn-s-3); }

/* ── Sección colapsable: <details class="panel-seccion"> ─────────── */
summary.panel-seccion-summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: var(--sn-s-1);
  margin-bottom: 0;
}
summary.panel-seccion-summary::-webkit-details-marker { display: none; }
summary.panel-seccion-summary::marker { display: none; }
summary.panel-seccion-summary::before {
  content: "›"; font-size: 0.9rem; line-height: 1;
  display: inline-block; transition: transform 0.15s;
  color: var(--sn-ink-faint); flex-shrink: 0;
}
details[open] > summary.panel-seccion-summary::before { transform: rotate(90deg); }
details[open] > summary.panel-seccion-summary { margin-bottom: var(--sn-s-3); }

/* ── Grupo colapsable de relaciones (por dirección) ──────────────── */
.panel-rel-grupo { border-radius: var(--sn-radius-m); }
.panel-rel-grupo-hdr {
  display: flex; align-items: center; gap: var(--sn-s-2);
  padding: var(--sn-s-1) 0;
  cursor: pointer; list-style: none;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sn-ink-soft);
  user-select: none;
  transition: background 0.1s;
}
.panel-rel-grupo-hdr::-webkit-details-marker { display: none; }
.panel-rel-grupo-hdr::marker { display: none; }
.panel-rel-grupo-hdr:hover { color: var(--sn-ink); }
.panel-rel-grupo-hdr::before {
  content: "›"; font-size: 0.9rem; line-height: 1;
  display: inline-block; transition: transform 0.15s;
  color: var(--sn-ink-faint);
}
details[open] > .panel-rel-grupo-hdr::before { transform: rotate(90deg); }
.panel-rel-grupo-nombre { flex: 1; }
.panel-rel-grupo-cnt {
  font-size: 0.62rem; font-variant-numeric: tabular-nums;
  background: var(--sn-sunk); border-radius: 10px;
  padding: 1px 6px; color: var(--sn-ink-faint); font-weight: 500;
}
.panel-rel-grupo-items { display: flex; flex-direction: column; padding: 0 0 var(--sn-s-2); }

/* ── Filas de relaciones: clicables, abren la siguiente columna ──── */
.panel-rel-fila {
  display: block; text-align: left; width: 100%;
  background: none; border: none;
  padding: var(--sn-s-1) 0;
  margin-bottom: var(--sn-s-1);
  font-size: var(--sn-fs-xs);
}
.panel-rel-fila:last-child { margin-bottom: 0; }
.panel-rel-fila--clicable { cursor: pointer; border-radius: var(--sn-radius-s); transition: background 0.08s; }
.panel-rel-fila--clicable:hover { background: var(--sn-sunk); }
.panel-rel-fila--elegida { background: var(--sn-sunk); }
.panel-rel-fila--elegida .panel-rel-nodo { color: var(--sn-nova); }
.panel-rel-frase {
  display: block;
  font-family: var(--sn-font-serif); font-style: italic;
  font-size: var(--sn-fs-xs); color: var(--sn-ink);
  line-height: 1.4; text-align: left;
}
.panel-rel-pie { display: flex; align-items: baseline; gap: var(--sn-s-2); margin-top: 1px; }
.panel-rel-nodo {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.panel-rel-tipo {
  font-size: 0.58rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sn-ink-faint);
}
.panel-acciones { display: flex; gap: var(--sn-s-2); flex-wrap: wrap; margin-top: var(--sn-s-3); }

.panel-nota-input {
  width: 100%; padding: var(--sn-s-2) var(--sn-s-2); margin-top: var(--sn-s-2);
  border: var(--sn-hair); border-radius: var(--sn-radius);
  font-family: var(--sn-font-text); font-size: var(--sn-fs-sm); resize: vertical;
  color: var(--sn-ink); background: var(--sn-paper); outline: none;
}
.panel-nota-input:focus { border-color: var(--sn-focus-border); box-shadow: var(--sn-focus-ring); }

.panel-anotacion {
  background: var(--sn-sunk); border-radius: var(--sn-radius);
  padding: var(--sn-s-2) var(--sn-s-3); margin-bottom: var(--sn-s-2);
}
.panel-anotacion .cita { font-size: var(--sn-fs-xs); }
.panel-seccion .cita { font-size: var(--sn-fs-xs); }

/* ── Conceptos & Relaciones tabs ─────────────────────────────────── */
#tab-conceptos,
#tab-relaciones { flex-direction: column; overflow-y: auto; }

.tabla-toolbar {
  background: var(--sn-paper); border-bottom: var(--sn-hair);
  padding: var(--sn-s-3) var(--sn-s-4); display: flex; align-items: center;
  gap: var(--sn-s-3); flex-wrap: wrap; flex-shrink: 0;
}

.buscar-input {
  padding: var(--sn-s-2) var(--sn-s-3); border: var(--sn-hair);
  border-radius: var(--sn-radius); font-size: var(--sn-fs-sm);
  font-family: var(--sn-font-text); background: var(--sn-paper);
  color: var(--sn-ink); outline: none; width: 220px;
}
.buscar-input:focus { border-color: var(--sn-focus-border); box-shadow: var(--sn-focus-ring); }

.tipo-filtros { display: flex; gap: var(--sn-s-1); flex-wrap: wrap; }

.tipo-filtro-btn {
  padding: var(--sn-s-1) var(--sn-s-3); font-size: var(--sn-fs-xs);
  border: var(--sn-hair); border-radius: var(--sn-radius);
  background: none; cursor: pointer; color: var(--sn-ink-soft);
  font-family: var(--sn-font-text); transition: all var(--sn-dur-1);
}
.tipo-filtro-btn:hover  { background: var(--sn-nova-wash); color: var(--sn-nova); border-color: var(--sn-nova); }
.tipo-filtro-btn.active { background: var(--sn-ink); color: var(--sn-paper); border-color: var(--sn-ink); }

.tabla-scroll { flex: 1; overflow: auto; }

table {
  width: 100%; border-collapse: collapse;
  font-size: var(--sn-fs-sm); background: var(--sn-paper);
}

thead { position: sticky; top: 0; background: var(--sn-paper); z-index: 10; }
thead tr { border-bottom: 2px solid var(--sn-hairline); }

th {
  padding: var(--sn-s-2) var(--sn-s-3); text-align: left;
  font-size: var(--sn-fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--sn-ink-soft); white-space: nowrap;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--sn-ink); }
th.sort-asc::after  { content: " ↑"; }
th.sort-desc::after { content: " ↓"; }

td {
  padding: var(--sn-s-2) var(--sn-s-3); border-bottom: 1px solid var(--sn-hairline-soft);
  vertical-align: middle;
}
tbody tr:hover td { background: var(--sn-sunk); }

.conf-bar-wrap { display: flex; align-items: center; gap: var(--sn-s-2); }
.conf-bar { display: inline-block; height: 4px; border-radius: 2px; background: var(--sn-nova); opacity: .45; }
.conf-val { font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); }

/* Edición inline */
.edit-input {
  padding: 2px var(--sn-s-2); border: 1px solid var(--sn-nova);
  border-radius: var(--sn-radius); font-size: var(--sn-fs-sm);
  font-family: var(--sn-font-text); background: var(--sn-paper);
  color: var(--sn-ink); outline: none; width: 100%; min-width: 80px;
}

.edit-select {
  padding: 2px var(--sn-s-2); border: 1px solid var(--sn-nova);
  border-radius: var(--sn-radius); font-size: var(--sn-fs-xs);
  font-family: var(--sn-font-text); background: var(--sn-paper);
  color: var(--sn-ink); cursor: pointer; outline: none;
}

.btn-inline {
  padding: 1px var(--sn-s-2); font-size: var(--sn-fs-xs);
  border: var(--sn-hair); border-radius: var(--sn-radius-s);
  background: none; cursor: pointer; color: var(--sn-ink-soft);
  font-family: var(--sn-font-text); transition: all var(--sn-dur-1);
  display: inline-flex; align-items: center; gap: 4px;
}
.btn-inline:hover { background: var(--sn-nova-wash); color: var(--sn-nova); border-color: var(--sn-nova); }
.btn-inline.danger:hover { background: var(--sn-danger-wash); color: var(--sn-danger); border-color: var(--sn-danger); }

.cell-editando { min-width: 120px; }

.bidir-toggle {
  cursor: pointer; font-size: var(--sn-fs-base); padding: 1px var(--sn-s-1);
  border-radius: var(--sn-radius-s); border: none; background: none;
  color: var(--sn-ink-soft);
}
.bidir-toggle.on { color: var(--sn-nova); }
.bidir-toggle:hover { background: var(--sn-sunk); }

/* ── Biblioteca ──────────────────────────────────────────────────── */
#vista-biblioteca {
  position: fixed;
  top: var(--sn-header-h); left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  padding: var(--sn-s-6) var(--sn-s-6);
  background: var(--sn-field);
}

#biblioteca-header { margin-bottom: var(--sn-s-4); }
.bib-titulo    { font-size: var(--sn-fs-xl); font-weight: 700; margin-bottom: var(--sn-s-1); }
.bib-subtitulo { font-size: var(--sn-fs-sm); color: var(--sn-ink-soft); }

#biblioteca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-items: start;          /* cada tarjeta toma su altura natural */
  gap: var(--sn-s-3);
  max-width: var(--sn-shell);
}

.bib-card-sin-procesar { opacity: .82; }
.bib-card-sin-procesar:hover { border-color: var(--sn-hairline) !important; box-shadow: var(--sn-lift-paper) !important; transform: none !important; }
.bib-card-procesando { opacity: .72; pointer-events: none; }

.bib-card-inner { display: flex; flex-direction: column; gap: var(--sn-s-2); padding: var(--sn-s-4); }

.bib-card-titulo {
  font-size: var(--sn-fs-sm); font-weight: 600; line-height: 1.3;
  color: var(--sn-ink);
}

.bib-card-cita {
  font-size: var(--sn-fs-xs);
  font-family: var(--sn-font-quote);
  line-height: 1.4;
}

.bib-progress-wrap {
  height: 3px; background: var(--sn-sunk);
  border-radius: var(--sn-radius-pill); overflow: hidden;
}
.bib-progress-bar {
  height: 100%; background: var(--sn-nova);
  border-radius: var(--sn-radius-pill); transition: width var(--sn-dur-2);
}

.bib-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sn-s-2); flex-wrap: wrap;
}
.bib-stats { font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); }

.bib-fase {
  display: inline-block; padding: 1px var(--sn-s-2);
  border-radius: var(--sn-radius-s); font-size: var(--sn-fs-xs);
  font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.bib-fase-sin_validar { background: var(--sn-sunk);      color: var(--sn-ink-soft);  border: var(--sn-hair); }
.bib-fase-sin_iniciar { background: var(--sn-warn-wash);  color: var(--sn-warn); }
.bib-fase-en_progreso { background: var(--sn-nova-wash);  color: var(--sn-nova); }
.bib-fase-completado  { background: var(--sn-ok-wash);    color: var(--sn-ok); }
.bib-fase-listo       { background: var(--sn-ok-wash);    color: var(--sn-ok); }

.btn-procesar {
  padding: var(--sn-s-1) var(--sn-s-3); font-size: var(--sn-fs-xs); font-weight: 600;
  border: 1px solid var(--sn-nova); border-radius: var(--sn-radius);
  background: var(--sn-nova-wash); color: var(--sn-nova);
  cursor: pointer; font-family: var(--sn-font-text); transition: all var(--sn-dur-1);
  white-space: nowrap;
}
.btn-procesar:hover { background: var(--sn-nova); color: var(--sn-paper); }

.bib-procesando-wrap {
  display: flex; flex-direction: column; gap: var(--sn-s-2); margin-top: var(--sn-s-1);
}

.bib-progress-indeterminate {
  height: 3px; border-radius: var(--sn-radius-pill);
  background: var(--sn-sunk); overflow: hidden; position: relative;
}
.bib-progress-indeterminate::after {
  content: "";
  position: absolute; top: 0; left: -60%; width: 60%; height: 100%;
  background: var(--sn-nova);
  border-radius: var(--sn-radius-pill);
  animation: indeterminate 1.4s ease-in-out infinite;
}
@keyframes indeterminate {
  0%   { left: -60%; }
  100% { left: 110%; }
}

.bib-procesando-info {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sn-s-2);
}
.bib-fase-msg { font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); }
.bib-elapsed  { font-size: var(--sn-fs-xs); font-family: var(--sn-font-mono); }

/* ── Extracción en vivo: conceptos y relaciones emergentes ──────────── */
.bib-extraccion-live {
  display: flex; flex-direction: column; gap: var(--sn-s-1);
  margin-top: var(--sn-s-2);
  padding-top: var(--sn-s-2);
  border-top: var(--sn-hair);
}
.bib-live-label {
  font-size: var(--sn-fs-xs);
  letter-spacing: 0.03em;
}
.bib-ctags, .bib-rtags {
  display: flex; flex-wrap: wrap; gap: var(--sn-s-1);
}
.bib-ctag {
  font-size: var(--sn-fs-xs);
  padding: 1px var(--sn-s-2);
  border-radius: var(--sn-radius-pill);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.bib-ctag-primitivo   { color: var(--sn-nova); }
.bib-ctag-derivado    { color: var(--sn-ink-soft); }
.bib-ctag-metalenguaje { color: #7b4899; }
.bib-ctag-ambiguo     { color: var(--sn-warn, #c07030); }

.bib-rtag {
  font-size: 0.68rem;
  color: var(--sn-ink-faint);
  font-family: var(--sn-font-mono);
  white-space: nowrap;
}
.bib-rtag-arrow { opacity: 0.5; }

.bib-log-panel {
  font-family: var(--sn-font-mono);
  font-size: 0.68rem;
  line-height: 1.45;
  background: var(--sn-sunk);
  color: var(--sn-ink-soft);
  border-radius: var(--sn-radius-s);
  border: var(--sn-hair);
  padding: var(--sn-s-2) var(--sn-s-3);
  max-height: 180px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: var(--sn-s-2);
}

.bib-btn-log.active { color: var(--sn-nova); }

.bib-error {
  display: block; margin-top: var(--sn-s-1);
  font-size: var(--sn-fs-xs); color: var(--sn-danger);
}

.bib-vacia {
  grid-column: 1 / -1;
  padding: var(--sn-s-8) 0; text-align: center;
  color: var(--sn-ink-soft);
}
.bib-vacia-icono { font-size: 36px; margin-bottom: var(--sn-s-4); opacity: .45; }
.bib-vacia p { margin-bottom: var(--sn-s-2); }

.btn-back {
  padding: var(--sn-s-1) var(--sn-s-3); font-size: var(--sn-fs-sm);
  border: var(--sn-hair); border-radius: var(--sn-radius);
  background: none; cursor: pointer;
  color: var(--sn-ink-soft); font-family: var(--sn-font-text);
  transition: all var(--sn-dur-1); white-space: nowrap;
}
.btn-back:hover { background: var(--sn-sunk); color: var(--sn-ink); }

/* ── Biblioteca: card footer con acciones ────────────────────────── */
.bib-card {
  display: flex; flex-direction: column;
  background: var(--sn-paper); border: var(--sn-hair);
  border-radius: var(--sn-radius-l); overflow: hidden;
  box-shadow: var(--sn-lift-paper);
  transition: box-shadow var(--sn-dur-2) var(--sn-ease),
              border-color var(--sn-dur-1),
              transform var(--sn-dur-2) var(--sn-ease);
}
.bib-card:hover {
  border-color: var(--sn-nova);
  box-shadow: var(--sn-lift);
  transform: translateY(-2px);
}
.bib-card-click,
.bib-card-inner {
  padding: var(--sn-s-4); flex: 1;
  display: flex; flex-direction: column; gap: var(--sn-s-2);
}
.bib-card-click { cursor: pointer; }
.bib-card-click:hover { background: color-mix(in srgb, var(--sn-nova) 3%, transparent); }

/* ── Mini-mapa y card-body: AFTER .bib-card-click so their rules win the cascade ── */
.bib-mini-mapa {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  flex: none;
  background: color-mix(in oklab, var(--sn-paper) 60%, var(--sn-sunk));
  border-radius: var(--sn-radius-l) var(--sn-radius-l) 0 0;
  overflow: hidden;
  position: relative;
}
.bib-mini-mapa svg { width: 100%; height: 100%; display: block; }

.bib-card-body {
  padding: var(--sn-s-3) var(--sn-s-4) var(--sn-s-4);
  gap: var(--sn-s-1);
  flex: 1;
}

.bib-card-footer {
  display: flex; align-items: center; gap: var(--sn-s-2); flex-wrap: wrap;
  padding: var(--sn-s-1) var(--sn-s-3);
  border-top: var(--sn-hair); background: var(--sn-sunk);
}
.bib-sin-ficha {
  font-size: var(--sn-fs-xs); opacity: .5; font-style: italic;
}

/* ── Modal: Ficha bibliográfica ──────────────────────────────────── */
#ficha-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
#ficha-modal[hidden] { display: none; }

#ficha-modal-bg {
  position: absolute; inset: 0;
  background: rgba(34,31,26,.45); backdrop-filter: blur(2px);
}

#ficha-modal-box {
  position: relative; z-index: 1;
  background: var(--sn-paper); border: var(--sn-hair);
  border-radius: var(--sn-radius-l); box-shadow: var(--sn-lift);
  width: min(600px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem); overflow-y: auto;
  display: flex; flex-direction: column;
}

#ficha-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sn-s-5) var(--sn-s-6) var(--sn-s-3);
  border-bottom: var(--sn-hair); flex-shrink: 0;
}
#ficha-modal-header h3 {
  font-size: var(--sn-fs-md); font-weight: 700; color: var(--sn-ink);
}
#ficha-modal-cerrar {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--sn-ink-soft); line-height: 1; padding: 2px 6px;
  border-radius: var(--sn-radius);
}
#ficha-modal-cerrar:hover { background: var(--sn-sunk); color: var(--sn-ink); }

#ficha-modal-body {
  padding: var(--sn-s-5) var(--sn-s-6); flex: 1;
  display: flex; flex-direction: column; gap: var(--sn-s-4);
}
.meta-fila { display: flex; gap: var(--sn-s-4); }

#ficha-modal-footer {
  display: flex; gap: var(--sn-s-3);
  padding: var(--sn-s-4) var(--sn-s-6) var(--sn-s-5);
  border-top: var(--sn-hair); flex-shrink: 0;
}

/* ── Modal: Re-procesar ──────────────────────────────────────────── */
#repro-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
#repro-modal[hidden] { display: none; }

#repro-modal-bg {
  position: absolute; inset: 0;
  background: rgba(34,31,26,.45); backdrop-filter: blur(2px);
}

#repro-modal-box {
  position: relative; z-index: 1;
  background: var(--sn-paper); border: var(--sn-hair);
  border-radius: var(--sn-radius-lg); box-shadow: var(--sn-shadow-float);
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  display: flex; flex-direction: column; overflow: hidden;
}

#repro-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sn-s-5) var(--sn-s-6) var(--sn-s-3);
  border-bottom: var(--sn-hair); flex-shrink: 0;
}
#repro-modal-header h3 {
  font-size: var(--sn-fs-md); font-weight: 700; color: var(--sn-ink);
}
#repro-modal-cerrar {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--sn-ink-soft); line-height: 1; padding: 2px 6px;
  border-radius: var(--sn-radius);
}
#repro-modal-cerrar:hover { background: var(--sn-sunk); color: var(--sn-ink); }

#repro-modal-body {
  padding: var(--sn-s-5) var(--sn-s-6); flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sn-s-3);
  min-height: 0;
}

.repro-confirm-titulo {
  font-size: var(--sn-fs-md); font-weight: 600; color: var(--sn-ink);
  margin: 0 0 var(--sn-s-2);
}
.repro-confirm-aviso {
  font-size: var(--sn-fs-sm); color: var(--sn-ink-soft);
  line-height: 1.55; margin: 0;
}

.repro-progress-wrap {
  height: 3px; background: var(--sn-sunk);
  border-radius: var(--sn-radius-pill); overflow: hidden;
}
.repro-progress-indeterminate {
  height: 100%; background: var(--sn-sunk); position: relative;
}
.repro-progress-indeterminate::after {
  content: "";
  position: absolute; top: 0; left: -60%; width: 60%; height: 100%;
  background: var(--sn-nova);
  animation: bib-indeterminate 1.4s linear infinite;
}
.repro-progress-determinate {
  height: 100%; background: var(--sn-nova);
  border-radius: var(--sn-radius-pill); transition: width 0.4s ease;
}
.repro-status-row {
  display: flex; align-items: center; gap: var(--sn-s-2);
  font-size: var(--sn-fs-xs);
}
#repro-fase { flex: 1; color: var(--sn-ink-soft); }

#repro-modal-footer {
  display: flex; gap: var(--sn-s-3);
  padding: var(--sn-s-4) var(--sn-s-6) var(--sn-s-5);
  border-top: var(--sn-hair); flex-shrink: 0;
}

#repro-estado-proc #repro-log {
  max-height: 240px; margin-top: var(--sn-s-2);
}

/* ── Tab: Texto original ─────────────────────────────────────────── */
#tab-texto {
  overflow-y: auto;
}
#texto-wrap {
  max-width: 900px; margin: 0 auto;
  padding: var(--sn-s-6) var(--sn-s-6);
}
/* Modo edición: wrap se expande al ancho completo */
#texto-wrap.editando {
  max-width: none;
  padding: var(--sn-s-5) var(--sn-s-5);
}
/* Split: editor | preview lado a lado */
#texto-split {
  display: contents; /* en lectura no agrega layout */
}
#texto-wrap.editando #texto-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sn-s-4);
  align-items: flex-start;
}
.texto-ficha {
  font-size: var(--sn-fs-xs); color: var(--sn-ink-soft);
  margin-bottom: var(--sn-s-5); padding-bottom: var(--sn-s-4);
  border-bottom: var(--sn-hair);
}
/* ── Toolbar del editor ───────────────────────────────────────────── */
#texto-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sn-s-4);
  gap: var(--sn-s-2);
}
#texto-toolbar-left { display: flex; gap: var(--sn-s-2); align-items: center; }
#texto-revisiones-badge {
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-soft);
}

/* ── Banner de desincronización ──────────────────────────────────── */
#texto-desync-banner {
  background: color-mix(in srgb, var(--sn-accent, #e8a020) 12%, var(--sn-paper));
  border: 1px solid color-mix(in srgb, var(--sn-accent, #e8a020) 35%, transparent);
  border-radius: var(--sn-radius);
  padding: var(--sn-s-2) var(--sn-s-3);
  margin-bottom: var(--sn-s-4);
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink);
}

/* ── Render (lectura MD→HTML) ────────────────────────────────────── */
#texto-render {
  font-family: var(--sn-font-text); font-size: var(--sn-fs-sm);
  line-height: 1.8; color: var(--sn-ink); word-break: break-word;
}
#texto-render p   { margin: 0 0 1em; }
#texto-render h1,
#texto-render h2,
#texto-render h3  { font-weight: 600; margin: 1.5em 0 0.5em; line-height: 1.3; }
#texto-render h1  { font-size: 1.4em; }
#texto-render h2  { font-size: 1.2em; }
#texto-render h3  { font-size: 1em; }
#texto-render strong { font-weight: 600; }
#texto-render em     { font-style: italic; }
#texto-render code   { font-family: var(--sn-font-mono, monospace); font-size: 0.9em;
                        background: var(--sn-sunk); padding: 0.1em 0.3em; border-radius: 3px; }
#texto-render blockquote {
  border-left: 3px solid var(--sn-ink-soft);
  margin: 1em 0; padding: 0 1em;
  color: var(--sn-ink-soft);
}
#texto-render ul, #texto-render ol { padding-left: 1.5em; margin: 0.5em 0 1em; }
#texto-render li { margin-bottom: 0.3em; }

/* ── Editor (textarea) ───────────────────────────────────────────── */
#texto-editor {
  width: 100%; box-sizing: border-box;
  min-height: 72vh;
  font-family: var(--sn-font-text); font-size: var(--sn-fs-sm);
  line-height: 1.8; color: var(--sn-ink);
  background: var(--sn-sunk);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius);
  padding: var(--sn-s-4);
  resize: none;
  outline: none;
}
#texto-editor:focus {
  border-color: var(--sn-ink-soft);
}
/* Preview en el lado derecho del split */
#texto-wrap.editando #texto-render {
  min-height: 72vh;
  padding: var(--sn-s-4);
  background: var(--sn-field);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius);
  overflow-y: auto;
}

/* ── Zona de peligro ─────────────────────────────────────────────── */
#texto-zona-peligro {
  margin-top: var(--sn-s-8);
  border-top: 1px solid color-mix(in srgb, var(--sn-rechazar, #c0392b) 25%, transparent);
}
#texto-zona-peligro-titulo {
  font-size: var(--sn-fs-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sn-rechazar, #c0392b) 60%, var(--sn-ink-soft));
  cursor: pointer; user-select: none;
  padding: var(--sn-s-3) 0;
  list-style: none;
}
#texto-zona-peligro-titulo::-webkit-details-marker { display: none; }
#texto-zona-peligro[open] #texto-zona-peligro-titulo { margin-bottom: var(--sn-s-3); }
#texto-zona-peligro-body {
  display: flex; flex-direction: column; gap: var(--sn-s-4);
  padding-bottom: var(--sn-s-6);
}
.texto-accion-peligro {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sn-s-4);
  padding: var(--sn-s-3) var(--sn-s-4);
  background: var(--sn-sunk);
  border: var(--sn-hair);
  border-radius: var(--sn-radius);
}
.texto-accion-peligro p.muted {
  font-size: var(--sn-fs-xs); color: var(--sn-ink-soft);
  margin: var(--sn-s-1) 0 0;
}
.texto-accion-peligro button {
  flex-shrink: 0;
}

/* ── Historial de revisiones ─────────────────────────────────────── */
#texto-historial {
  margin-top: var(--sn-s-6);
  border-top: var(--sn-hair);
  padding-top: var(--sn-s-4);
}
#texto-historial summary {
  font-size: var(--sn-fs-xs); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--sn-ink-soft);
  cursor: pointer; user-select: none;
  margin-bottom: var(--sn-s-3);
}
#texto-historial-lista {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--sn-s-2);
}
.texto-rev-item {
  font-size: var(--sn-fs-xs); color: var(--sn-ink-soft);
  padding: var(--sn-s-1) 0;
  border-bottom: var(--sn-hair);
}

/* ── Sidebar footer ──────────────────────────────────────────────── */
#sidebar-footer {
  padding: var(--sn-s-3) var(--sn-s-4);
  border-top: var(--sn-hair);
  flex-shrink: 0;
}

/* ══ Grafos personales (biblioteca section) ═══════════════════════ */
#gp-biblioteca-section {
  margin-top: var(--sn-s-6);
  max-width: var(--sn-shell);
}

#gp-biblioteca-header {
  display: flex; align-items: baseline; gap: var(--sn-s-3);
  margin-bottom: var(--sn-s-3);
}

.gp-seccion-titulo {
  font-size: var(--sn-fs-base); font-weight: 700;
  color: var(--sn-ink);
}

#gp-nuevo-form {
  background: var(--sn-paper); border: var(--sn-hair);
  border-radius: var(--sn-radius-l); padding: var(--sn-s-4);
  margin-bottom: var(--sn-s-3); max-width: 480px;
  box-shadow: var(--sn-lift-paper);
}

#gp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sn-s-3);
}

.gp-card-wrap {
  display: flex; flex-direction: column;
  background: var(--sn-paper); border: var(--sn-hair);
  border-radius: var(--sn-radius-l); overflow: hidden;
  box-shadow: var(--sn-lift-paper);
  border-left: 3px solid var(--sn-ok);
  transition: box-shadow var(--sn-dur-2) var(--sn-ease),
              border-color var(--sn-dur-1),
              transform var(--sn-dur-2) var(--sn-ease);
}
.gp-card-wrap:hover {
  border-color: var(--sn-ok);
  box-shadow: var(--sn-lift);
  transform: translateY(-2px);
}

.gp-card {
  display: block; width: 100%; text-align: left;
  background: none; border: none;
  padding: var(--sn-s-4); flex: 1;
  cursor: pointer; font-family: var(--sn-font-text);
}
.gp-card:hover { background: color-mix(in srgb, var(--sn-ok) 3%, transparent); }

.gp-card-footer {
  display: flex; align-items: center; gap: var(--sn-s-2);
  padding: var(--sn-s-1) var(--sn-s-3);
  border-top: var(--sn-hair); background: var(--sn-sunk);
}
.gp-card-titulo {
  font-size: var(--sn-fs-sm); font-weight: 600; margin-bottom: var(--sn-s-1);
  color: var(--sn-ink);
}
.gp-card-desc { font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); margin-bottom: var(--sn-s-2); }
.gp-card-stats { font-size: var(--sn-fs-xs); color: var(--sn-ink-soft); display: flex; gap: var(--sn-s-3); }

.gp-card-vacio {
  grid-column: 1 / -1;
  padding: var(--sn-s-6); text-align: center;
  color: var(--sn-ink-soft); font-size: var(--sn-fs-sm);
}

/* ══ Grafos personales (vista editor) ════════════════════════════ */
#vista-gp {
  position: fixed;
  top: var(--sn-header-h); left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  background: var(--sn-field);
}

#gp-layout {
  flex: 1; display: flex; overflow: hidden;
}

/* ── Sidebar de conceptos ─────────────────────────────── */
#gp-sidebar {
  width: 260px; flex-shrink: 0;
  background: var(--sn-paper); border-right: var(--sn-hair);
  overflow-y: auto; display: flex; flex-direction: column;
  padding-bottom: var(--sn-s-4);
}

#gp-info {
  padding: var(--sn-s-5) var(--sn-s-4) var(--sn-s-3);
  border-bottom: var(--sn-hair);
}
.gp-titulo {
  font-size: var(--sn-fs-md); font-weight: 700; color: var(--sn-ink);
  line-height: 1.3;
}
.gp-desc {
  font-size: var(--sn-fs-xs); margin-top: var(--sn-s-1); line-height: 1.4;
}

#gp-texto-fuente-wrap {
  padding: var(--sn-s-3) var(--sn-s-4);
  border-bottom: var(--sn-hair);
}

#gp-conceptos-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sn-s-3) var(--sn-s-4) var(--sn-s-2);
}

#gp-nuevo-concepto-form {
  padding: 0 var(--sn-s-4) var(--sn-s-3);
  border-bottom: var(--sn-hair);
}

#gp-conceptos-lista {
  list-style: none; flex: 1; overflow-y: auto;
}

.gp-concepto-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sn-s-2) var(--sn-s-4);
  cursor: pointer;
  border-bottom: 1px solid var(--sn-hairline-soft);
  transition: background var(--sn-dur-1);
  gap: var(--sn-s-2);
}
.gp-concepto-item:hover { background: var(--sn-sunk); }
.gp-concepto-item.active {
  background: var(--sn-ok-wash); border-left: 2px solid var(--sn-ok);
}
.gp-concepto-label {
  font-size: var(--sn-fs-sm); font-weight: 500; color: var(--sn-ink);
  line-height: 1.3; flex: 1;
}
.gp-concepto-def {
  font-size: var(--sn-fs-xs); color: var(--sn-ink-soft);
  margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Canvas D3 ────────────────────────────────────────── */
#gp-canvas {
  flex: 1; position: relative; overflow: hidden;
}
#gp-svg { width: 100%; height: 100%; }
#gp-3d  { position: absolute; inset: 0; background: var(--sn-paper, #fff); }
#gp-3d canvas { outline: none; display: block; }

#gp-canvas-controles {
  position: absolute; bottom: var(--sn-s-4); right: var(--sn-s-4);
  display: flex; flex-direction: column; gap: var(--sn-s-2);
}

#gp-canvas-vacio {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--sn-ink-soft); font-size: var(--sn-fs-sm); pointer-events: none;
}

/* ── Panel lateral GP ─────────────────────────────────── */
#gp-panel {
  width: 320px; flex-shrink: 0;
  background: var(--sn-paper); border-left: var(--sn-hair);
  overflow-y: auto; position: relative;
  display: flex; flex-direction: column;
}
#btn-gp-cerrar-panel {
  position: absolute; top: var(--sn-s-3); right: var(--sn-s-3);
  background: none; border: none; font-size: 18px;
  cursor: pointer; color: var(--sn-ink-soft);
  padding: 2px var(--sn-s-2); border-radius: var(--sn-radius); line-height: 1; z-index: 1;
}
#btn-gp-cerrar-panel:hover { background: var(--sn-sunk); color: var(--sn-ink); }
#gp-panel-content { flex: 1; padding-bottom: var(--sn-s-6); }

/* ── Reconexión (getYourStuffTogether) + Consolidación de sinónimos ──
   Mismo patrón visual para ambos paneles de sesión; sólo cambia el id. ── */
#btn-cerrar-reconexion,
#btn-cerrar-consolidacion {
  background: none; border: none;
  font-size: 18px; cursor: pointer; color: var(--sn-ink-soft);
  padding: 2px var(--sn-s-2); border-radius: var(--sn-radius); line-height: 1;
  flex-shrink: 0; align-self: center;
}
#btn-cerrar-reconexion:hover,
#btn-cerrar-consolidacion:hover { background: var(--sn-sunk); color: var(--sn-ink); }

#panel-reconexion,
#panel-consolidacion {
  position: absolute;
  top: 0; right: 0;
  width: 360px;
  height: 100%;
  background: var(--sn-paper);
  border-left: 1px solid var(--sn-hairline);
  display: flex; flex-direction: column;
  z-index: 10;
  box-shadow: -4px 0 12px rgba(0,0,0,.06);
}
#panel-reconexion-header,
#panel-consolidacion-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: var(--sn-s-3) var(--sn-s-4);
  border-bottom: 1px solid var(--sn-hairline);
  gap: var(--sn-s-2);
}
#panel-reconexion-header-text,
#panel-consolidacion-header-text { display: flex; flex-direction: column; gap: 2px; }
#panel-reconexion-titulo,
#panel-consolidacion-titulo { font-size: var(--sn-fs-sm); font-weight: 600; }
#panel-reconexion-desc,
#panel-consolidacion-desc {
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-soft);
}
#panel-reconexion-content,
#panel-consolidacion-content {
  flex: 1; overflow-y: auto;
  padding: var(--sn-s-3) var(--sn-s-4);
  display: flex; flex-direction: column; gap: var(--sn-s-3);
}
#panel-reconexion-footer,
#panel-consolidacion-footer {
  padding: var(--sn-s-3) var(--sn-s-4);
  border-top: 1px solid var(--sn-hairline);
  display: flex; gap: var(--sn-s-2); align-items: center;
}
#btn-confirmar-reconexion,
#btn-confirmar-consolidacion { flex: 1; justify-content: center; }

/* Instrucción y estados */
.rec-instruccion {
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-soft);
  line-height: 1.5;
  padding: var(--sn-s-1) 0 var(--sn-s-1);
}
.rec-vacio {
  padding: var(--sn-s-4) var(--sn-s-2);
  display: flex; flex-direction: column; gap: var(--sn-s-3);
  font-size: var(--sn-fs-s);
  line-height: 1.6;
}
.rec-resultado {
  padding: var(--sn-s-4) var(--sn-s-2);
  display: flex; flex-direction: column; gap: var(--sn-s-2);
  font-size: var(--sn-fs-s);
  line-height: 1.6;
}
.rec-error {
  padding: var(--sn-s-2) var(--sn-s-3);
  background: var(--sn-danger-wash);
  color: var(--sn-danger);
  border-radius: var(--sn-radius-s);
  font-size: var(--sn-fs-xs);
  margin-bottom: var(--sn-s-2);
}

/* Tarjeta de propuesta */
.rec-propuesta {
  display: flex; flex-direction: column; gap: var(--sn-s-2);
  padding: var(--sn-s-3);
  border: 1px solid var(--sn-hairline);
  border-radius: var(--sn-radius);
  background: var(--sn-paper);
  transition: opacity 0.15s, border-color 0.15s;
}
.rec-propuesta:has(.rec-check:checked) {
  border-color: var(--sn-hairline);
}
.rec-deseleccionada {
  opacity: 0.45;
}

/* Layout interno de la propuesta */
.rec-check-label {
  display: flex; align-items: flex-start; gap: var(--sn-s-2); cursor: pointer;
}
.rec-check { margin-top: 3px; flex-shrink: 0; accent-color: var(--sn-ok); }
.rec-nodos-wrap { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.rec-nodos { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rec-flecha { color: var(--sn-ink-faint); font-size: var(--sn-fs-xs); flex-shrink: 0; }
.rec-meta { display: flex; align-items: center; gap: var(--sn-s-2); }
.rec-tipo {
  font-style: italic;
  background: none; border: none; padding: 0;
  color: var(--sn-ink-soft);
  font-size: var(--sn-fs-xs);
}
.rec-conf {
  font-size: var(--sn-fs-xs);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.rec-conf-alta  { color: var(--sn-ok); }
.rec-conf-media { color: var(--sn-warn); }
.rec-conf-baja  { color: var(--sn-ink-soft); }

/* Nodo "suelto" marcado */
.tag.suelto {
  background: var(--sn-warn-wash);
  border-color: var(--sn-masking-500);
  color: var(--sn-warn);
}

.rec-frase {
  font-size: var(--sn-fs-xs);
  width: 100%;
}

/* Log de procesamiento en tiempo real */
.rec-procesando-wrap {
  display: flex; flex-direction: column; gap: var(--sn-s-2);
}
.rec-progress-bar {
  height: 2px; border-radius: var(--sn-radius-pill);
  background: var(--sn-sunk); overflow: hidden; position: relative;
}
.rec-progress-bar::after {
  content: "";
  position: absolute; top: 0; left: -60%; width: 60%; height: 100%;
  background: var(--sn-nova);
  border-radius: var(--sn-radius-pill);
  animation: indeterminate 1.4s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
.rec-log-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sn-nova);
  animation: rec-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0; display: inline-block;
}
.rec-log-header {
  display: flex; align-items: center; gap: var(--sn-s-2);
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-faint);
  padding-bottom: var(--sn-s-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rec-status-row {
  display: flex; align-items: center; gap: var(--sn-s-2);
  font-size: var(--sn-fs-xs);
  color: var(--sn-ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: var(--sn-s-1);
}
#rec-fase { flex: 1; }
.rec-token-count {
  font-size: var(--sn-fs-xs);
  color: var(--sn-nova);
  font-variant-numeric: tabular-nums;
  min-width: 5ch; text-align: right;
}
.rec-detener-btn {
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: 0;
}
.rec-log-pre {
  font-family: var(--sn-font-mono);
  font-size: 0.6rem;
  line-height: 1.6;
  background: var(--sn-sunk);
  color: var(--sn-ink-soft);
  border-radius: var(--sn-radius-s);
  border: var(--sn-hair);
  padding: var(--sn-s-3);
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  min-height: 200px;
}
/* Cursor parpadeante mientras el stream está activo */
@keyframes rec-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.rec-log-pre--active::after {
  content: "▌";
  color: var(--sn-nova);
  animation: rec-cursor 0.9s step-end infinite;
}
.rec-log-pre:empty::before {
  content: "esperando respuesta del modelo…";
  color: var(--sn-ink-faint);
  font-style: italic;
}

/* ── Misc ─────────────────────────────────────────────────────────── */
.muted      { color: var(--sn-ink-soft); }
.mono       { font-family: var(--sn-font-mono); font-size: var(--sn-fs-xs); }
.edited-mark { color: var(--sn-ink-soft); font-size: var(--sn-fs-xs); margin-left: var(--sn-s-1); }
hr.divider  { border: none; border-top: 1px solid var(--sn-hairline-soft); margin: var(--sn-s-4) 0; }

/* ── Scrollbar ─────────────────────────────────────────────────────── */
#sidebar::-webkit-scrollbar,
#contenido::-webkit-scrollbar,
.tabla-scroll::-webkit-scrollbar,
.nav-col-body::-webkit-scrollbar { width: 5px; }

#sidebar::-webkit-scrollbar-track,
#contenido::-webkit-scrollbar-track,
.tabla-scroll::-webkit-scrollbar-track,
.nav-col-body::-webkit-scrollbar-track { background: transparent; }

#sidebar::-webkit-scrollbar-thumb,
#contenido::-webkit-scrollbar-thumb,
.tabla-scroll::-webkit-scrollbar-thumb,
.nav-col-body::-webkit-scrollbar-thumb { background: var(--sn-hairline); border-radius: var(--sn-radius-pill); }

/* ── Autocomplete dropdown (grafos personales) ───────────────────── */
.gp-ac-dropdown {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 300;
  background: var(--sn-paper);
  border: var(--sn-hair);
  border-radius: var(--sn-radius);
  box-shadow: var(--sn-lift);
  list-style: none;
  padding: var(--sn-s-1) 0;
  margin: 2px 0 0;
  max-height: 220px;
  overflow-y: auto;
}
.gp-ac-item {
  padding: var(--sn-s-2) var(--sn-s-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.gp-ac-item:hover,
.gp-ac-item.active {
  background: color-mix(in srgb, var(--sn-nova) 6%, transparent);
}
.gp-ac-item-label {
  font-size: var(--sn-fs-xs);
  font-weight: 600;
  color: var(--sn-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gp-ac-item-meta {
  font-size: 10px;
  color: var(--sn-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}