:root {
  --fondo: #faf8f4;
  --superficie: #ffffff;
  --tinta: #1f1d1a;
  --tenue: #6b655c;
  --linea: #e4dfd6;
  --acento: #8a3b12;
  --m1: #2f6f8f;
  --m2: #a0522d;
  --m0: #6b655c;
  --concepto: #c9bfae;
  --concepto-borde: #8f846f;
  --marca-pasaje: #f6e7c8;
  --marca-palabra: #f2d58f;
  --enlace-grafo: #bfb6a6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #171614;
    --superficie: #201e1b;
    --tinta: #ece7de;
    --tenue: #a39b8e;
    --linea: #36322c;
    --acento: #e0925f;
    --m1: #6fb3d2;
    --m2: #e0925f;
    --m0: #a39b8e;
    --concepto: #4a443b;
    --concepto-borde: #8f846f;
    --marca-pasaje: #3a3122;
    --marca-palabra: #6b5420;
    --enlace-grafo: #4a453d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #171614; --superficie: #201e1b; --tinta: #ece7de; --tenue: #a39b8e; --linea: #36322c;
  --acento: #e0925f; --m1: #6fb3d2; --m2: #e0925f; --m0: #a39b8e; --concepto: #4a443b;
  --concepto-borde: #8f846f; --marca-pasaje: #3a3122; --marca-palabra: #6b5420; --enlace-grafo: #4a453d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font: 17px/1.6 Georgia, "Iowan Old Style", "Times New Roman", serif;
}
a { color: var(--acento); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sans, .cabecera, .herramientas, .leyenda, .ficha, .chips, .pasajes h3, .volver { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.cabecera {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--linea); background: var(--superficie);
}
.marca { font-weight: 700; font-size: 1.05rem; color: var(--tinta); text-decoration: none; }
.marca span { font-weight: 400; color: var(--tenue); }
.cabecera nav { display: flex; gap: 18px; font-size: .95rem; }
.cabecera nav a { text-decoration: none; }

.marco { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .marco { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); height: calc(100vh - 55px); }
  .panel-grafo, .panel-lector { height: 100%; overflow: auto; }
  .panel-grafo { border-right: 1px solid var(--linea); display: flex; flex-direction: column; }
  #grafo { flex: 1; min-height: 0; }
}

.panel-grafo { background: var(--superficie); }
.herramientas { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 12px 16px 6px; font-size: .85rem; }
.buscar input {
  width: 16rem; max-width: 100%; padding: 7px 10px; border: 1px solid var(--linea); border-radius: 6px;
  background: var(--fondo); color: var(--tinta); font: inherit;
}
.capas { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--tenue); }
.capas label { display: flex; gap: 5px; align-items: center; cursor: pointer; }
#grafo { display: block; width: 100%; height: 62vh; min-height: 360px; touch-action: none; }
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 6px 16px 12px; font-size: .78rem; color: var(--tenue); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.leyenda .m1 { background: var(--m1); } .leyenda .m2 { background: var(--m2); } .leyenda .m0 { background: var(--m0); }
.leyenda .mc { background: var(--concepto); border: 1px solid var(--concepto-borde); }

