/* Mapa de autores — Constelación nocturna del tango.
   Editorial atmosphere: 1940s Buenos Aires archive, brass on aged-paper black.
   Performance-conscious: minimal backdrop-filters, no mix-blend, no infinite loops. */

:root {
  /* Period palette — tonal sepia, slightly warmer */
  --p-origen:        #3e2218;
  --p-guardia-nueva: #6a4030;
  --p-edad-de-oro:   #b58862;
  --p-tardio:        #c69771;
  --p-vanguardia:    #8d3d2c;
  --p-contemporaneo: #8a7d74;
  /* Neutral "no data" swatch — desaturated, reads as unknown vs the gold edad-de-oro */
  --p-desconocido:   #5a5048;

  /* Role palette */
  --r-compositor:     #c69771;
  --r-letrista:       #e7dfd5;
  --r-cantor:         #8d3d2c;
  --r-orquesta:       #a87a55;
  --r-instrumentista: #6a4030;
  --r-otros:          #8a7d74;

  /* Community palette — one slot per Louvain community id (0 = biggest galaxy).
     Muted archival tones tuned in OKLCH (L 0.52–0.67, C ≥ 0.10) and validated
     against the night surface (#07050a): every color ≥ 3:1 contrast, adjacent
     pairs CVD-separated (worst ΔE 19.4). Communities beyond the 10 slots and
     isolated nodes (-1) share the neutral --c-none (same tone as
     --p-desconocido: "no galaxy" reads as no-data, not as an 11th color). */
  --c-0:    #bb8736; /* brass gold */
  --c-1:    #5382be; /* dusty blue */
  --c-2:    #b15c3d; /* terracotta */
  --c-3:    #5ea76f; /* sage */
  --c-4:    #c77596; /* dusty rose */
  --c-5:    #806eb3; /* muted violet */
  --c-6:    #93953e; /* olive */
  --c-7:    #0e9a94; /* teal */
  --c-8:    #a14b46; /* oxblood */
  --c-9:    #b37bb6; /* mauve */
  --c-none: #5a5048;

  /* Scene-specific palette */
  --night:    #07050a;
  --cordovan: #0e0809;
  --oxblood:  #1a0c0c;
  --brass:    #c9974a;
  --brass-2:  #d4a07a;
  --brass-3:  #8b5a2b;
}

/* Body opens up: the graph claims the entire viewport below the sticky header. */
body.page-graph { overflow: hidden; }
body.page-graph .site-main { padding-bottom: 0; }
body.page-graph .site-backdrop { display: none; }
body.page-graph .site-footer { display: none; }
body.page-graph .content-ad-slot { display: none; }

/* Reset the global `button` rule from site.css (min-height: 3rem ≈ 63px,
   padding: 0 1.2rem) so each graph button sizes to its own width/height. */
.graph-scene button { min-height: 0; padding: 0; }

/* ── Scene shell ──────────────────────────────────────────────────── */

.graph-scene {
  position: relative;
  height: calc(100dvh - var(--header-h, 4.2rem));
  min-height: 480px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, #1a0e12 0%, var(--cordovan) 42%, var(--night) 92%);
}

/* Single soft vignette over everything */
.graph-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 44%, transparent 42%, rgba(0,0,0,0.55) 100%);
  z-index: 2;
}

/* ── Decorative background: compass rings ─────────────────────────── */

.graph-compass {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
}

/* The cytoscape canvas itself */
#graph-canvas {
  position: absolute; inset: 0;
  z-index: 2;
}

/* ── Editorial titlebar (top center) ──────────────────────────────── */

.graph-titlebar {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  pointer-events: none;
  text-align: center;
}
.graph-titlebar-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--brass-2);
  opacity: 0.78;
}
.graph-titlebar-eyebrow .dash {
  display: inline-block;
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-2) 50%, transparent);
  opacity: 0.7;
}
.graph-counts {
  position: static; transform: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  text-transform: none;
}

/* ── Floating chrome panels ───────────────────────────────────────── */

