/* red.css — Lámina V: la celosía Tonnetz y la conducción de voces. */

.red {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 36px;
  align-items: center;
  margin-top: 16px;
}
@media (max-width: 860px) { .red { grid-template-columns: 1fr; gap: 24px; } }

.red__lattice { display: flex; justify-content: center; }
.lattice { width: 100%; max-width: 600px; height: auto; overflow: visible; }

.lat__tri {
  fill: transparent; stroke: var(--line); stroke-width: 1; stroke-linejoin: round;
  cursor: pointer; transition: fill var(--d-3) var(--ease);
}
.lat__tri:hover { fill: color-mix(in srgb, var(--live) 10%, transparent); }
.lat__tri.is-active { fill: color-mix(in srgb, var(--live) 30%, transparent); stroke: var(--live); stroke-width: 1.5; }
.lat__tri.is-p { fill: color-mix(in srgb, var(--flow) 14%, transparent); }
.lat__tri.is-l { fill: color-mix(in srgb, var(--bright-1) 14%, transparent); }
.lat__tri.is-r { fill: color-mix(in srgb, var(--fn-s) 16%, transparent); }
.lat__move { font-family: var(--font-mono); font-size: 13px; fill: var(--ink-dim); pointer-events: none; }
.lat__vx { fill: var(--pc, var(--ink)); stroke: var(--paper); stroke-width: 1.5; pointer-events: none; }
.lat__vx.is-tonic { stroke: var(--live); stroke-width: 2.5; }
.lat__vxname { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-dim); pointer-events: none; }
/* En móvil la red se pinta a ~0,55×: letra en unidades del SVG para que salga a ~10 px reales. */
@media (max-width: 640px) { .lat__vxname, .lat__move { font-size: 19px; } }

.red__side { display: flex; flex-direction: column; gap: 18px; }
.red__legend p { margin: 0 0 6px; font-size: var(--t--1); }
.red__legend b { color: var(--ink); }
.red__vl { min-height: 48px; }
.red__vlline { margin: 0; font-size: var(--t--1); }
.red__badge {
  display: inline-block; background: var(--live); color: var(--paper);
  border-radius: var(--radius); padding: 1px 8px; font-size: var(--t--2); margin-left: 6px;
}
.red__path { min-height: 30px; }
.red__pathctl { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.red__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.red__chip { background: var(--paper-sunk); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 9px; font-size: var(--t--1); }
.red__sep { color: var(--line); }