:root{--c:#1f4e79;--c2:#2e75b6;--bg:#f6f8fa;--fg:#1b1f23;--mut:#57606a;--bd:#d0d7de;--err:#b42318;--warn:#8a6100}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--c2)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:6px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 1rem;background:var(--c);color:#fff;flex-wrap:wrap}
.top a{color:#fff;text-decoration:none;margin-left:1rem}.brand{font-weight:700;margin-left:0!important}
main{max-width:1400px;margin:0 auto;padding:0 1rem 2rem}
h1{font-size:1.6rem;margin:1rem 0 .3rem}h2{font-size:1.15rem;margin:.2rem 0 .5rem}h3{font-size:1rem;margin:1rem 0 .3rem}
.lead{color:var(--mut);margin:.2rem 0 1rem;max-width:70ch}
.app{display:grid;gap:.8rem;grid-template-columns:minmax(0,1fr) 340px 380px;grid-template-areas:"tools tools tools" "canvas side results"}
.tools{grid-area:tools}.canvas{grid-area:canvas}.side{grid-area:side}.results{grid-area:results}
@media (max-width:1200px){.app{grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"tools tools" "canvas side" "results results"}}
@media (max-width:760px){.app{grid-template-columns:1fr;grid-template-areas:"tools" "canvas" "results" "side"}h1{font-size:1.3rem}}
.panel{background:#fff;border:1px solid var(--bd);border-radius:8px;padding:.7rem}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.3rem 0}
button,select,input{font:inherit;font-size:.95rem}
button{border:1px solid var(--bd);background:#fff;border-radius:6px;padding:.35rem .7rem;cursor:pointer;min-height:36px}
button:hover{background:#eef4fb}button:disabled{opacity:.45;cursor:default}
button.primary,.seg button.on{background:var(--c);color:#fff;border-color:var(--c)}
.seg{display:inline-flex}.seg button{border-radius:0}.seg button:first-child{border-radius:6px 0 0 6px}.seg button:last-child{border-radius:0 6px 6px 0}
:focus-visible{outline:3px solid #f0b400;outline-offset:1px}
input:not([type=checkbox]){width:6.5em;padding:.3rem .4rem;border:1px solid var(--bd);border-radius:5px}
input[aria-invalid=true]{border-color:var(--err);background:#fff0f0}
select{padding:.3rem;border:1px solid var(--bd);border-radius:5px;background:#fff}
label{font-size:.9rem;color:var(--mut)}.chk{display:inline-flex;gap:.3rem;align-items:center}
.canvas{position:relative;padding:0;overflow:hidden;min-height:420px}
#svg{display:block;width:100%;height:62vh;min-height:420px;touch-action:none;cursor:grab;background:#fff}
#svg.drawmode{cursor:crosshair}
#svg .g1{stroke:#eef1f4}#svg .g5{stroke:#dfe4ea}#svg .axis{stroke:#9aa5b1;stroke-width:1.2}
#svg .solid{fill:#9ec3e6;fill-opacity:.85;stroke:var(--c);stroke-width:1.6;cursor:move}
#svg .hole{fill:#fff;stroke:var(--err);stroke-width:1.6;stroke-dasharray:6 4;cursor:move}
#svg .sel{stroke-width:3}#svg .cax{stroke:#444;stroke-dasharray:8 5;stroke-width:1}#svg .pax{stroke:#c0392b;stroke-dasharray:3 4;stroke-width:1.2}
#svg .cg{fill:#c0392b}#svg .lbl{font-size:14px;fill:#c0392b;font-weight:700}
#svg .vh{fill:#fff;stroke:var(--c);stroke-width:2;cursor:pointer}
#svg .drawing{fill:none;stroke:var(--c2);stroke-width:2}#svg .drawing.h{stroke:var(--err)}
#svg .vtx{fill:var(--c2)}#svg .first{fill:#fff;stroke:#16a34a;stroke-width:3}
.coords{position:absolute;right:8px;top:6px;font:12px ui-monospace,monospace;background:#ffffffd0;padding:2px 6px;border-radius:4px}
.hint{position:absolute;left:8px;bottom:4px;margin:0;font-size:.8rem;color:var(--mut);background:#ffffffd0;padding:2px 6px;border-radius:4px}
details>summary{cursor:pointer;list-style:revert}details>summary h2{display:inline}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .6rem}.fields label{display:flex;flex-direction:column}.fields .chk{flex-direction:row;grid-column:1/-1}
.shapes{list-style:none;padding:0;margin:0}.shapes li{display:flex;align-items:center;gap:.4rem;padding:.15rem 0;border-bottom:1px solid #eee}
.shapes li.on .nm{font-weight:700;color:var(--c)}.shapes .nm{flex:1;text-align:left;border:none}.shapes .del{border:none;color:var(--err)}
.tbl{max-height:320px;overflow:auto}.steps .tbl{max-height:none}
table.vt{border-collapse:collapse;width:100%}.vt th,.vt td{padding:2px 3px;font-size:.85rem;text-align:left}.vt input{width:100%;min-width:5em}.vt button{min-height:28px;padding:0 .45rem}
table.rt{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.rt th{text-align:left;font-weight:400;padding:3px 4px}.rt td{text-align:right;padding:3px 4px;white-space:nowrap}.rt td:last-child{text-align:left;color:var(--mut)}
.rt tr.g th,.rt tr.g td{border-top:1px solid #e5e8eb}.gl{display:block;font-size:.75rem;color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
.err{border:1px solid var(--err);background:#fff3f2;color:var(--err);padding:.5rem .7rem;border-radius:6px}
.warn{border:1px solid #e3b341;background:#fff8e1;color:var(--warn);padding:.3rem .7rem;border-radius:6px;font-size:.9rem}
.small{font-size:.82rem;color:var(--mut)}
.steps{margin-top:.8rem;overflow-x:auto}.katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0}
.text{max-width:80ch;margin-top:1.5rem}.text details{background:#fff;border:1px solid var(--bd);border-radius:6px;padding:.5rem .8rem;margin:.4rem 0}
.foot{text-align:center;color:var(--mut);font-size:.85rem;padding:1rem}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.hub .panel h2 a{text-decoration:none}.soon{opacity:.6}
#printFig{display:none}
#svg .meshp{fill:none;stroke:#1f4e79;stroke-opacity:.35;stroke-width:.5;pointer-events:none}
#svg .scm{stroke:#7b2cbf;stroke-width:2.5}#svg .lbl.sc{fill:#7b2cbf}#svg .arcmid{fill:#f0b400;stroke:#7a5c00}
.vt input.arc{min-width:3.5em}
.warn p,p.warn{margin:.3rem 0}
@media print{
 @page{size:A4;margin:14mm}
 body{background:#fff;font-size:11pt}
 .top,.tools,.canvas,.side,.noprint,.text,.foot,.lead,.skip,#shareMsg,label[for],.results select{display:none!important}
 .app{display:block}.panel{border:none;padding:0}
 #printFig{display:block}#printFig svg{width:100%;height:auto;max-height:110mm}
 .results label{display:none}
 h1{font-size:15pt}.steps{page-break-before:always}.steps h3{page-break-after:avoid}.katex-display{overflow:visible}
}
/* calculadora de vigas */
.bapp{display:grid;gap:.8rem;grid-template-columns:minmax(330px,440px) minmax(0,1fr)}
@media (max-width:900px){.bapp{grid-template-columns:1fr}}
.ft{border-collapse:collapse;width:100%}.ft th,.ft td{padding:2px 3px;font-size:.85rem;text-align:left;vertical-align:middle}
.ft input{width:4.6em}.ft select{max-width:9.5em}.ft td.k input{width:4.2em}
.binputs h2{margin-top:.9rem}
#diagrams svg{width:100%;height:auto;display:block;background:#fff}
.dg .ax{stroke:#555;stroke-width:1}.dg .beam{stroke:#1b1f23;stroke-width:4}.dg .sup{fill:#fff;stroke:#1b1f23;stroke-width:1.5}
.dg .fillV{fill:#2e75b6;fill-opacity:.25;stroke:#2e75b6;stroke-width:1.5}.dg .fillM{fill:#c0392b;fill-opacity:.2;stroke:#c0392b;stroke-width:1.5}
.dg .fillT{fill:#7b2cbf;fill-opacity:.15;stroke:#7b2cbf;stroke-width:1.5}.dg .fillW{fill:#16a34a;fill-opacity:.18;stroke:#16a34a;stroke-width:1.8}
.dg text{font:12px system-ui,Arial,sans-serif;fill:#1b1f23}.dg .ttl{font-weight:700}.dg .val{font-size:11px}
.dg .load{stroke:#b45309;fill:#b45309;stroke-width:1.5}.dg .loadq{fill:#f59e0b;fill-opacity:.25;stroke:#b45309}.dg .loadQ{stroke:#0e7490;fill:#0e7490}.dg .loadqQ{fill:#06b6d4;fill-opacity:.2;stroke:#0e7490}
.dg .hinge{fill:#fff;stroke:#1b1f23;stroke-width:2}.dg .gridv{stroke:#e5e7eb}
.ok{color:#15803d;font-weight:600}.ko{color:var(--err);font-weight:700}
@media print{.binputs{display:none!important}.bapp{display:block}}
.btnlink{display:inline-block;padding:.35rem .7rem;border:1px solid var(--c);border-radius:6px;text-decoration:none;font-weight:600}
[hidden]{display:none!important}
fieldset.place{border:1px solid var(--bd);border-radius:6px;margin:.4rem 0;padding:.3rem .6rem}fieldset.place legend{font-weight:600;font-size:.9rem}
.stackf{display:grid;grid-template-columns:1fr;gap:.35rem;width:100%;grid-column:1/-1}.stackf select{width:100%}.place .fields{grid-template-columns:1fr 1fr}
.place{min-width:0}.place .fields{display:grid;grid-template-columns:1fr}.place select{max-width:100%}
.binputs .fields select,.binputs .fields input{max-width:100%;min-width:0}.binputs .fields label{min-width:0}