.graph-chrome {
  position: absolute; z-index: 5; pointer-events: none;
}
.graph-chrome > * { pointer-events: auto; }

.graph-chrome.tl { top: 28px; left: 28px; width: 260px; }
.graph-chrome.tr { top: 28px; right: 28px; transition: right 460ms cubic-bezier(0.16, 1, 0.3, 1); }
/* Keep the zoom (+/−) controls reachable while the detail panel is open — slide
   them to the left edge of the 400px panel instead of letting it cover them.
   Below 720px the whole graph chrome is hidden (mobile fallback), so the panel is
   always its fixed 400px width when this offset applies. */
.graph-scene:has(#graph-panel.open) .graph-chrome.tr { right: 428px; }
.graph-chrome.bl { bottom: 28px; left: 28px; }
.graph-chrome.br { bottom: 28px; right: 28px; }

/* Zoom buttons — compact stacked +/− card matching the modecard vocabulary */
.graph-zoom {
  display: flex; flex-direction: column;
  background: rgba(10,6,8,0.82);
  border: 1px solid rgba(213,160,122,0.18);
  border-radius: 2px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.42);
  overflow: hidden;
}
.graph-zoom button {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; outline: 0; cursor: pointer;
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1;
  color: var(--brass-2);
  transition: color 180ms ease, background-color 180ms ease;
}
.graph-zoom button + button {
  border-top: 1px solid rgba(213,160,122,0.16);
}
.graph-zoom button:hover { color: var(--brass); background: rgba(213,160,122,0.06); }
.graph-zoom button:active { background: rgba(213,160,122,0.12); }
.graph-zoom button:focus-visible {
  background: rgba(213,160,122,0.08);
  color: var(--brass);
}

/* Search — full override of site.css input defaults */
.graph-search-box {
  position: relative;
  border-bottom: 1px solid rgba(213,160,122,0.32);
  background: transparent;
  transition: border-color 220ms ease;
}
.graph-search-box::before {
  /* Decorative leading dash */
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleX(0.64);
  transform-origin: left center;
  width: 22px; height: 1px;
  background: var(--brass-2);
  opacity: 0.55;
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1), opacity 220ms;
}
.graph-search-box:focus-within { border-bottom-color: var(--brass); }
.graph-search-box:focus-within::before {
  transform: translateY(-50%) scaleX(1);
  opacity: 1;
  background: var(--brass);
}
.graph-search-box input[type="text"] {
  /* Hard reset against site.css globals */
  width: 100%;
  min-height: 0;
  height: auto;
  padding: 9px 4px 10px 28px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-main);
  letter-spacing: 0.01em;
  appearance: none;
  -webkit-appearance: none;
  transition: none;
}
.graph-search-box input[type="text"]::placeholder {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.62;
  letter-spacing: 0.01em;
}
.graph-search-box input[type="text"]:focus {
  /* Override site.css :focus */
  border: 0;
  box-shadow: none;
  outline: 0;
}

#graph-autocomplete {
  margin-top: 6px;
  max-height: 380px; overflow-y: auto;
  background: rgba(10,6,8,0.96);
  border: 1px solid rgba(213,160,122,0.18);
  border-radius: 2px;
  display: none;
  box-shadow: 0 18px 42px rgba(0,0,0,0.55);
}
#graph-autocomplete.open { display: block; }
.graph-ac-item {
  position: relative;
  padding: 11px 16px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(213,160,122,0.08);
  cursor: pointer;
  transition: background-color 140ms ease;
}
.graph-ac-item::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 14px; height: 1px; background: var(--brass);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.16,1,0.3,1);
}
.graph-ac-item:last-child { border-bottom: 0; }
.graph-ac-item:hover, .graph-ac-item.focused {
  background: rgba(213,160,122,0.05);
}
.graph-ac-item:hover::before, .graph-ac-item.focused::before { transform: translateY(-50%) scaleX(1); }
.graph-ac-item .ac-name {
  font-family: "Bodoni Moda", serif; font-style: italic;
  color: var(--text-main); font-size: 14px; line-height: 1.2;
  padding-left: 18px;
}
.graph-ac-item .ac-meta {
  font-family: var(--font-ui);
  font-size: 8.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass-2);
  opacity: 0.7;
}

