/* Esquemas SVG */
.diagram { padding: 16px; margin: 16px 0; max-width: var(--measure); }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .dg-svg { max-width: 460px; margin: 0 auto; }
.diagram figcaption { font: 500 .85rem/1.5 var(--font-body); color: var(--muted); margin-top: 10px; }
.diagram .legend { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); font-size: .95rem; max-width: none; }
.diagram .legend li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.diagram .legend b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--line-ink); font: 600 .78rem var(--font-mono); }
.dg-ink { stroke: var(--ink); fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dg-fill { fill: var(--surface-2); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.dg-line { stroke: var(--line); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dg-hot { stroke: var(--signal); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dg-thin { stroke: var(--grid-strong); fill: none; stroke-width: 1.5; }
.dg-mark circle { fill: var(--line); }
.dg-mark text { fill: var(--line-ink); font: 600 12px var(--font-mono); text-anchor: middle; dominant-baseline: central; }
.dg-text { fill: var(--ink); font: 600 11px var(--font-mono); text-anchor: middle; }
.dg-flame { fill: var(--signal-fill); stroke: var(--signal); stroke-width: 1.5; }
.dg-arrow { fill: var(--line); stroke: none; }
.dg-arrow-hot { fill: var(--signal); stroke: none; }

/* Ciclo de 4 tiempos */
.cycle-top { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 760px) { .cycle-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.stage-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.stage { border: 1px solid var(--panel-border); border-radius: var(--r-md); padding: 6px; background: var(--paper); text-align: center; transition: opacity .2s, border-color .2s; }
.stage svg { max-width: 150px; margin: 0 auto; }
.stage .st-name { font: var(--h-weight) 1rem var(--font-display); text-transform: var(--label-case); letter-spacing: var(--h-track); margin: 2px 0 0; }
.stage .st-deg { font: 500 .72rem var(--font-mono); color: var(--muted); }
.cycle-wheel svg { max-width: 300px; margin: 0 auto; }
.sector { transition: opacity .2s; }
.phase-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cycle.dim .stage:not(.hl), .cycle.dim .sector:not(.hl) { opacity: .25; }
.cycle .stage.hl { border-color: var(--line); border-width: 2px; padding: 5px; }
.dg-wheel-text { fill: var(--ink); font: 600 11px var(--font-mono); text-anchor: middle; }