/* =====================================================================
   SpaceView 2.7 · tanda 12 — tutoriales visuales (figuras, ejercicios, progreso).
   ===================================================================== */
.tut-sheet { width: min(760px, 96vw); }
.tut-bar { height: 6px; border-radius: 99px; background: var(--raise); overflow: hidden; margin: 4px 0 2px; box-shadow: inset 0 0 0 1px var(--line2); }
.tut-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width .4s var(--ease-out, ease); }
.tut-cat .tut-bar { margin-top: 6px; }
.tut-cat.all { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); }
.tut-cat.all svg { color: var(--up); }
.tut-badge { color: var(--up); font-weight: 600; margin: 6px 0; }
.tut-body .sec-title { margin-top: 10px; }
.tut-ex { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--raise); }
.tut-ex p { margin: 0; }
.tut-ex .up { color: var(--up); } .tut-ex .dn { color: var(--down); }
.tut-opt { text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); line-height: 1.35; }
.tut-opt:hover { border-color: var(--accent); }
.tut-opt.ok { border-color: var(--up); background: color-mix(in srgb, var(--up) 12%, var(--panel)); }
.tut-opt.bad { border-color: var(--down); background: color-mix(in srgb, var(--down) 10%, var(--panel)); }
/* figuras */
.tfig { margin: 6px 0 10px; padding: 10px 10px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.tfig figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.tfig-tag { display: inline-block; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--raise); color: var(--muted); }
.tfig.live .tfig-tag { color: var(--up); background: color-mix(in srgb, var(--up) 12%, transparent); }
.tfig-svg { display: block; max-height: 300px; }
.tfig-svg text { font-family: var(--font); fill: var(--fg); }
.tfig-svg .lbl { font-size: 13px; } .tfig-svg .cap { font-size: 11.5px; fill: var(--muted); }
.tfig-svg .tag { font: 600 11px var(--mono); } .tfig-svg .axis { font: 10px var(--mono); fill: var(--faint); }
.tfig-svg .mono { font: 11.5px var(--mono); }
.tfig-svg .cap.up, .tfig-svg .tag.up { fill: var(--up); } .tfig-svg .cap.dn { fill: var(--down); }
.tfig-svg .tag.acc { fill: var(--accent); } .tfig-svg .tag.warn { fill: var(--warn); }
.tfig-svg .up .body { fill: var(--up); } .tfig-svg .dn .body { fill: var(--down); }
.tfig-svg .up .wick { stroke: var(--up); } .tfig-svg .dn .wick { stroke: var(--down); }
.tfig-svg .wick { stroke-width: 1.2; }
.tfig-svg .ln, .tfig-svg .lead { stroke: var(--muted); stroke-width: 1; fill: none; }
.tfig-svg .lead { stroke-dasharray: 3 3; }
.tfig-svg .grid { stroke: var(--line2); stroke-width: 1; }
.tfig-svg .sep { stroke: var(--line); }
.tfig-svg .lvl { stroke: var(--muted); stroke-dasharray: 4 4; } .tfig-svg .lvl.strong { stroke: var(--fg); stroke-dasharray: none; stroke-width: 1.4; }
.tfig-svg .path { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tfig-svg .path.acc { stroke: var(--accent); } .tfig-svg .path.warn { stroke: var(--warn); } .tfig-svg .path.dn { stroke: var(--down); } .tfig-svg .path.thin { stroke-width: 1.5; }
.tfig-svg .dl { stroke-width: 2; stroke-dasharray: 5 4; } .tfig-svg .dl.up { stroke: var(--up); } .tfig-svg .dl.dn { stroke: var(--down); }
.tfig-svg .dot { fill: var(--muted); } .tfig-svg .dot.up { fill: var(--up); } .tfig-svg .dot.dn { fill: var(--down); }
.tfig-svg .mk.up { fill: var(--up); } .tfig-svg .mk.dn { fill: var(--down); }
.tfig-svg .zone { opacity: .16; } .tfig-svg .zone.up { fill: var(--up); } .tfig-svg .zone.dn { fill: var(--down); } .tfig-svg .zone.acc { fill: var(--accent); opacity: .12; }
.tfig-svg .card { fill: var(--raise); stroke: var(--line); }
.tfig-svg .bar { fill: var(--faint); opacity: .55; } .tfig-svg .bar.acc { fill: var(--accent); opacity: .9; }
.tfig-svg .arrow { stroke: var(--accent); stroke-width: 2; }
@media (max-width: 860px) { .tfig { padding: 6px; } .tfig-svg .cap { font-size: 13px; } }
.tut-body > .link { align-self: flex-start; } .tut-body > h3 { margin: 4px 0 0; } .tut-body > h3 + .muted { margin-top: 0; }