/* Mode card — tabs on top, legend list below, unified card */
.graph-modecard {
  background: rgba(10,6,8,0.82);
  border: 1px solid rgba(213,160,122,0.18);
  border-radius: 2px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.42);
  min-width: 220px;
  position: relative;
  overflow: hidden;
}
.graph-modecard::before {
  content: "✦";
  position: absolute; top: 8px; right: 10px;
  font-size: 8px; color: var(--brass-2); opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}

/* Tabs row (top of the card) */
.graph-modecard .graph-toggle {
  display: flex; gap: 0;
  background: transparent;
  border: 0;
  padding: 0;
  border-bottom: 1px solid rgba(213,160,122,0.16);
}
.graph-modecard .graph-toggle button {
  position: relative;
  flex: 1;
  background: transparent; border: 0; outline: 0; cursor: pointer;
  /* Sized for three tabs on one line (por época | por rol | por comunidad):
     tighter tracking + padding than the original two-tab row, nowrap so the
     longest label widens the card instead of wrapping to two lines. */
  padding: 12px 10px 13px;
  font-family: var(--font-ui); font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  transition: color 220ms ease, background-color 220ms ease;
}
.graph-modecard .graph-toggle button::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 1px; background: var(--brass);
  transform: scaleX(0);
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1);
}
/* Defensive: site.css's global button rule sets a display value, which beats
   the UA [hidden] style. graph.js hides the "por comunidad" tab via `hidden`
   when the payload predates the community field — honor it. */
.graph-modecard .graph-toggle button[hidden] { display: none; }
.graph-modecard .graph-toggle button:hover { color: var(--text-soft); }
.graph-modecard .graph-toggle button.active {
  color: var(--brass-2);
  background: rgba(213,160,122,0.04);
}
.graph-modecard .graph-toggle button.active::after { transform: scaleX(1); }

/* Density picker (bottom of the card, mirrors the mode tabs above the legend) */
.graph-modecard .graph-toggle-density {
  border-bottom: 0;
  border-top: 1px solid rgba(213,160,122,0.16);
}
.graph-modecard .graph-toggle-density button {
  padding: 10px 8px 11px;
  font-size: 8.5px;
  letter-spacing: 0.22em;
}
.graph-modecard .graph-toggle-density button.active::after {
  bottom: auto; top: -1px;
}

/* Legend list (bottom of the card) */
.graph-modecard .graph-legend {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 13px 18px 14px;
  box-shadow: none;
  min-width: 0;
  position: relative;
}
/* The toggle now indicates the mode — title becomes redundant */
.graph-modecard .graph-legend .graph-legend-title { display: none; }

.graph-legend-row {
  display: flex; align-items: center; gap: 11px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 12.5px;
  padding: 3px 0;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
  transition: color 180ms ease, opacity 180ms ease;
  outline: none;
}
.graph-legend-row:hover { color: var(--brass-2); }
.graph-legend-row:focus-visible { color: var(--brass-2); }
.graph-legend-row.disabled {
  color: var(--text-muted);
  opacity: 0.42;
  text-decoration: line-through;
  text-decoration-color: rgba(213,160,122,0.35);
  text-decoration-thickness: 1px;
}
.graph-legend-bulk {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 0 1px;
  color: var(--text-muted);
}
.graph-legend-bulk button {
  background: none; border: 0; padding: 2px 0;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}
.graph-legend-bulk button:hover,
.graph-legend-bulk button:focus-visible { color: var(--brass-2); }

