/* ---------- 7. Tarjetas-botón de calculadoras ---------- */
.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.calc-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px;text-align:left;transition:transform .25s,box-shadow .25s,border-color .25s;
  display:flex;flex-direction:column;align-items:flex-start;box-shadow:var(--shadow-sm);
}
.calc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line-2)}
.calc-ico{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--indigo-soft);color:var(--indigo);
}
.calc-card h3{font-size:1.28rem;margin-bottom:8px}
.calc-card p{color:var(--ink-soft);font-size:.95rem;flex:1}
.calc-open{
  margin-top:18px;font-family:var(--font-ui);font-weight:600;font-size:.92rem;color:var(--indigo);
  display:inline-flex;align-items:center;gap:7px;transition:gap .2s;
}
.calc-card:hover .calc-open{gap:12px}

/* ---------- 8. Panel de calculadora activa ---------- */
.calc-stage{margin-top:48px}
.calc-panel{display:none;animation:fade .4s ease}
.calc-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel-inner{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;
}
.panel-form{padding:42px}
.panel-form .tag{font-family:var(--font-ui);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo)}
.panel-form h3{font-size:1.7rem;margin:10px 0 6px}
.panel-form>p{color:var(--ink-soft);font-size:.96rem;margin-bottom:26px}

.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-ui);font-weight:600;font-size:.88rem;margin-bottom:8px;color:var(--ink)}
.field input,.field select{
  width:100%;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:12px;
  font-size:1rem;background:var(--paper);transition:border-color .2s,background .2s;color:var(--ink);
}
.field input:focus,.field select:focus{outline:none;border-color:var(--indigo);background:#fff}
.row-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row-grid.three{grid-template-columns:1fr .7fr .7fr}

/* filas dinámicas (media ponderada / nota final) */
.dyn-row{display:grid;gap:10px;align-items:center;margin-bottom:10px}
.dyn-row.parts{grid-template-columns:1fr .7fr .7fr auto}
.dyn-row.weighted{grid-template-columns:1.4fr .8fr .8fr auto}
.dyn-row input{padding:12px 14px;border:1.5px solid var(--line-2);border-radius:11px;background:var(--paper);font-size:.95rem}
.dyn-row input:focus{outline:none;border-color:var(--indigo);background:#fff}
.del-row{width:42px;height:42px;border-radius:11px;background:var(--coral-soft);color:var(--coral);display:grid;place-items:center;transition:background .2s;flex:0 0 auto}
.del-row:hover{background:var(--coral);color:#fff}
.add-row{
  margin:6px 0 22px;font-family:var(--font-ui);font-weight:600;font-size:.9rem;color:var(--indigo);
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;border:1.5px dashed var(--line-2);transition:border-color .2s,background .2s;
}
.add-row:hover{border-color:var(--indigo);background:var(--indigo-soft)}
.dyn-head{display:grid;gap:10px;font-family:var(--font-ui);font-weight:600;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;padding:0 2px}
.dyn-head.parts{grid-template-columns:1fr .7fr .7fr 42px}
.dyn-head.weighted{grid-template-columns:1.4fr .8fr .8fr 42px}

.btn-calc{
  width:100%;background:var(--indigo);color:#fff;padding:16px;border-radius:13px;
  font-family:var(--font-ui);font-weight:600;font-size:1.02rem;margin-top:8px;
  transition:transform .2s,box-shadow .2s;box-shadow:0 14px 30px -14px rgba(58,58,255,.7);
}
.btn-calc:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(58,58,255,.8)}

/* panel de resultados */
.panel-result{
  padding:42px;background:linear-gradient(165deg,var(--paper-2),#f3f2f8);
  display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--line);
}
.result-card{
  background:var(--card);border-radius:var(--r-md);padding:32px;text-align:center;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:border-color .3s;
}
.result-empty{color:var(--ink-soft);font-family:var(--font-ui);font-size:.95rem}
.result-empty svg{margin:0 auto 14px;color:var(--line-2)}
.result-num{font-family:var(--font-display);font-size:4rem;font-weight:600;line-height:1;color:var(--ink)}
.result-unit{font-size:1.4rem;color:var(--ink-soft);font-family:var(--font-ui)}
.result-state{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 18px;border-radius:30px;
  font-family:var(--font-ui);font-weight:600;font-size:.92rem;
}
.result-extra{margin-top:18px;font-size:.95rem;color:var(--ink-soft);line-height:1.5}
.result-extra b{color:var(--ink)}
/* barra de progreso */
.bar{height:12px;border-radius:30px;background:var(--paper-2);margin-top:22px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;border-radius:30px;width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
/* estados de color */
.is-good .result-num{color:var(--mint)} .is-good .result-state{background:var(--mint-soft);color:#147a60} .is-good .bar i{background:var(--mint)} .is-good.result-card{border-color:#bdeede}
.is-mid .result-num{color:var(--amber)} .is-mid .result-state{background:var(--amber-soft);color:#b9651c} .is-mid .bar i{background:var(--amber)} .is-mid.result-card{border-color:#f3d9bd}
.is-bad .result-num{color:var(--coral)} .is-bad .result-state{background:var(--coral-soft);color:#c0334a} .is-bad .bar i{background:var(--coral)} .is-bad.result-card{border-color:#f3c3cb}
.is-info .result-num{color:var(--indigo)} .is-info .result-state{background:var(--indigo-soft);color:var(--indigo)} .is-info .bar i{background:var(--indigo)} .is-info.result-card{border-color:var(--line-2)}