/* HUBMAT Visual — Ensino Médio · Bloco 400 */
.em4-controls{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}.em4-controls .btn{flex:1 1 96px}
.em4-readout{text-align:center;font-size:clamp(21px,4vw,34px);font-weight:850;margin:10px 0}
.em4-plane svg{width:100%;height:auto;display:block;max-width:680px;margin:auto}.em4-grid{stroke:#d6e0d8;stroke-width:1}.em4-axis{stroke:#607584;stroke-width:2}.em4-curve{fill:none;stroke:#235f9b;stroke-width:4}.em4-guide{stroke:#a4481a;stroke-width:2;stroke-dasharray:6 5}.em4-point{fill:#f2c257;stroke:#7d5c15;stroke-width:2}.em4-root-found{fill:#146348;stroke:#fff;stroke-width:2}
.em4-table{width:100%;max-width:680px;margin:auto;border-collapse:collapse;background:#fff}.em4-table th,.em4-table td{padding:8px;border:1px solid var(--line);text-align:center}
.em4-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.em4-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px;text-align:center}.em4-card strong{display:block;font-size:25px}
.em4-code{max-width:640px;margin:auto;background:#102638;color:#f7fbf8;border-radius:12px;padding:14px;font-family:ui-monospace,monospace}.em4-code div{padding:5px 8px;border-radius:7px}.em4-code .on{background:#ffffff18}.em4-code b{color:#f2c257}
.em4-bars{height:230px;display:flex;align-items:end;gap:8px;padding:12px;border-left:2px solid #607584;border-bottom:2px solid #607584}.em4-bar{flex:1;text-align:center}.em4-bar b{display:block;background:#bcd6ed;border:2px solid #235f9b;border-bottom:0;border-radius:6px 6px 0 0;min-height:3px}.em4-bar span{font-size:11px}
.em4-box{max-width:620px;margin:16px auto;position:relative;height:80px}.em4-box-line{position:absolute;top:38px;left:10%;right:10%;height:4px;background:#607584}.em4-box-rect{position:absolute;top:18px;height:42px;border:3px solid #235f9b;background:#d8e9f755}.em4-box-med{position:absolute;top:18px;height:42px;border-left:4px solid #a4481a}
@media(max-width:600px){.em4-cards{grid-template-columns:1fr 1fr}.em4-controls .btn{flex-basis:42%}}
.em4-break{stroke:#7c8e84;stroke-width:2;stroke-dasharray:5 5}.em4-seg-a,.em4-seg-b,.em4-seg-c{stroke-width:4;fill:none;stroke-linecap:round}.em4-seg-a{stroke:#235f9b}.em4-seg-b{stroke:#146348}.em4-seg-c{stroke:#a4481a}.em4-label{font-size:12px;fill:#50665b}.em4-dot{fill:#235f9b;stroke:#fff;stroke-width:1.5}[data-view-box] svg{width:100%;height:auto;display:block;max-width:680px;margin:0 auto}

.em4-inverse-line{stroke:#7c8e84;stroke-width:2;stroke-dasharray:7 6}.em4-inverse-guide{stroke:#a9b9af;stroke-width:2;stroke-dasharray:4 5}.em4-exp-point{fill:#235f9b;stroke:#fff;stroke-width:2}.em4-log-point{fill:#f2c257;stroke:#8e671b;stroke-width:2}

.em4-trace{display:flex;align-items:center;justify-content:center;gap:7px;overflow-x:auto;max-width:760px;margin:12px auto;padding:8px}.em4-trace i{font-style:normal;font-weight:900;color:#607584}.em4-state{min-width:82px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center}.em4-state small,.em4-state strong{display:block}.em4-state strong{font-size:22px}.em4-state.current{background:var(--gold);border-color:#8e671b}.em4-state.future{opacity:.55}
.em4-bar-chart{height:185px;position:relative;display:flex;align-items:end}.em4-bar-chart>b{width:100%}.em4-target-marker{position:absolute;left:0;right:0;border-top:3px dashed #a4481a}.em4-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:680px;margin:10px auto}.em4-meta>div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center}.em4-meta strong{display:block;font-size:20px}
@media(max-width:600px){.em4-meta{grid-template-columns:1fr}}