/* Tema por categoría — consume variables de categories.css */

[data-topic-category] {
  --topic-wash: color-mix(in srgb, var(--topic-accent) 12%, transparent);
}

/* Leyenda categorías */
.legend-category-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: var(--topic-accent);
  border: 1px solid var(--rule-strong);
}

/* Chips de conexión */
.connection-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg-sheet);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--topic-accent, var(--rule-strong));
  transition:
    border-color var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}

.connection-chip:hover {
  background: var(--topic-wash, var(--bg-paper));
  border-color: var(--rule-strong);
  color: var(--ink);
}

.connection-code {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--topic-accent, var(--ink-muted));
  padding: 2px 6px;
  border: 1px solid var(--rule);
  background: var(--bg-paper);
}

/* Hero tema con acento */
.topic-page[data-topic-category] .topic-hero {
  border-left: 4px solid var(--topic-accent);
  background: linear-gradient(
    90deg,
    var(--topic-wash) 0%,
    transparent 48%
  );
}

.topic-page[data-topic-category] .topic-index-display {
  color: var(--topic-accent);
}

/* Panel drawer acento */
.panel-drawer[data-topic-category] {
  border-left-color: var(--topic-accent);
}

.panel-drawer[data-topic-category] .panel-index {
  color: color-mix(in srgb, var(--topic-accent) 35%, var(--rule));
}

/* Índice sidebar */
.index-item[data-topic-category]::before {
  content: "";
  display: block;
  width: 3px;
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  border-radius: 1px;
  background: var(--topic-accent);
  opacity: 0.35;
  transition: opacity var(--motion-fast) var(--ease-out);
}

.index-item[data-topic-category].is-active::before,
.index-item[data-topic-category]:hover::before {
  opacity: 1;
}