/* ===== Vigas e Mohr (sobre app.css da Hidráulica publicada) ===== */
@import url("lab-start.css");
@import url("panel.css");
:root { --trac: #d94a2b; --comp: #2f6fd0; }
:root[data-theme="dark"] { --trac: #ff7a5c; --comp: #6ea4ff; }
.practice-entry{display:flex;justify-content:flex-end;padding:.55rem clamp(1rem,3vw,2.5rem)}
.practice-entry a{display:inline-flex;align-items:center;gap:.6rem;font-size:.85rem;text-decoration:none;color:var(--ink-2);min-height:36px}
.practice-entry a:hover{color:var(--accent)}
.practice-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.lab-start { margin: 0 0 1rem; }
.stage {
  position: relative; height: clamp(380px, 58vh, 620px); border: 1px solid var(--rule); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, var(--raised), var(--surface) 55%, var(--bg));
}
.stage .ctl { position: absolute; top: .6rem; right: .6rem; z-index: 2; }
.stage .ctl .icon-btn { background: var(--surface); }
.stage .hint { position: absolute; left: .6rem; bottom: .5rem; z-index: 2; font-size: .75rem; color: var(--ink-3); margin: 0; background: color-mix(in srgb, var(--surface) 85%, transparent); padding: .2rem .45rem; border-radius: 3px; pointer-events: none; }
.view3d { position: absolute; inset: 0; }
.view3d canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.view3d canvas:active { cursor: grabbing; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl3d { position: absolute; left: 0; top: 0; font: 500 11px/1 var(--mono); padding: .28rem .45rem; border-radius: 3px; white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--rule); color: var(--ink); backdrop-filter: blur(3px); }
.lbl3d.load { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.lbl3d.reac { color: var(--ok-ink); }
.lbl3d.diag { background: transparent; border: 0; color: var(--ink-3); backdrop-filter: none; }
.lbl3d.cut { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lbl3d:empty { display: none !important; }
.legend { display: flex; align-items: center; gap: .5rem; }
.legend .lbl { font: 400 .76rem/1 var(--mono); color: var(--ink-2); }
.ramp-ts { width: 150px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, var(--comp), #c9ced4, var(--trac)); }
.xsel { display: flex; align-items: center; gap: .8rem; padding: .3rem 0 1rem; }
.xsel label { font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
@media(max-width:700px){.xsel{flex-wrap:wrap}.xsel label{flex-basis:100%}.xsel input{min-width:0;width:0}}
.xsel input { flex: 1; accent-color: var(--accent); }
.xsel output, .field output { font: 500 .9rem/1 var(--mono); min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.charts { grid-template-columns: 1fr; gap: .8rem; }
.chart { max-width: none; }
.chart-read { font: 500 .8rem/1.2 var(--mono); color: var(--ink-2); white-space: nowrap; }
.ln { fill: none; stroke-width: 2; }
.area { stroke: none; opacity: .16; }
.ln.v { stroke: var(--tension); } .area.v, .dot.v { fill: var(--tension); } .axl.v { fill: var(--tension); }
.ln.m { stroke: var(--accent); } .area.m, .dot.m { fill: var(--accent); } .axl.m { fill: var(--accent); }
.ln.d { stroke: var(--ink-2); } .area.d, .dot.d { fill: var(--ink-2); } .axl.d { fill: var(--ink-2); }
.cursor { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.cur-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.cur-txt { font: 600 11px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }

/* painel de dados */
.field input[type="number"], .field select { width: 100%; min-height: 36px; padding: .35rem .55rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--raised); }
.field input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.field .row input[type="number"] { width: 5.5rem; flex: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .7rem; }
.load.new { animation: rise .3s var(--ease); }
.btn, .btn-ghost, .btn-primary { display: inline-flex; justify-content: center; align-items: center; gap: .4rem; min-height: 38px; padding: .45rem .9rem; border: 1px solid var(--ink); border-radius: 3px; background: transparent; color: var(--ink); font: 500 .86rem/1 var(--sans); cursor: pointer; text-decoration: none; }
.btn-ghost { border-color: var(--rule); }
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.status .m-num { font-size: 1.5rem; }
.metrics { flex-wrap: wrap; gap: .9rem 1.6rem; }
.flash { animation: flash .8s var(--ease); }
@keyframes flash { from { color: var(--accent); } }

/* Mohr */
.mohr-src { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: end; padding: 0 0 1rem; }
.mohr-inputs { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.mohr-inputs .field { margin: 0; min-width: 7.5rem; }
.mohr-inputs .note { margin: 0; }
.mohr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mohr-grid .card { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.mohr-grid figcaption strong { display: block; font-weight: 600; font-size: .92rem; }
.mohr-grid figcaption span { display: block; color: var(--ink-3); font-size: .78rem; }
.mohr-grid svg { display: block; width: 100%; height: auto; max-height: 460px; }
.mohr-c { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: var(--ink-2); stroke-width: 1.5; }
.mohr-d0 { stroke: var(--ink-3); stroke-dasharray: 4 4; }
.mohr-d { stroke: var(--accent); stroke-width: 2.2; }
.mohr-arc { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.mohr-p { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.mohr-x0 { fill: var(--ink-3); }
.mohr-x { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.mohr-ctr { fill: var(--ink); }
.elem-sq { fill: color-mix(in srgb, var(--cool) 40%, var(--surface)); stroke: var(--ink); stroke-width: 1.5; }
.elem-ax { stroke: var(--accent); stroke-dasharray: 5 4; }
.ar-t, .ar-c, .ar-s { stroke-width: 2.6; fill: none; }
.ar-t { stroke: var(--trac); } .ar-c { stroke: var(--comp); } .ar-s { stroke: var(--ink); }
.sec-shape { fill: color-mix(in srgb, var(--cool) 55%, var(--surface)); stroke: var(--ink-2); stroke-width: 1.2; }
.ln-na { stroke: var(--ink-3); stroke-dasharray: 2 4; }
.sig-area { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 1.2; }
.tau-area { fill: color-mix(in srgb, var(--tension) 20%, transparent); stroke: var(--tension); stroke-width: 1.2; }
.pt-line { stroke: var(--accent); stroke-dasharray: 4 3; }
.pt-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
#mohr-kv dd { font-size: 1.15rem; }

/* Aprender */
.learn-grid p, .learn-grid li { color: var(--ink-2); font-size: .92rem; }
.verif td.ok { color: var(--ok-ink); font-weight: 600; }
.verif td.bad { color: var(--err-ink); font-weight: 600; }
.verif tbody tr { cursor: default; }
.block > h3 { font: 400 1.4rem/1.2 var(--serif); }

@media (max-width: 1100px) { .mohr-grid { grid-template-columns: 1fr 1fr; } .card-wide { grid-column: 1 / -1; } }
@media (max-width: 860px) {
  .mohr-grid { grid-template-columns: 1fr; }
  .stage .hint { display: none; }
}
@media (min-width: 861px) { #btn-props { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pane.enter, .props-inner.enter > *, .load.new, .flash { animation: none; }
  html:root body, html:root body :is(button, a, input, textarea, select, .card, .chart, .track, .load, .tile, .panel-tab) { transition: none; }
}

/* ---- Modo guiado (mesma linguagem dos outros laboratórios) ---- */
.ig-tour{position:fixed;inset:0;z-index:1300;pointer-events:none}
.ig-ring{position:fixed;display:none;border:2px solid var(--accent);border-radius:10px;box-shadow:0 0 0 100vmax rgba(12,12,14,.52);pointer-events:none;transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease}
.ig-pop{position:fixed;pointer-events:auto;box-sizing:border-box;padding:1rem 1.1rem .9rem;background:var(--surface);color:var(--ink);border:1px solid var(--accent);border-radius:14px;box-shadow:0 18px 50px -12px #000a;transition:left .25s ease,top .25s ease}
.ig-count{display:block;font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.ig-title{display:block;font:400 1.35rem/1.15 var(--serif);letter-spacing:-.015em;outline:none}
.ig-text{margin:.5rem 0 0;font-size:.84rem;line-height:1.55}
.ig-hint{margin:.4rem 0 0;font:400 .72rem/1.5 var(--mono);color:var(--ink-3)}
.ig-actions{display:flex;gap:.5rem;margin-top:.9rem}
.ig-pop button{font:600 12.5px var(--sans);min-height:36px;padding:.35rem .9rem;border-radius:8px;border:1px solid var(--rule,var(--line,#d9d5cc));background:transparent;color:var(--ink);cursor:pointer}
.ig-pop button:hover{border-color:var(--accent);color:var(--accent)}
.ig-pop .ig-primary{background:var(--accent);border-color:var(--accent);color:var(--surface);margin-left:auto}
.ig-pop .ig-primary:hover{color:var(--surface);filter:brightness(1.08)}
.ig-pop .ig-exit{display:block;margin:.6rem 0 0;padding:0;min-height:0;border:0;font:500 11px var(--mono);color:var(--ink-3);text-decoration:underline}
.ig-pop [hidden]{display:none!important}
.ig-arrow{position:absolute;width:12px;height:12px;background:var(--surface);border:1px solid var(--accent);transform:rotate(45deg)}
.ig-pop[data-side=below] .ig-arrow{top:-7px;left:calc(var(--ax,40px) - 6px);border-right:0;border-bottom:0}
.ig-pop[data-side=above] .ig-arrow{bottom:-7px;left:calc(var(--ax,40px) - 6px);border-left:0;border-top:0}
.ig-pop[data-side=right] .ig-arrow{left:-7px;top:calc(var(--ay,40px) - 6px);border-right:0;border-top:0}
.ig-pop[data-side=left] .ig-arrow{right:-7px;top:calc(var(--ay,40px) - 6px);border-left:0;border-bottom:0}
.ig-pop[data-side=center] .ig-arrow,.ig-pop[data-side=none] .ig-arrow{display:none}
.ig-open{margin-left:.6rem;min-height:30px;padding:0 .7rem;border:1px solid var(--rule,var(--line,#d9d5cc));border-radius:8px;background:transparent;color:var(--ink);font:600 11px var(--sans);cursor:pointer}
.ig-open:hover{border-color:var(--accent);color:var(--accent)}
@media(prefers-reduced-motion:reduce){.ig-ring,.ig-pop{transition:none}}
@media(max-width:760px){.ig-pop{max-height:60vh;overflow:auto}}