.graph-legend-swatch {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(213,160,122,0.30);
  transition: background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.graph-legend-row.disabled .graph-legend-swatch {
  background: transparent !important;
  box-shadow: 0 0 0 1px rgba(213,160,122,0.22) inset;
}

/* Tooltip */
#graph-tooltip {
  position: absolute; z-index: 6;
  background: rgba(10,6,8,0.96);
  border: 1px solid rgba(213,160,122,0.20);
  border-radius: 2px;
  padding: 9px 13px 10px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.55);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity 140ms ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
#graph-tooltip.visible { opacity: 1; }
#graph-tooltip .tt-avatar {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(213,160,122,0.10);
  box-shadow: 0 0 0 1px rgba(213,160,122,0.30);
}
#graph-tooltip .tt-avatar.empty { display: none; }
#graph-tooltip .tt-name {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 14px; color: var(--text-main); line-height: 1.05;
}
#graph-tooltip .tt-meta {
  font-family: var(--font-ui); font-size: 8.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-2);
  margin-top: 4px;
  opacity: 0.78;
}

/* ── Side panel ───────────────────────────────────────────────────── */

#graph-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
  width: 400px; max-width: 92vw;
  background: rgba(10,7,8,0.97);
  border-left: 1px solid rgba(213,160,122,0.18);
  transform: translateX(105%);
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column;
  box-shadow: -28px 0 64px rgba(0,0,0,0.55);
}
#graph-panel::before {
  content: ""; position: absolute; top: 14px; left: 14px; bottom: 14px; right: 14px;
  border: 1px solid rgba(213,160,122,0.08);
  pointer-events: none;
}
#graph-panel.open { transform: translateX(0); }

.graph-panel-close {
  position: absolute; top: 24px; right: 24px;
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(213,160,122,0.22);
  color: var(--brass-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: "Bodoni Moda", serif; font-size: 18px; line-height: 0;
  transition: background-color 200ms, border-color 200ms, color 200ms;
  z-index: 2;
}
.graph-panel-close:hover {
  background: rgba(213,160,122,0.10);
  border-color: var(--brass);
  color: var(--brass);
}

.graph-panel-scroll {
  overflow-y: auto; padding: 44px 36px 48px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(213,160,122,0.25) transparent;
}
.graph-panel-scroll::-webkit-scrollbar { width: 6px; }
.graph-panel-scroll::-webkit-scrollbar-thumb {
  background: rgba(213,160,122,0.25); border-radius: 3px;
}

.graph-panel-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 9px; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
  opacity: 0.95;
}
.graph-panel-eyebrow::before {
  content: ""; display: inline-block;
  width: 18px; height: 1px;
  background: var(--brass);
  opacity: 0.7;
}

.graph-panel-name {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--text-main);
  margin: 0 0 6px;
  text-wrap: balance;
}
.graph-panel-alias {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  opacity: 0.85;
}

.graph-panel-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid rgba(213,160,122,0.30);
  outline: 3px solid rgba(213,160,122,0.06);
  outline-offset: 3px;
  object-fit: cover;
  margin-bottom: 22px;
  filter: saturate(0.88) contrast(1.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}
.graph-panel-avatar-fallback {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, #1a0e0e, #0d0708);
  border: 1px solid rgba(213,160,122,0.30);
  outline: 3px solid rgba(213,160,122,0.06);
  outline-offset: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 34px; color: var(--brass-2);
  margin-bottom: 22px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}

.graph-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.graph-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(213,160,122,0.06);
  color: var(--text-soft);
  border: 1px solid rgba(213,160,122,0.14);
}
.graph-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
}

.graph-panel-bio {
  font-family: var(--font-reading);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-soft);
  margin: 22px 0 26px;
  text-wrap: pretty;
}
.graph-panel-bio::first-letter {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 2.4em;
  line-height: 0.95;
  float: left;
  margin: 0.04em 0.08em 0 0;
  color: var(--brass-2);
}

.graph-section-title {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 9px; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--brass);
  margin: 28px 0 12px;
  opacity: 0.95;
}
.graph-section-title::before {
  content: ""; display: inline-block;
  width: 14px; height: 1px;
  background: var(--brass);
  opacity: 0.7;
}

