/* Visual language of the working thermal bench. Scoped to the calculator pages. */
.v30-lab { --lab-ink:#172b3a; --lab-muted:#526879; --lab-line:#d4e1e7; --lab-blue:#225d91; --lab-hot:#c46532; --lab-cold:#258297; background:#edf3f5; color:var(--lab-ink); }
.v30-lab .main-area { background:#edf3f5; background-image:none; padding:36px clamp(20px,3vw,52px) 60px; }
.v30-lab .page-head::before,.v30-lab .main-area::before { display:none; }
.v30-lab .page-kicker { border:0; background:none; padding:0; font-family:inherit; letter-spacing:0; color:#526879; }
.v30-lab .page-head h1 { font-size:clamp(26px,3vw,38px); font-weight:600; letter-spacing:-.035em; }
.v30-lab .eng-scale-rule { height:1px; background:#cbdce3; opacity:1; margin:20px 0; }
.v30-lab .panel { border:1px solid #d4e1e7; border-radius:16px; box-shadow:none; overflow:hidden; }
.v30-lab .panel-head { background:#f8fbfc; padding:18px 24px; }
.v30-lab .panel-body { padding:24px; }
.v30-lab .vx-fieldset { border-color:#d4e1e7; }
.v30-lab input:focus-visible,.v30-lab select:focus-visible,.v30-lab button:focus-visible,.v30-lab summary:focus-visible,.obs-resistance:focus-visible { outline:3px solid #258297; outline-offset:3px; }
.v30-observatory { box-sizing:border-box; color:#172b3a; font-family:'IBM Plex Sans','Segoe UI',sans-serif; }
.v30-observatory * { box-sizing:border-box; }
.v30-observatory:not([data-trilha=circuito]) { display:grid; grid-template-columns:minmax(300px,1.35fr) minmax(240px,1fr); align-items:center; gap:28px; margin:22px 0 28px; }
.obs-caption { font-size:12px; color:#526879; display:block; margin-bottom:5px; }
.obs-title,.obs-heading h3 { font-size:23px; line-height:1.2; letter-spacing:-.025em; font-weight:600; margin:0 0 12px; color:#172b3a; }
.obs-response { font-size:14px; line-height:1.6; max-width:62ch; margin:12px 0; color:#405b6c; min-height:2.8em; }
.obs-scene { background:#fff; border:1px solid #cbdce3; border-radius:20px; padding:8px; box-shadow:0 8px 30px #244c6112; overflow:hidden; }
.obs-scene svg { width:100%; height:auto; display:block; max-height:340px; }
.obs-scene .cold { fill:url(#obs-wall-cold); stroke:#4b96aa; }
.obs-scene .bl { fill:none; stroke:#c9884e; stroke-width:1.6; stroke-dasharray:2 5; }
.obs-scene .flowline { fill:none; stroke:#258297; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:7 11; opacity:.85; }
.obs-scene .flowline.thin { stroke-width:1.4; opacity:.6; }
.obs-scene .mol { fill:#6fb0c2; opacity:.9; }
.obs-scene .mol.thermo { fill:#e0a07a; }
.obs-scene .bubble { fill:#eef7fa; stroke:#258297; stroke-width:1.4; }
.obs-scene .drop { opacity:.95; }
.obs-chips,.obs-measure { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 14px; }
.obs-chip { display:inline-flex; flex-direction:column; gap:2px; padding:8px 12px; border-radius:12px; background:#e9f2f5; color:#526879; font-size:11px; }
.obs-chip strong { font-size:16px; color:#172b3a; font-weight:600; font-variant-numeric:tabular-nums; }
.obs-scene svg text,.obs-profile svg text { font-family:'IBM Plex Sans','Segoe UI',sans-serif; font-size:14px; fill:#526879; }
.obs-scene text { paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
.obs-scene .surface { fill:#e4edf1; stroke:#7298aa; stroke-width:1.5; }
.obs-scene .hot { fill:#f4d3bf; stroke:#c46532; stroke-width:1.5; }
.obs-scene .stream { fill:none; stroke:#258297; stroke-width:2; stroke-linecap:round; }
.obs-scene .heat { fill:none; stroke:#c46532; stroke-width:2; stroke-linecap:round; }
.obs-scene .moving { stroke-dasharray:8 10; }
.obs-scene .heat.moving { stroke-dasharray:none; stroke-width:2.4; }
/* só se movem quando a cena é tocada, repetida ou após uma alteração dos dados */
.obs-scene .moving,.obs-scene .flowline,.obs-scene .mol,.obs-scene .bubble,.obs-scene .drop { animation-play-state:paused; animation-delay:var(--d,0s); }
.v30-observatory.is-playing .obs-scene .moving,.obs-scene:hover .moving { animation:obs-flow var(--spd,1s) linear infinite; animation-play-state:running; }
.obs-scene .flowline { animation:obs-flow var(--spd,1.6s) linear infinite paused; }
.v30-observatory.is-playing .obs-scene .flowline,.obs-scene:hover .flowline { animation-play-state:running; }
.obs-scene .mol { animation:obs-drift 2.6s ease-in-out infinite paused; }
.obs-scene .bubble { animation:obs-rise 2.4s ease-in infinite paused; transform-box:fill-box; transform-origin:center; }
.obs-scene .drop { animation:obs-drain 2.2s ease-in infinite paused; }
.obs-scene :is(.moving,.flowline,.nm-flow,.mol,.bubble,.drop) { animation-delay:var(--d,0s)!important; }
.v30-observatory.is-playing .obs-scene :is(.mol,.bubble,.drop),.obs-scene:hover :is(.mol,.bubble,.drop) { animation-play-state:running; }
.obs-replay { appearance:none; border:1px solid #b3cbd6; border-radius:100px; background:#fff; padding:8px 14px; font:600 12px 'IBM Plex Sans','Segoe UI',sans-serif; color:#225d91; cursor:pointer; white-space:nowrap; transition:background .2s; }
.obs-replay:hover { background:#e6f1f5; }
.obs-replay:disabled { opacity:.5; cursor:default; }
.obs-detail { color:#526879; font-size:12px; line-height:1.6; margin-top:14px; }
.obs-detail summary { cursor:pointer; color:#225d91; }
.obs-detail p { max-width:75ch; margin:10px 0; }
.obs-measure { color:#225d91; font-size:18px; font-variant-numeric:tabular-nums; margin:8px 0 14px; }
.obs-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.obs-profile svg { display:block; width:100%; max-height:220px; overflow:visible; }
.obs-resistances { display:flex; gap:6px; margin:14px 0; align-items:stretch; }
.obs-resistance { flex:1; min-width:0; padding:10px 8px; text-align:left; border:0; border-top:4px solid #8dabb9; background:#edf4f6; border-radius:0 0 8px 8px; color:#405b6c; cursor:pointer; font:12px 'IBM Plex Sans','Segoe UI',sans-serif; transition:background .2s,border-color .2s; overflow-wrap:anywhere; }
.obs-resistance strong { display:block; color:#172b3a; font-size:16px; margin-top:5px; }
.obs-resistance[aria-pressed=true] { background:#f8e7da; border-color:#c46532; }
.obs-empty { padding:30px 20px; border:1px dashed #b3cbd6; border-radius:12px; text-align:center; color:#526879; font-size:14px; }
.obs-metrics { display:flex; gap:22px; margin:8px 0 14px; flex-wrap:wrap; font-size:12px; color:#526879; }
.obs-metrics strong { display:block; font-size:22px; color:#172b3a; font-weight:500; font-variant-numeric:tabular-nums; }
.v30-circuit .main-container { max-width:1600px; margin:auto; padding:0 28px 60px; background:none; }
.v30-circuit { background:var(--bg-app,#edf3f5); background-image:none; }
.v30-circuit .header-section { padding:32px 0 22px; margin:0; background:none; border:0; box-shadow:none; text-align:left; }
.v30-circuit .header-content { text-align:left; }
.v30-circuit .title-row { justify-content:space-between; }
.v30-circuit .main-title { font-family:'IBM Plex Sans','Segoe UI',sans-serif; font-size:clamp(26px,3.2vw,42px); letter-spacing:-.04em; font-weight:600; color:#172b3a; text-align:left; justify-content:flex-start; }
.v30-circuit .main-title>i { display:none; }
.v30-circuit .main-subtitle { text-align:left; font-size:15px; margin:8px 0 0; color:#526879; }
.v30-circuit .header-section .eng-scale-rule { display:none; }
.v30-circuit .content-wrapper { padding:0; }
.v30-circuit .lab-geometry { display:flex; align-items:center; gap:28px; background:none; border:0; border-top:1px solid #cbdce3; border-bottom:1px solid #cbdce3; border-radius:0; padding:16px 0; margin:0 0 24px; box-shadow:none; }
.v30-circuit .lab-geometry .section-title { font:500 14px 'IBM Plex Sans','Segoe UI',sans-serif; margin:0; white-space:nowrap; }
.v30-circuit .lab-geometry .section-title i { display:none; }
.v30-circuit .geometry-grid { display:flex; gap:8px; flex:1; }
.v30-circuit .geometry-card { display:flex; align-items:center; gap:10px; border:1px solid transparent; padding:10px 18px; border-radius:100px; background:transparent; box-shadow:none; transform:none; flex:0 1 auto; }
.v30-circuit .geometry-card.active { border-color:#98b8c9; background:#fff; }
.v30-circuit .geometry-icon { width:24px; height:24px; min-width:24px; margin:0; background:none; box-shadow:none; border:0; border-radius:0; font-size:18px; color:#225d91; }
.v30-circuit .geometry-title { font:500 14px 'IBM Plex Sans','Segoe UI',sans-serif; margin:0; }
.v30-circuit .geometry-desc { display:none; }
.v30-circuit .construction-section { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:start; }
.v30-circuit .layers-panel { border:0; background:transparent; padding:0; box-shadow:none; min-width:0; }
.v30-circuit .panel-title { font:600 17px 'IBM Plex Sans','Segoe UI',sans-serif; margin:0 0 18px; letter-spacing:-.015em; }
.v30-circuit .panel-title>i { display:none; }
.v30-circuit .layer-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.v30-circuit .layer-btn { margin:0; padding:13px 10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; border:1px solid #ccdce3; border-radius:12px; background:#fff; box-shadow:none; min-height:86px; text-align:left; transform:none; }
.v30-circuit .layer-btn:hover { background:#e4f0f4; border-color:#7298aa; }
.v30-circuit .layer-btn strong { font-size:13px; color:#172b3a; }
.v30-circuit .layer-btn small,.v30-circuit .layer-btn br { display:none; }
.v30-circuit #learning-wall-example { grid-column:1/-1; min-height:40px; font-size:12px; color:#225d91; background:transparent; border-style:dashed; align-items:center; order:-1; }
.v30-circuit .boundary-temps-box,.v30-circuit .lab-reference { grid-column:1/-1; border:0; border-radius:12px; background:#e2ecf0; margin:8px 0 0!important; padding:14px; box-shadow:none; }
.v30-circuit .boundary-temps-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.v30-circuit .boundary-temps-grid .field { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.v30-circuit .boundary-temps-grid input { width:100%; min-width:0; border:1px solid #b3cbd6; border-radius:6px; padding:8px; background:#fff; color:#172b3a; }
.v30-circuit .boundary-temps-box h4 { font-size:13px; color:#172b3a; }
.v30-circuit .boundary-temps-box small { font-size:11px; }
.v30-circuit .lab-reference { font-size:12px; color:#526879; }
.v30-circuit .lab-reference summary { cursor:pointer; }
.v30-circuit .lab-reference #aux-qref { padding:12px 0 0; }
.v30-circuit .circuit-panel { border:1px solid #cbdce3; border-radius:20px; background:#fff; padding:24px; box-shadow:0 8px 30px #244c6110; min-width:0; }
.v30-circuit .circuit-display { min-height:240px; border:0; border-radius:12px; background:#f7fafb; overflow:auto; }
.v30-circuit .circuit-display>div { font-size:14px; }
.v30-circuit .v30-observatory { margin-top:24px; border-top:1px solid #d4e1e7; padding-top:22px; }
.v30-circuit .results-section { margin-top:26px; }
.v30-circuit .results-section>.section-card { border:1px solid #cbdce3; border-radius:20px; box-shadow:none; background:#fff; padding:24px; }
.v30-circuit .section-title { font-size:20px; }
.v30-circuit .layer-item { animation:obs-arrive .28s ease-out; }
.v30-lab .aleta-card { border-radius:14px; box-shadow:none; transition:border-color .2s,background .2s; }
.v30-lab .aleta-card.selected { background:#e5f0f4; border-color:#258297; }
.obs-journey { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:16px 0 22px; padding:0; list-style:none; font-size:13px; color:#526879; counter-reset:etapa; }
.obs-journey li { counter-increment:etapa; display:inline-flex; align-items:center; gap:8px; padding:0; border:0; }
.obs-journey li::before { content:counter(etapa); width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; background:#e3ebf3; color:#526879; }
.obs-journey li:not(:last-child)::after { content:''; width:28px; height:2px; background:#cbdce3; margin-left:4px; }
.obs-journey li:not([aria-current])::before { background:#e3ebf3; }
.obs-journey li[aria-current=step] { color:#172b3a; font-weight:600; }
.obs-journey li[aria-current=step]::before { background:#258297; color:#fff; }
.obs-journey li.is-done::before { content:'\2713'; background:#d5ecdc; color:#2e7d32; }
@media(max-width:600px) { .obs-journey li:not(:last-child)::after { display:none; } }
.obs-result-detail { border-top:1px solid #d4e1e7; margin:0; padding:0; }
.obs-result-detail>summary { padding:18px 8px; cursor:pointer; color:#225d91; font-size:15px; font-weight:500; }
.v30-circuit .header-content { max-width:none; margin:0; }
.v30-circuit .geometry-icon i { color:#225d91!important; text-shadow:none!important; }
.v30-circuit .circuit-display { height:auto!important; }
@keyframes obs-flow { to { stroke-dashoffset:-36; } }
@keyframes obs-rise { 0% { transform:translateY(0) scale(.7); opacity:.2; } 20% { opacity:1; } 100% { transform:translateY(calc(var(--rise,100px) * -1)) scale(1.25); opacity:0; } }
@keyframes obs-drift { 0% { transform:translate(0,0); opacity:0; } 20% { opacity:1; } 80% { opacity:1; } 100% { transform:translate(var(--dx,-100px),var(--dy,0)); opacity:0; } }
@keyframes obs-drain { 0% { transform:translateY(-6px); opacity:.2; } 25% { opacity:1; } 100% { transform:translateY(30px); opacity:0; } }
@keyframes obs-arrive { from { opacity:.4; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media(max-width:1100px) { .v30-circuit .construction-section { grid-template-columns:260px minmax(0,1fr); gap:16px; } .v30-circuit .main-container { padding:0 18px 40px; } .v30-circuit .circuit-panel { padding:18px; } }
@media(max-width:720px) { .v30-circuit .construction-section { grid-template-columns:1fr; } .v30-circuit .layer-buttons { grid-template-columns:repeat(2,1fr); } .v30-circuit .lab-geometry { gap:10px; flex-wrap:wrap; } .v30-circuit .geometry-card { padding:8px 12px; } .v30-circuit .main-container { padding:0 14px 32px; } .v30-circuit .header-section { padding:22px 0; } .v30-circuit .circuit-panel { padding:16px; } .v30-observatory:not([data-trilha=circuito]) { grid-template-columns:1fr; gap:6px; padding:0 0 22px; } .obs-scene svg { max-height:180px; } .obs-heading { align-items:flex-start; flex-wrap:wrap; } .obs-resistances { flex-wrap:wrap; } .obs-resistance { flex:1 1 75px; } .v30-lab .main-area { padding:24px 16px 40px; } .v30-lab .panel-body { padding:18px; } }
@media(prefers-reduced-motion:reduce) { .v30-lab *, .v30-lab *::before,.v30-lab *::after { transition:none!important; scroll-behavior:auto!important; } }
.obs-scene svg { touch-action:none; user-select:none; }
.obs-track { fill:none; stroke:#cbdce3; stroke-width:5; stroke-linecap:round; cursor:pointer; }
.obs-track-on { fill:none; stroke:#98b8c9; stroke-width:5; stroke-linecap:round; cursor:pointer; }
.obs-handle { fill:#fff; stroke:#225d91; stroke-width:2.5; cursor:grab; filter:drop-shadow(0 2px 4px #244c6133); transition:r .15s; }
.obs-handle:hover,.obs-scene.is-dragging .obs-handle { r:13; stroke:#c46532; }
.obs-scene.is-dragging,.obs-scene.is-dragging * { cursor:grabbing!important; }
.obs-grip { stroke:#225d91; stroke-width:1.6; stroke-linecap:round; pointer-events:none; }
.obs-drag text { fill:#225d91; font-weight:600; }
/* figuras das aletas (ilustracoes-aletas.js): estilo do livro-texto */
.fin-art { display:block; width:100%; max-width:188px; height:auto; aspect-ratio:240/176; margin:0 auto 1rem; border-radius:12px; overflow:visible; background:radial-gradient(ellipse at 50% 40%,#fff 55%,#f1f6fb 100%); transition:transform .25s ease; }
.aleta-card.selected .fin-art,.aleta-card:hover .fin-art { transform:translateY(-3px) scale(1.03); }
.fin-art-preview { width:min(330px,80vw); max-width:none; margin:0 auto; background:#fff; border-radius:12px; }
.fin-label { font:italic 17px 'Times New Roman',Times,serif; fill:#222; paint-order:stroke; stroke:#fff; stroke-width:3px; }
.fin-eq { font:italic 13px 'Times New Roman',Times,serif; fill:#222; }
.fin-dim { stroke:#222; stroke-width:1.3; fill:none; }
.fin-ext { stroke:#222; stroke-width:.7; fill:none; }
.fin-guide { stroke:#222; stroke-width:.8; stroke-dasharray:4 3; fill:none; }
.fin-thermal { opacity:0; stroke:none; transition:opacity .35s ease; pointer-events:none; }
.aleta-card:hover .fin-thermal,.aleta-card.selected .fin-thermal,.fin-art:hover .fin-thermal { opacity:.82; }
.fin-chip { fill:#fff; stroke:#cbdce3; stroke-width:.8; }
.fin-art .fin-chip-text { font:600 10px 'IBM Plex Sans','Segoe UI',sans-serif; fill:#172b3a; }
.fin-probe-line { stroke:#225d91; stroke-width:1; stroke-dasharray:2 2; }
@media(max-width:700px) { .fin-art { max-width:120px; } }
@media(prefers-reduced-motion:reduce) { .fin-thermal { transition:none; } }
.v30-observatory[hidden] { display:none!important; }
/* imersão: brilho térmico, movimento ambiente, paralaxe e entrada suave */
.obs-scene { position:relative; --gh:0; --gc:0; }
.obs-scene .hot { filter:drop-shadow(0 0 calc(3px + var(--gh) * 12px) rgba(214,106,52,calc(.15 + var(--gh) * .55))); }
.obs-scene .surface.cold,.obs-scene .cold { filter:drop-shadow(0 0 calc(3px + var(--gc) * 12px) rgba(37,130,151,calc(.15 + var(--gc) * .55))); }
.obs-scene .heat { stroke-width:calc(2px + var(--hk,0) * 3px); }
.obs-scene.ambient :is(.moving,.flowline,.nm-flow,.mol,.bubble,.drop) { animation-play-state:running; }
.obs-pause { margin-left:8px; }
.v30-lab .panel,.v30-lab .eng-result,.v30-lab .result-hero,.v30-observatory:not([data-trilha=circuito]) { animation:obs-in .55s cubic-bezier(.2,.7,.2,1) both; }
.v30-lab .panel:nth-of-type(2) { animation-delay:.08s; } .v30-lab .panel:nth-of-type(3) { animation-delay:.16s; }
.v30-lab .eng-result:not(.is-secondary) { position:relative; padding-left:16px; }
.v30-lab .eng-result:not(.is-secondary)::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:4px; border-radius:4px; background:linear-gradient(#c46532,#258297); }
@keyframes obs-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.obs-replay,.obs-pause { display:none!important; }

.obs-scene .nm-line { fill:none; stroke-width:1.4; stroke-linecap:round; opacity:.7; }
.obs-scene .nm-flow { fill:none; stroke-width:3.4; stroke-linecap:round; stroke-dasharray:.1 18; animation:obs-flow var(--spd,1.6s) linear infinite paused; }
.v30-observatory.is-playing .obs-scene .nm-flow,.obs-scene:hover .nm-flow { animation-play-state:running; }
.obs-scene .hot,.obs-scene .cold { filter:none; }
.obs-handle { fill:#fff; stroke:#98b8c9; }

.fin-live .fin-thermal { opacity:.92; }