/* Shared calculator kit: panel, fields, range, segmented chips, meters, badges. Page-specific css lives in calc-*.css. */
.calc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,40px);align-items:start}
.calc-in{position:sticky;top:96px;background:var(--ink);color:var(--paper);border-radius:26px;padding:clamp(20px,2.6vw,32px);display:grid;gap:22px;box-shadow:0 24px 60px -28px rgba(14,15,10,.55)}
.calc-in h2{font-size:1.5rem;letter-spacing:-.02em;color:var(--lime)}
.calc-out{display:grid;gap:14px;min-width:0}
@media (max-width:900px){.calc{grid-template-columns:1fr}.calc-in{position:static}}

.fld{display:grid;gap:9px;border:0;margin:0;padding:0;min-width:0}
.fld>label,.fld>legend{font:600 .78rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute-on-ink);padding:0}
.fld output,.fld .val{font:700 1.7rem/1 var(--display);color:var(--paper);letter-spacing:-.02em}
.fld small{color:var(--mute-on-ink);font-size:.85rem;line-height:1.35}
.fld select,.fld input[type=number]{width:100%;font:600 1rem/1.2 var(--body);color:var(--paper);background:rgba(246,244,236,.08);border:1.5px solid rgba(246,244,236,.22);border-radius:12px;padding:.8em .9em;min-height:44px;appearance:none}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--lime) 50%),linear-gradient(135deg,var(--lime) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.fld select option{color:var(--ink);background:var(--paper)}
.fld select:focus-visible,.fld input:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* range with lime fill (--fill set by js, 0-100%) */
.rng{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:0;cursor:pointer}
.rng::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--lime) var(--fill,50%),rgba(246,244,236,.2) var(--fill,50%))}
.rng::-moz-range-track{height:8px;border-radius:8px;background:rgba(246,244,236,.2)}
.rng::-moz-range-progress{height:8px;border-radius:8px;background:var(--lime)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--lime);border:4px solid var(--ink);box-shadow:0 0 0 2px var(--lime)}
.rng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--lime);border:4px solid var(--ink);box-shadow:0 0 0 2px var(--lime)}
.rng:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:8px}

/* segmented radio chips: <div class="seg"><label><input type=radio ...><span>Texto</span></label>…</div> */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;padding:.35em 1em;min-height:44px;border-radius:999px;border:1.5px solid rgba(246,244,236,.28);font:600 .92rem/1.9 var(--body);color:var(--paper);transition:background .2s,color .2s,border-color .2s}
.seg input:checked+span{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.seg input:focus-visible+span{outline:3px solid var(--lime);outline-offset:3px}
.seg label:hover span{border-color:var(--lime)}

/* results */
.res-card{background:var(--paper-2);border:2px solid var(--ink);border-radius:20px;padding:clamp(16px,2vw,22px);display:grid;gap:10px;min-width:0}
.res-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px}
.res-head h3{font-size:1.25rem;letter-spacing:-.02em}
.res-head .sub{font:600 .8rem/1.2 var(--mono);color:var(--mute)}
.meter{height:12px;border-radius:12px;background:rgba(14,15,10,.12);overflow:hidden}
.meter>i{display:block;height:100%;width:calc(var(--v,0)*100%);max-width:100%;border-radius:12px;background:var(--ink);transition:width .5s var(--ease)}
.badge{display:inline-flex;align-items:center;gap:.45em;font:700 .8rem/1 var(--mono);padding:.5em .8em;border-radius:999px;border:2px solid var(--ink);white-space:nowrap}
.badge::before{content:"";width:.7em;height:.7em;border-radius:50%;background:currentColor}
.badge.ok{background:var(--lime);color:var(--ink)}
.badge.warn{background:#FFD37A;color:var(--ink)}
.badge.no{background:var(--paper);color:#8A1D12;border-style:dashed}
.calc-note{font-size:.88rem;line-height:1.45;color:var(--mute);border-left:4px solid var(--lime);padding-left:12px}
.calc-note a{font-weight:700}
.calc-empty{padding:clamp(24px,4vw,48px);text-align:center;border:2px dashed rgba(14,15,10,.35);border-radius:20px;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.meter>i{transition:none}}