.graph-works-list { display: flex; flex-direction: column; gap: 0; }
.graph-work-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 14px;
  padding: 3px 12px; margin: 0 -12px;
  border-radius: 2px;
  transition: background-color 160ms;
}
.graph-work-row:hover { background: rgba(213,160,122,0.05); }
.graph-work-spotify {
  width: 22px; height: 22px; min-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #1db954;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 220ms, transform 220ms;
}
.graph-work-spotify:hover {
  color: #1ed760;
  transform: scale(1.12);
}
.graph-work-title {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 15px; line-height: 1.2;
  color: var(--text-main);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 180ms;
}
.graph-work-title:hover { color: var(--brass-2); }
.graph-work-roles {
  font-family: var(--font-ui);
  font-size: 8.5px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}

.graph-neighbor-list { display: flex; flex-direction: column; gap: 1px; }
.graph-neighbor {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 12px; margin: 0 -12px;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 160ms;
}
.graph-neighbor:hover { background: rgba(213,160,122,0.05); }
.graph-neighbor-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.graph-neighbor-name {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 15px; color: var(--text-main);
}

.graph-panel-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px;
  padding: 11px 22px;
  background: transparent;
  border: 1px solid var(--brass);
  border-radius: 999px;
  color: var(--brass-2);
  text-decoration: none;
  font-family: var(--font-ui); font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  transition: background-color 240ms, color 240ms;
}
.graph-panel-cta:hover {
  background: var(--brass);
  color: var(--cordovan);
}

.graph-panel-meta {
  font-family: var(--font-ui);
  font-size: 9.5px; color: var(--text-muted);
  margin: 16px 0 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ── Edge relation labels (focused state) ─────────────────────────── */

/*
 * Galaxy name captions (one per palette community, at its centroid): the
 * initial-view wayfinding — the map reads as named constellations before any
 * interaction. Serif italic like the node names; quiet, clickable.
 */
.graph-galaxy-label {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(231, 223, 213, 0.62);
  text-shadow: 0 1px 10px rgba(7, 5, 10, 0.9);
  cursor: pointer;
  user-select: none;
  transition: color 160ms ease-out, opacity 400ms ease;
}
.graph-galaxy-label:hover { color: var(--brass-2, #d5a07a); }
/* Zoomed past the wayfinding range: captions would sit on the avatars and
   (being the only interactive CSS2D elements) swallow wheel-zoom — fade out
   and stop catching the pointer. Toggled per-frame from graph.js. */
.graph-galaxy-label.faded { opacity: 0; pointer-events: none !important; }

.graph-edge-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(213, 160, 122, 0.75);
  background: rgba(7, 5, 10, 0.72);
  padding: 2px 6px;
  border-radius: 2px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 140ms cubic-bezier(0.16, 1, 0.3, 1);
}
.graph-edge-label::before {
  content: "";
  width: 9px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.68;
}
.graph-edge-label.is-visible { opacity: 1; }

/* ── Focus hint ───────────────────────────────────────────────────── */

.graph-focus-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--brass-2);
  background: rgba(10,6,8,0.85);
  border: 1px solid rgba(213,160,122,0.20);
  border-radius: 999px;
  padding: 9px 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.42);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms ease;
}
.graph-focus-hint.visible { opacity: 1; }
.graph-focus-hint .hint-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass);
}

/* ── Onboarding pill (first-visit hint, QW5) ──────────────────────── */