#grafo .enlace { stroke: var(--enlace-grafo); stroke-opacity: .55; }
#grafo .enlace.cita { stroke: var(--tenue); stroke-dasharray: 3 3; }
#grafo .enlace.vecino { stroke-opacity: .35; }
#grafo .nodo circle { stroke: var(--superficie); stroke-width: 1.5px; cursor: pointer; }
#grafo .nodo.concepto circle { fill: var(--concepto); stroke: var(--concepto-borde); stroke-width: 1px; }
#grafo .nodo.m0 circle { fill: var(--m0); } #grafo .nodo.m1 circle { fill: var(--m1); } #grafo .nodo.m2 circle { fill: var(--m2); }
#grafo .nodo text {
  font: 11px system-ui, sans-serif; fill: var(--tinta); pointer-events: none;
  paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; stroke-linejoin: round;
}
#grafo .nodo.trabajo text { font-weight: 700; font-size: 12px; }
/* Los conceptos con pocos pasajes muestran su nombre al pasar el mouse o al quedar cerca del elegido. */
#grafo .nodo.menor text { display: none; }
#grafo .nodo.menor:hover text, #grafo .nodo.menor:focus text, #grafo.foco .nodo.cerca text { display: block; }
#grafo.foco .nodo, #grafo.foco .enlace { opacity: .12; transition: opacity .2s; }
#grafo.foco .nodo.cerca, #grafo.foco .enlace.cerca { opacity: 1; }
#grafo .nodo.elegido circle { stroke: var(--acento); stroke-width: 3px; }

.panel-lector { padding: 24px 16px 64px; outline: none; }
.panel-lector > * { max-width: 40rem; margin-left: auto; margin-right: auto; }
.panel-lector h1 { font-size: 1.7rem; line-height: 1.25; margin: .2em auto .4em; }
.panel-lector h2 { font-size: 1.2rem; margin: 1.8em auto .5em; }
.panel-lector h3 { font-size: 1.05rem; margin: 1.6em auto .4em; }
.ficha { font-size: .85rem; color: var(--tenue); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; background: var(--superficie); }
.ficha p { margin: .2em 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; font-size: .82rem; }
.chips a { display: inline-block; padding: 2px 9px; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; background: var(--superficie); }
.chips small { color: var(--tenue); }
.definicion { margin: 1.2em auto; padding: .2em 0 .2em 1em; border-left: 3px solid var(--acento); font-size: 1.05rem; }
.definicion footer { font-size: .9rem; margin-top: .4em; }
.pasajes h3 { font-size: .95rem; }
.pasajes ol { padding-left: 1.2em; }
.pasajes li { margin: .5em 0; font-size: .95rem; }
.pasajes li a { text-decoration: none; color: inherit; }
.pasajes li a:hover { text-decoration: underline; }
mark { background: var(--marca-palabra); color: inherit; padding: 0 1px; border-radius: 2px; }
.indice-trabajos { list-style: none; padding: 0; }
.indice-trabajos li { margin: .5em 0; }
.indice-trabajos small { color: var(--tenue); font-family: system-ui, sans-serif; }
.columnas { columns: 2 12rem; column-gap: 2rem; padding-left: 0; list-style: none; font-size: .95rem; }
.columnas li { break-inside: avoid; margin: .15em 0; }

.texto p, .texto li { hyphens: auto; }
/* Las URL de las referencias son largas y sin espacios: se cortan donde haga falta. */
.texto a, .ficha a, .indice-trabajos a { overflow-wrap: anywhere; }
.texto [id^="p"] { scroll-margin-top: 80px; border-radius: 4px; transition: background .4s; }
.texto .con-concepto { background: var(--marca-pasaje); box-shadow: -8px 0 0 var(--marca-pasaje); }
.texto .destino { background: var(--marca-pasaje); box-shadow: -8px 0 0 var(--acento); }
.texto .subtitulo { font-weight: 700; margin-top: 1.6em; }
.texto .nota { font-size: .88rem; color: var(--tenue); }
.texto table { border-collapse: collapse; width: 100%; font-size: .8rem; font-family: system-ui, sans-serif; display: block; overflow-x: auto; }
.texto th, .texto td { border: 1px solid var(--linea); padding: 6px 8px; vertical-align: top; text-align: left; }
.recorrer { position: sticky; top: 0; z-index: 2; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 1em; background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; font-size: .85rem; }
.recorrer button { font: inherit; padding: 3px 10px; border: 1px solid var(--linea); border-radius: 6px; background: var(--fondo); color: var(--tinta); cursor: pointer; }
.volver { font-size: .85rem; }
.aviso { padding: 16px; }