/* ============================================================================ CastiLab — styles.css · F2.1 "Blueprint Graphite" ---------------------------------------------------------------------------- REGLA DE ORO: ningún color hex vive en JS. El SVG se colorea por CLASE: class="cls- s|f|t" → .cls-bar{color:var(--c-bar)} .s{stroke:currentColor;fill:none} .f{fill:currentColor;stroke:none} .t{fill:currentColor;stroke:none} Así el toggle de tema es un data-theme en (cero re-render) y el reporte hereda el tema claro envolviendo el SVG clonado en .report-theme. Semántica estricta: rojo=compresión/error, verde=tracción/OK, naranja=carga aplicada, violeta=momento, azul=interacción, gold=SOLO badge CL + Q/δ. ============================================================================ */ /* ===== Tema oscuro (default) ===== */ :root, :root[data-theme="dark"]{ /* superficies */ --bg:#0e1116; --bg-canvas:#12161d; --panel:#1a212c; --panel2:#212a37; --line:#2b3644; --line2:#3b4a5e; --ink:#e6edf3; --ink-dim:#b7c2cf; --mut:#8b98a8; /* interacción */ --accent:#3b82f6; --accent-hi:#60a5fa; --accent-down:#1d4ed8; --sel-halo:rgba(59,130,246,.32); --focus-ring:#60a5fa; /* semánticos estrictos */ --ok:#22c55e; --bad:#ef4444; --warn:#f59e0b; /* marca (SOLO badge CL + Q/δ) */ --brand:#ffcf5c; --brand2:#ffb020; /* lienzo */ --c-grid:#1c242e; --c-grid-major:#27303c; --c-axis:#3b4a5e; --c-node:#e6edf3; --c-node-hole:#12161d; --c-node-label:#cdd7e1; --c-bar:#9fb0c3; --c-bar-sel:var(--accent-hi); --c-support:#8b98a8; --c-load:#f97316; /* F nodales y P internas */ --c-dist:#fb923c; /* w, w2, ax, dist[] */ --c-mom:#a78bfa; /* M nodal, Mi, Mj */ --c-q:var(--brand); --c-ask:var(--brand); --c-N-pos:#22c55e; --c-N-neg:#ef4444; --c-V:#38bdf8; --c-M:#a78bfa; --c-def:#f472b6; --c-react:#2dd4bf; --c-dim:#8b98a8; /* tipografía */ --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-num:ui-monospace,"Cascadia Code",Consolas,"SF Mono",Menlo,monospace; --rad:12px; } /* ===== Tema claro "Engineering paper" (app en claro Y reporte) ===== */ :root[data-theme="light"], .report-theme{ --bg:#f7f9fb; --bg-canvas:#fcfdfe; --panel:#ffffff; --panel2:#f2f5f8; --line:#d7dee7; --line2:#b9c4d0; --ink:#1f2937; --ink-dim:#374151; --mut:#5b6675; --accent:#2563eb; --accent-hi:#1d4ed8; --accent-down:#1d4ed8; --sel-halo:rgba(37,99,235,.25); --focus-ring:#1d4ed8; --ok:#15803d; --bad:#dc2626; --warn:#b45309; --brand:#b8860b; --brand2:#a16207; /* gold "tinta" imprimible */ --c-grid:#eaeef4; --c-grid-major:#dbe2ea; --c-axis:#b9c4d0; --c-node:#1f2937; --c-node-hole:#ffffff; --c-node-label:#374151; --c-bar:#4b5a6b; --c-bar-sel:var(--accent); --c-support:#5b6675; --c-load:#c2410c; --c-dist:#ea580c; --c-mom:#7c3aed; --c-q:#b8860b; --c-ask:#b8860b; --c-N-pos:#15803d; --c-N-neg:#dc2626; --c-V:#0284c7; --c-M:#7c3aed; --c-def:#db2777; --c-react:#0f766e; --c-dim:#5b6675; } *{box-sizing:border-box; margin:0; padding:0} html{-webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent} body{ background:var(--bg); color:var(--ink); font:15px/1.5 var(--font-ui); overscroll-behavior:none; } :focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px} .num{font-family:var(--font-num); font-variant-numeric:tabular-nums} /* ---------- topbar ---------- */ #topbar{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 10px 0; } .brand{display:flex; align-items:center; gap:9px; margin-bottom:7px} .brand-badge{ background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#241a00; font-weight:900; font-size:16px; border-radius:11px; padding:5px 10px; box-shadow:0 2px 14px #ffb02033; letter-spacing:.02em; } .brand-txt b{font-size:14px; letter-spacing:.04em; display:block} .brand-txt small{color:var(--mut); font-size:11px} .brand-sp{flex:1} #themeBtn{ background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:10px; width:34px; height:34px; font-size:15px; cursor:pointer; line-height:1; } #tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:7px; scrollbar-width:none} #tabs::-webkit-scrollbar{display:none} #tabs button{ flex:0 0 auto; background:var(--panel); color:var(--mut); border:1px solid var(--line); border-radius:10px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; } #tabs button.on{background:var(--accent-down); color:#fff; border-color:var(--accent)} main{max-width:1400px; margin:0 auto; padding:10px} .tab{display:none} .tab.on{display:block} /* ---------- toolbar de modos ---------- */ #toolbar{display:flex; gap:5px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none} #toolbar::-webkit-scrollbar{display:none} .tool{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:1px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:11px; padding:6px 9px; min-width:52px; cursor:pointer; font-weight:600; } .tool .ico{font-size:17px; line-height:1.1} .tool .lbl{font-size:10.5px; color:var(--mut)} .tool .key{font-size:9px; color:var(--mut); opacity:.75} .tool.on{background:var(--accent-down); border-color:var(--accent)} .tool.on .lbl,.tool.on .key{color:#dbeafe} .tool.danger.on{background:#7f1d1d; border-color:var(--bad)} /* ---------- barra de acciones ---------- */ #actions{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px} .btn{ background:var(--accent-down); color:#fff; border:1px solid var(--accent); border-radius:10px; padding:7px 12px; font-size:13px; font-weight:700; cursor:pointer; } .btn.gold{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#241a00; border-color:var(--brand2)} .btn.ghost{background:var(--panel); color:var(--ink); border-color:var(--line)} .btn.small{padding:5px 9px; font-size:12px} .btn:active{transform:scale(.97)} .btn:disabled{opacity:.4; cursor:default} select,input[type=number],input[type=text]{ background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font-size:13.5px; font-family:inherit; } input[type=number]{font-family:var(--font-num)} select{max-width:210px} /* ---------- lienzo ---------- */ #canvas-wrap{ position:relative; background:var(--bg-canvas); border:1px solid var(--line); border-radius:12px; overflow:hidden; touch-action:none; } #svg{display:block; width:100%; height:56vh; min-height:320px} /* cursor por modo */ #svg[data-mode="node"],#svg[data-mode="barra"]{cursor:crosshair} #svg[data-mode="mover"]{cursor:grab} #svg[data-mode="mover"].dragging{cursor:grabbing} #svg[data-mode="borrar"]{cursor:not-allowed} #svg[data-mode="apoyo"],#svg[data-mode="rotula"],#svg[data-mode="carga"], #svg[data-mode="Q"],#svg[data-mode="delta"]{cursor:pointer} #hint{ position:absolute; left:8px; top:8px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:4px 9px; font-size:11.5px; color:var(--mut); pointer-events:none; max-width:70%; opacity:.92; } #hint b{color:var(--accent-hi)} #zoombar{position:absolute; right:8px; bottom:8px; display:flex; gap:6px} #zoombar button{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:17px; font-weight:800; cursor:pointer; opacity:.92; } /* ---------- SVG: colores por CLASE (cero hex en JS) ---------- */ #svg .s{stroke:currentColor; fill:none} #svg .f{fill:currentColor; stroke:none} #svg .t{fill:currentColor; stroke:none; font-family:var(--font-ui)} #svg .t.num{font-family:var(--font-num)} .cls-grid{color:var(--c-grid)} .cls-grid-major{color:var(--c-grid-major)} .cls-axis{color:var(--c-axis)} .cls-bar{color:var(--c-bar)} .cls-bar-sel{color:var(--c-bar-sel)} .cls-node{color:var(--c-node)} .cls-node-label{color:var(--c-node-label)} .cls-support{color:var(--c-support)} .cls-load{color:var(--c-load)} .cls-dist{color:var(--c-dist)} .cls-mom{color:var(--c-mom)} .cls-q{color:var(--c-q)} .cls-ask{color:var(--c-ask)} .cls-react{color:var(--c-react)} .cls-dim{color:var(--c-dim)} .cls-def{color:var(--c-def)} .cls-diag-N-pos{color:var(--c-N-pos)} .cls-diag-N-neg{color:var(--c-N-neg)} .cls-diag-V{color:var(--c-V)} .cls-diag-M{color:var(--c-M)} .cls-ghost{color:var(--accent-hi)} .cls-sel{color:var(--accent)} /* el agujero de las rótulas usa el color del lienzo, no un hex */ .cls-hole{fill:var(--c-node-hole)} /* selección y marquee */ .cls-halo{fill:var(--sel-halo); stroke:none} .cls-halo-s{stroke:var(--sel-halo); fill:none} #svg .marquee{fill:var(--sel-halo); stroke:var(--accent); stroke-width:1; stroke-dasharray:4 3} /* relleno de los diagramas: mismo token que el trazo, al 18% */ #svg .diag-fill{fill:currentColor; fill-opacity:.18; stroke:none} /* barra de toggles de resultados */ #diagBar{display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:0 0 8px} #diagBar .dlbl{font-size:11.5px; color:var(--mut); font-weight:700; margin-right:2px} #diagBar .dsep{width:1px; height:18px; background:var(--line); margin:0 4px} #diagBar button{ background:var(--panel); color:var(--ink-dim); border:1px solid var(--line); border-radius:8px; padding:4px 10px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font-ui); } #diagBar button[data-diag]{min-width:32px; font-family:var(--font-num)} #diagBar button.on{background:var(--accent-down); color:#fff; border-color:var(--accent)} #diagBar button[data-diag="N"].on{background:var(--c-N-pos); border-color:var(--c-N-pos); color:#04220f} #diagBar button[data-diag="V"].on{background:var(--c-V); border-color:var(--c-V); color:#04222b} #diagBar button[data-diag="M"].on{background:var(--c-M); border-color:var(--c-M); color:#1a0f33} #diagBar button[data-lay="def"].on{background:var(--c-def); border-color:var(--c-def); color:#2b0016} #diagBar button[data-lay="react"].on{background:var(--c-react); border-color:var(--c-react); color:#022c26} #ampWrap{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--mut)} #ampWrap b{color:var(--c-def); font-family:var(--font-num)} #amp{width:110px; accent-color:var(--c-def)} #defBanner{ background:var(--panel); border:1px solid var(--warn); border-left:3px solid var(--warn); border-radius:8px; padding:6px 10px; font-size:12px; color:var(--ink-dim); margin-bottom:8px; } /* fondo de las reglas: el color del lienzo, no un hex */ #svg .ruler-bg{fill:var(--bg-canvas); opacity:.93; stroke:none} /* leyenda colapsable abajo-derecha (encima del zoombar) */ #legend{ position:absolute; right:8px; bottom:50px; z-index:4; max-width:min(230px, 62%); background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:5px; opacity:.96; } #legendBtn{ background:none; border:none; color:var(--mut); font-size:11.5px; font-weight:700; cursor:pointer; padding:2px 4px; width:100%; text-align:left; font-family:var(--font-ui); } #legendBody{display:block; margin-top:4px; max-height:44vh; overflow-y:auto} #legend.collapsed #legendBody{display:none} #legend .lg{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-dim); padding:1.5px 3px} #legend .sw{ width:13px; height:4px; border-radius:2px; flex:0 0 auto; background:currentColor; /* .cls-* fija el `color` → el swatch usa el MISMO token que el lienzo */ } #legend .sw.cls-hole{height:9px; width:9px; border-radius:50%; background:var(--c-node-hole); border:1.6px solid var(--c-node)} /* tooltip del lienzo (hover 400 ms) */ #tip{ position:absolute; z-index:5; pointer-events:none; opacity:0; transition:opacity .12s; background:var(--panel2); border:1px solid var(--line2); color:var(--ink); border-radius:7px; padding:4px 8px; font-size:11.5px; font-family:var(--font-num); white-space:nowrap; max-width:96%; overflow:hidden; text-overflow:ellipsis; } #tip.on{opacity:.97} /* ---------- barra de estado / resultado ---------- */ #status{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:9px 0} .badge{ border-radius:999px; padding:3px 11px; font-size:12.5px; font-weight:700; border:1px solid var(--line); background:var(--panel2); } .badge.iso{color:#04220f; background:var(--ok); border-color:var(--ok)} .badge.hip{color:#241a00; background:var(--brand); border-color:var(--brand2)} .badge.mec{color:#fff; background:var(--bad); border-color:var(--bad)} .badge.mut{color:var(--mut)} .badge.warn{color:#241a00; background:var(--warn); border-color:var(--warn)} #delta-box{ flex:1 1 260px; min-width:220px; background:var(--panel); border:1.5px solid var(--brand); border-radius:11px; padding:8px 12px; font-size:14.5px; overflow-x:auto; white-space:nowrap; font-family:var(--font-num); } #delta-box b.gold{color:var(--brand)} #delta-box.bad{border-color:var(--bad)} #delta-box.mut{border-color:var(--line); color:var(--mut); font-family:var(--font-ui)} .gold{color:var(--brand)} .ok{color:var(--ok)} .bad{color:var(--bad)} .mut{color:var(--mut)} .frac{display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; margin:0 3px} .frac>span{display:block; padding:0 5px; font-size:12.5px} .frac>span:first-child{border-bottom:1.2px solid currentColor} .warn-list{color:var(--bad); font-size:12.5px; margin:6px 0} .warn-list li{margin-left:16px} /* ---------- tabla sincronizada ---------- */ #tables-head{display:flex; align-items:center; gap:8px; margin-bottom:6px} .tblcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; margin:10px 0; overflow:hidden} .tblcard>h3{ font-size:13.5px; color:var(--ink); padding:9px 12px; background:var(--panel2); display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; } .tblcard>h3 .chev{font-size:10px; color:var(--mut); transition:transform .16s; width:10px} .tblcard.collapsed>h3 .chev{transform:rotate(-90deg)} .tblcard>h3 .ttl{flex:1} .tblcard>h3 .add{ font-size:12px; color:#fff; background:var(--accent-down); border-radius:7px; padding:2px 9px; border:none; cursor:pointer; } .tblcard .body{max-height:1200px; overflow:hidden; transition:max-height .18s} .tblcard.collapsed .body{max-height:0} .tblwrap{overflow-x:auto} table.grid{border-collapse:collapse; width:100%; font-size:12.5px; min-width:max-content} .grid th{ background:var(--panel2); color:var(--ink-dim); padding:5px 7px; border:1px solid var(--line); font-size:11px; white-space:nowrap; position:sticky; top:0; } .grid th small{color:var(--mut); font-weight:400} .grid td{padding:2px 4px; border:1px solid var(--line); text-align:center; white-space:nowrap} .grid input,.grid select{padding:3px 5px; font-size:12px; border-radius:6px} .grid input[type=number]{width:64px} .grid input.coord{width:56px} .grid input.small{width:52px} .grid select.sel{max-width:none; width:auto} .grid .del{background:none; border:none; color:var(--bad); font-size:15px; cursor:pointer; padding:0 4px} .grid td.name{color:var(--accent-hi); font-weight:800} .grid tr.hi td{background:var(--sel-halo)} .grid .chk{width:16px; height:16px; accent-color:var(--accent)} .empty{color:var(--mut); font-size:12px; padding:8px 12px} /* ---------- bottom-sheet (panel de propiedades) ---------- */ #sheet-bg{position:fixed; inset:0; background:#0007; z-index:80; display:none} #sheet-bg.on{display:block} #sheet{ position:fixed; left:0; right:0; bottom:0; z-index:81; transform:translateY(100%); transition:transform .22s; background:var(--panel); border-top:2px solid var(--accent); border-radius:18px 18px 0 0; padding:14px 16px 24px; max-height:80vh; overflow-y:auto; max-width:560px; margin:0 auto; } #sheet.on{transform:translateY(0)} #sheet h3{color:var(--ink); font-size:16px; margin-bottom:4px} #sheet .sub{color:var(--mut); font-size:12px; margin-bottom:10px} .field{display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap} .field label{font-size:13px; color:var(--ink); min-width:74px} .field .un{color:var(--mut); font-size:11px; font-family:var(--font-num)} .field .hintx{font-size:11px; color:var(--mut); flex-basis:100%} .seg{display:flex; gap:5px; flex-wrap:wrap} .seg button{ background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:6px 11px; font-size:13px; font-weight:600; cursor:pointer; } .seg button.on{background:var(--accent-down); color:#fff; border-color:var(--accent)} .sheet-actions{display:flex; gap:8px; margin-top:14px} .sheet-actions .btn{flex:1; text-align:center} hr.sep{border:none; border-top:1px dashed var(--line); margin:12px 0} footer{max-width:1400px; margin:20px auto 40px; padding:0 12px; color:var(--mut); text-align:center; font-size:12px} /* toast */ #toast{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(30px); background:var(--panel2); border:1px solid var(--accent); color:var(--ink); padding:9px 16px; border-radius:11px; font-size:13px; z-index:90; opacity:0; transition:.25s; pointer-events:none; max-width:90%; } #toast.on{opacity:1; transform:translateX(-50%) translateY(0)} #toast.bad{border-color:var(--bad)} /* ============================ REPORTE (F2.6) ============================ #report-view lleva .report-theme → TODOS los var(--c-*) resuelven a la paleta clara sin tocar JS. Ahí se cobra la deuda de "cero hex en JS". */ #report-view{ position:fixed; inset:0; z-index:200; overflow-y:auto; background:var(--bg); color:var(--ink); padding:16px; font-family:var(--font-ui); } body.report-open{overflow:hidden} #report-view .rt-actions{ display:flex; gap:8px; align-items:center; margin-bottom:14px; position:sticky; top:-16px; background:var(--bg); padding:8px 0; z-index:2; } #report-view .rt-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:14px; flex-wrap:wrap; } #report-view h1{font-size:20px; letter-spacing:.01em} #report-view .rt-sub{color:var(--mut); font-size:12px; margin-top:2px} #report-view .rt-badges{display:flex; gap:6px; flex-wrap:wrap} #report-view .rt-badge{ border:1px solid var(--line2); border-radius:999px; padding:2px 10px; font-size:11.5px; font-weight:700; background:var(--panel2); } #report-view .card{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-bottom:12px; min-width:0; /* o el grid/tabla la infla */ } /* las tablas anchas scrollean AQUÍ dentro; la página nunca se va de lado */ #report-view .rt-wrap{overflow-x:auto; max-width:100%} #report-view h2{font-size:15px; margin-bottom:8px; color:var(--ink)} #report-view h3{font-size:12.5px; margin:10px 0 4px; color:var(--mut); font-weight:700} #report-view .rt-p{font-size:12.5px; line-height:1.6; margin:6px 0} #report-view .rt-big{font-size:17px; margin:6px 0 10px; display:flex; align-items:center; gap:4px; flex-wrap:wrap} #report-view .n{font-family:var(--font-num); font-variant-numeric:tabular-nums} #report-view .fr{display:inline-flex; flex-direction:column; text-align:center; vertical-align:middle} #report-view .fr>span{padding:0 6px; font-size:14px} #report-view .fr>span:first-child{border-bottom:1.4px solid currentColor} #report-view table.rt{border-collapse:collapse; width:100%; font-size:11px; margin:4px 0 8px} #report-view table.rt th{ background:var(--panel2); border:1px solid var(--line2); padding:3px 6px; text-align:center; font-size:10px; white-space:nowrap; } #report-view table.rt td{border:1px solid var(--line); padding:2px 6px; text-align:center; white-space:nowrap} #report-view .rt-fig{display:flex; justify-content:center; background:var(--bg-canvas); border:1px solid var(--line); border-radius:6px; padding:6px} #report-view .rt-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px} #report-view figure{border:1px solid var(--line); border-radius:6px; padding:6px; background:var(--bg-canvas); text-align:center} #report-view figcaption{font-size:10px; color:var(--mut); margin-bottom:4px} #report-view figure svg{max-width:100%; height:auto} #report-view .rt-foot ul{font-size:11.5px; line-height:1.7; padding-left:18px; color:var(--ink-dim)} @media(max-width:700px){ #report-view .rt-grid{grid-template-columns:1fr} } /* ---- impresión: PDF vectorial, tinta sobre papel ---- */ @media print{ @page{ size:letter portrait; margin:14mm } body > *:not(#report-view){ display:none !important } body{ background:#fff } #report-view{ position:static; padding:0; overflow:visible; background:#fff; /* sin esto los navegadores blanquean fondos y rellenos (§12.4) */ -webkit-print-color-adjust:exact; print-color-adjust:exact; } #report-view *{ -webkit-print-color-adjust:exact; print-color-adjust:exact } .no-print{ display:none !important } #report-view .card{ break-inside:avoid; page-break-inside:avoid; border-radius:0 } #report-view figure{ break-inside:avoid; page-break-inside:avoid } #report-view h2{ break-after:avoid } #report-view table.rt{ break-inside:auto } #report-view table.rt tr{ break-inside:avoid } /* en papel no hay scroll: el wrap debe soltar la tabla, no recortarla */ #report-view .rt-wrap{ overflow:visible } #report-view .rt-grid{ grid-template-columns:1fr 1fr } } /* ============================ PASO A PASO (F3) ============================ La pestaña #tab-metodo: tarjetas de paso colapsables estilo "manuscrito del profesor en digital" (patrón del P4), exploded view y cuadro de armaduras. Cero hex nuevos en JS: las clases de abajo cierran el contrato. */ #tab-metodo .card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px; min-width:0; } #tab-metodo h2{font-size:16.5px; color:var(--ink); margin-bottom:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap} #tab-metodo .stitle{font-size:13.5px; color:var(--accent-hi); margin:12px 0 4px; font-weight:800} .step{ background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden; } .step-head{ display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; user-select:none; background:var(--panel2); font-size:14px; } .step-num{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#241a00; } .step-head b{flex:1; color:var(--ink)} .step-head .arr{color:var(--mut); font-size:10px; transition:transform .16s} .step.open .step-head .arr{transform:rotate(90deg)} .step-body{display:none; padding:12px 14px} .step.open .step-body{display:block} .callout{ background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:9px; padding:8px 11px; font-size:12.5px; line-height:1.6; color:var(--ink-dim); margin:8px 0; } .callout.why{border-left-color:var(--brand)} .callout.ok{border-left-color:var(--ok)} .callout.warn{border-left-color:var(--warn)} .callout.bad{border-left-color:var(--bad)} #tab-metodo .eq{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:13.5px; margin:5px 0; padding:2px 0; overflow-x:auto; white-space:nowrap; color:var(--ink); } #tab-metodo .eq.center{text-align:center; font-size:14.5px} #tab-metodo .eq .int{font-size:19px; vertical-align:middle} #tab-metodo .eq sub,#tab-metodo .eq sup{font-size:9.5px} .big-result{ border:1.5px solid var(--brand); border-radius:12px; padding:10px 13px; font-family:var(--font-num); font-size:16px; margin:10px 0; overflow-x:auto; white-space:nowrap; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } #tab-metodo .aporte{font-size:13px; margin:6px 0 10px; font-family:var(--font-num)} .cyan{color:var(--c-V)} .vio{color:var(--c-M)} .chip{ display:inline-block; border-radius:999px; border:1px solid var(--line2); background:var(--panel2); color:var(--mut); font-size:10.5px; font-weight:700; padding:1px 9px; vertical-align:middle; } .chip.bad{color:var(--bad); border-color:var(--bad)} table.cuadro{border-collapse:collapse; font-size:12px; margin:6px 0; min-width:max-content} table.cuadro th{ background:var(--panel2); color:var(--ink-dim); border:1px solid var(--line); padding:4px 8px; font-size:11px; white-space:nowrap; } table.cuadro td{ border:1px solid var(--line); padding:3px 8px; text-align:center; white-space:nowrap; font-family:var(--font-num); font-variant-numeric:tabular-nums; } table.cuadro tr.zero td{opacity:.45} table.cuadro td.res{font-weight:800; color:var(--brand)} /* exploded view y figuras del método */ .fbd-box{background:var(--bg-canvas); border:1px solid var(--line); border-radius:10px; padding:6px; margin:10px 0} .fbd-box svg{display:block; width:100%; height:auto} .svg-cap{font-size:11px; color:var(--mut); padding:5px 8px 2px; line-height:1.5} .cls-end{color:var(--c-react)} /* fuerzas de extremo del despiece */ .cls-end-m{color:var(--c-mom)} /* momentos de extremo del despiece */ .cls-ghost-ex{color:var(--c-bar); opacity:.28} .cls-2f{color:var(--c-V)} .cls-fuera{color:var(--bad)} /* laboratorio */ #tab-metodo .lab .lab-rows{display:flex; flex-direction:column; gap:6px} #tab-metodo .lab-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap} #tab-metodo .lab-row code{ font-size:11.5px; color:var(--ink-dim); background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:2px 8px; min-width:150px; } #tab-metodo .lab-row input{width:110px} #tab-metodo .lab-row .un{color:var(--mut); font-size:11px; font-family:var(--font-num)} /* ---------- layout desktop ---------- BUG QUE SE ARREGLA: grid-template-columns:1.15fr .85fr + table.grid {min-width:max-content} con 14 columnas en Barras inflaba el track derecho (auto-min-size). minmax(0,…) lo anula y #tables{min-width:0} deja que la tabla scrollee DENTRO de .tblwrap en vez de empujar el lienzo. */ @media(min-width:820px){ .layout{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr); gap:12px; align-items:start; } #tables{min-width:0} .layout.tables-off{grid-template-columns:1fr 0} .layout.tables-off #tables{display:none} #svg{height:clamp(420px, calc(100vh - 230px), 900px)} }