.graph-onboard-pill {
  position: absolute; bottom: 72px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 5;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-2);
  background: rgba(10,6,8,0.9);
  border: 1px solid rgba(213,160,122,0.30);
  border-radius: 999px;
  padding: 10px 20px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.48);
  opacity: 0; pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease;
}
.graph-onboard-pill.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.graph-onboard-pill .onboard-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 0 rgba(213,160,122,0.55);
  animation: graph-onboard-ping 1.8s ease-out infinite;
}
@keyframes graph-onboard-ping {
  0%   { box-shadow: 0 0 0 0 rgba(213,160,122,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(213,160,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(213,160,122,0); }
}

/* ── Loading splash ───────────────────────────────────────────────── */

.graph-loading {
  position: absolute; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 50%, var(--oxblood) 0%, var(--cordovan) 50%, var(--night) 100%);
  transition: opacity 600ms ease;
}
.graph-loading.fading { opacity: 0; pointer-events: none; }
.graph-loading-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  text-align: center;
}
.graph-loading-glyph {
  font-family: "Bodoni Moda", serif;
  font-size: 26px;
  color: var(--brass);
  opacity: 0.7;
}
.graph-loading-pulse {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 30px;
  color: var(--text-main);
  letter-spacing: 0.02em;
  line-height: 1;
  animation: graph-pulse 1.8s ease-in-out infinite;
}
@keyframes graph-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1.0; }
}
.graph-loading-sub {
  font-family: var(--font-ui); font-weight: 500;
  font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--brass-2);
  opacity: 0.6;
}

/* ── Pathfinder "Los seis grados del tango" (F8) ──────────────────── */

.graph-pathfinder-chrome {
  position: absolute; z-index: 6;
  bottom: 28px; right: 28px;
  width: 320px; max-width: calc(100vw - 56px);
  transition: right 460ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Slide clear of the 400px detail panel when it opens (mirrors .graph-chrome.tr). */
.graph-scene:has(#graph-panel.open) .graph-pathfinder-chrome { right: 428px; }

/* THE fix for "COPIAR LINK looks different": `.graph-scene button { padding: 0;
   min-height: 0 }` (specificity 0,1,1) — the reset that lets the zoom/legend
   buttons self-size — also outranks each single-class pathfinder-button rule
   (0,1,0), ZEROING the padding on the <button> controls (COPIAR LINK, TRAZAR,
   LIMPIAR). That rendered them ~12px shorter / tighter than the sibling <a>
   share links, which reads as a bolder, brighter pill even though the
   border-color is byte-identical. Re-assert each button's intended padding at
   (0,2,0) so the <button>s match the <a> anchors exactly. */
.graph-pathfinder-chrome .pf-share-btn { padding: 6px 11px; }
.graph-pathfinder-chrome .pf-go,
.graph-pathfinder-chrome .pf-clear { padding: 10px 14px; }

.pf-card {
  background: rgba(10,6,8,0.9);
  border: 1px solid rgba(213,160,122,0.2);
  border-radius: 2px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.5);
  overflow: hidden;
}
.pf-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(213,160,122,0.16);
}
.pf-kicker {
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-2);
}
.pf-collapse {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(213,160,122,0.18); border-radius: 2px;
  color: var(--brass-2); cursor: pointer;
  font-family: "Bodoni Moda", serif; font-size: 18px; line-height: 1;
  transition: color 160ms ease, border-color 160ms ease;
}
.pf-collapse:hover { color: var(--brass); border-color: rgba(213,160,122,0.4); }
.graph-pathfinder-chrome.collapsed .pf-body { display: none; }

.pf-body { padding: 14px; }
.pf-intro {
  margin: 0 0 12px;
  font-family: var(--font-reading);
  font-size: 12.5px; line-height: 1.5; color: var(--text-soft);
}
.pf-field { margin-bottom: 10px; }
.pf-field > label {
  display: block; margin-bottom: 3px;
  font-family: var(--font-ui);
  font-size: 8.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass-2); opacity: 0.75;
}
.pf-input-wrap { position: relative; }
.pf-input-wrap input[type="text"] {
  width: 100%; min-height: 0; height: auto;
  padding: 8px 10px; margin: 0;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(213,160,122,0.22);
  border-radius: 2px; outline: 0; box-shadow: none;
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 15px; font-weight: 300; color: var(--text-main);
  appearance: none; -webkit-appearance: none; transition: border-color 180ms ease;
}
.pf-input-wrap input[type="text"]::placeholder { color: var(--text-muted); font-style: italic; opacity: 0.6; }
.pf-input-wrap input[type="text"]:focus { border-color: var(--brass); box-shadow: none; outline: 0; }

.pf-ac {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 8;
  max-height: 260px; overflow-y: auto;
  background: rgba(10,6,8,0.98);
  border: 1px solid rgba(213,160,122,0.2);
  border-radius: 2px; box-shadow: 0 18px 42px rgba(0,0,0,0.55);
  display: none;
}
.pf-ac.open { display: block; }
.pf-ac-item {
  padding: 9px 12px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid rgba(213,160,122,0.08);
  cursor: pointer; transition: background-color 140ms ease;
}
.pf-ac-item:last-child { border-bottom: 0; }
.pf-ac-item:hover, .pf-ac-item.focused { background: rgba(213,160,122,0.06); }
.pf-ac-name { font-family: "Bodoni Moda", serif; font-style: italic; color: var(--text-main); font-size: 13.5px; }
.pf-ac-meta {
  font-family: var(--font-ui); font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-2); opacity: 0.7; white-space: nowrap;
}

.pf-actions { display: flex; gap: 8px; margin-top: 4px; }
.pf-go {
  appearance: none; -webkit-appearance: none;
  flex: 1;
  padding: 10px 14px;
  background: rgba(201,151,74,0.16);
  border: 1px solid var(--brass); border-radius: 2px;
  color: var(--brass-2); cursor: pointer;
  font-family: var(--font-ui); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease;
}
.pf-go:hover { background: rgba(201,151,74,0.28); color: var(--text-main); }
.pf-clear {
  appearance: none; -webkit-appearance: none;
  padding: 10px 14px;
  background: transparent; border: 1px solid rgba(213,160,122,0.2); border-radius: 2px;
  color: var(--text-muted); cursor: pointer;
  font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: color 180ms ease, border-color 180ms ease;
}
.pf-clear:hover { color: var(--brass-2); border-color: rgba(213,160,122,0.4); }

/* Result: degrees headline + hop list + share row */
.pf-result:empty { display: none; }
.pf-result { margin-top: 14px; }
.pf-degrees {
  font-family: "Bodoni Moda", serif; font-style: italic; font-size: 14px;
  color: var(--text-soft); margin-bottom: 10px;
}
.pf-degrees strong { color: var(--brass-2); font-style: normal; font-size: 20px; font-weight: 400; }

.pf-hops { display: flex; flex-direction: column; }
.pf-hop { display: flex; align-items: center; gap: 10px; }
.pf-hop-avatar-wrap { flex: none; width: 34px; height: 34px; }
.pf-hop-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; border: 1px solid rgba(213,160,122,0.35);
  background: var(--oxblood);
}
.pf-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 15px; color: var(--brass-2);
}
.pf-hop-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-hop-name {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 14.5px; color: var(--text-main); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.pf-hop-name:hover { color: var(--brass-2); text-decoration: underline; }
.pf-hop-meta {
  font-family: var(--font-ui); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-2); opacity: 0.65;
}
/* Connector: a short vertical brass line aligned under the avatar column + label */
.pf-connector { display: flex; align-items: center; gap: 10px; height: 26px; }
.pf-connector-line {
  flex: none; width: 1px; height: 100%;
  margin-left: 17px;
  background: linear-gradient(180deg, rgba(213,160,122,0.15), var(--brass), rgba(213,160,122,0.15));
}
.pf-connector-label {
  font-family: var(--font-reading); font-style: italic;
  font-size: 11.5px; color: var(--text-muted);
}

.pf-share {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(213,160,122,0.14);
}
.pf-share-label {
  font-family: var(--font-ui); font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-2); opacity: 0.7;
}
.pf-share-btn {
  /* Strip native button chrome: the copy control is a <button>, and without
     this macOS Chrome draws its own appearance:button border/tint OVER the CSS
     border — making COPIAR LINK look brighter/heavier than the <a> siblings even
     though their computed border-color is identical. */
  appearance: none; -webkit-appearance: none;
  padding: 6px 11px;
  background: transparent; border: 1px solid rgba(213,160,122,0.24); border-radius: 999px;
  color: var(--brass-2); cursor: pointer; text-decoration: none;
  font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
/* The copy control is a <button>, the others are <a>. Two site.css globals only
   ever hit the <button>, never the <a> anchors, so only COPIAR LINK looked off:
   (1) after a mouse click the button keeps `:focus` (until you click elsewhere)
   and Chrome restores it on reload; (2) `button:focus-visible` also carries an
   accent fill + a loud off-palette outline. So the highlight must live ONLY on
   :hover (pointer over) and :focus-visible (keyboard) — NEVER on the persistent
   mouse `:focus`, which is why an earlier `:focus` rule kept the border lit. And
   `:focus` explicitly drops any outline the globals would add. */
/* Only :hover brightens the border/fill. Focus must NOT touch border/background:
   a mouse-clicked <button> keeps :focus (and the browser restores it on reload),
   and :focus-visible can't be told apart from a genuine keyboard Tab — so any
   border change on focus makes COPIAR LINK look permanently lit next to the <a>
   siblings. Keyboard users still get a subtle outline for a11y; the border stays
   identical to the anchors in every state but hover. */
.pf-share-btn:hover {
  color: var(--text-main); border-color: var(--brass);
  background: rgba(201,151,74,0.12); box-shadow: none;
}
.pf-share-btn:focus { outline: none; box-shadow: none; }
.pf-share-btn:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; box-shadow: none; }
.pf-share-btn.copied { color: var(--brass); border-color: var(--brass); background: transparent; }

.pf-empty { font-family: var(--font-reading); }
.pf-empty p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.pf-empty .pf-empty-sub { font-size: 11.5px; color: var(--text-muted); }

/* ── Mobile fallback ──────────────────────────────────────────────── */

.graph-mobile-fallback { display: none; }

@media (max-width: 720px) {
  /* The 3D canvas + its floating chrome stay desktop-only, but the pathfinder
     card must work on phones (F8) — keep it visible and let the page scroll. */
  .graph-scene > :not(.graph-mobile-fallback):not(.graph-pathfinder-chrome) { display: none; }
  body.page-graph { overflow: auto; }
  .graph-scene { height: auto; min-height: calc(100dvh - var(--header-h, 4.2rem)); overflow: visible; }
  .graph-scene::after { display: none; }

  .graph-pathfinder-chrome {
    position: static;
    width: 100%; max-width: 480px;
    margin: 24px auto 0;
    padding: 0 20px;
    transition: none;
  }
  .graph-pathfinder-chrome.collapsed .pf-body { display: block; } /* never collapse on phone */
  .pf-collapse { display: none; }
  .pf-input-wrap input[type="text"] { font-size: 16px; } /* ≥16px: no iOS zoom-on-focus */

  .graph-mobile-fallback {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 14px;
    padding: 28px 32px 60px;
    text-align: center;
  }
  .graph-mobile-fallback h2 {
    font-family: "Bodoni Moda", serif; font-style: italic;
    font-size: 28px; color: var(--text-main); margin: 0;
  }
  .graph-mobile-fallback p {
    font-family: var(--font-reading); font-size: 15px;
    color: var(--text-soft); max-width: 36ch; margin: 0;
  }
  .graph-mobile-fallback a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    border: 1px solid var(--brass); border-radius: 999px;
    color: var(--brass-2); text-decoration: none;
    font-family: var(--font-ui); font-size: 11px;
    letter-spacing: 0.22em; text-transform: uppercase;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .graph-edge-label { transition: none; }
  .graph-loading-pulse { animation: none !important; }
  .graph-onboard-pill {
    transform: translateX(-50%);
    transition: opacity 320ms ease;
  }
  .graph-onboard-pill.visible { transform: translateX(-50%); }
  .graph-onboard-pill .onboard-dot { animation: none !important; }
}