/* Todo va encapsulado en .tonncalc para no afectar al tema */
.tonncalc { max-width: 680px; margin: 24px auto; padding: 0 12px; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.tonncalc * { box-sizing: border-box; }

.tonncalc .tonncalc-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  padding: 28px;
}

.tonncalc h1 { color:#333; text-align:center; font-size:28px; margin: 0 0 8px; }
.tonncalc .subtitle { text-align:center; color:#666; margin-bottom:22px; font-size:14px; }

.tonncalc .info-box {
  background:#f0f8ff; border:1px solid #d0e4ff; border-radius:10px;
  padding:14px; margin-bottom:22px; font-size:13px; color:#555; line-height:1.6;
}

.tonncalc .form-group { margin-bottom:18px; }
.tonncalc label { display:block; color:#555; font-weight:600; margin-bottom:8px; font-size:14px; }

.tonncalc input[type="number"], .tonncalc select {
  width:100%; padding:12px 15px; border:2px solid #e1e1e1; border-radius:10px;
  font-size:16px; background:#f9f9f9; transition:all .25s ease;
}
.tonncalc input[type="number"]:focus, .tonncalc select:focus {
  outline:none; border-color:#667eea; background:#fff; box-shadow:0 0 0 3px rgba(102,126,234,.12);
}

.tonncalc .input-group { position:relative; }
.tonncalc .input-suffix { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#999; font-size:14px; pointer-events:none; }

.tonncalc .button-group { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:18px; }
.tonncalc button { padding:14px 20px; border:none; border-radius:10px; font-size:16px; font-weight:600; cursor:pointer; transition:all .2s ease; }

.tonncalc .btn-calculate { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:#fff; }
.tonncalc .btn-calculate:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(102,126,234,.35); }

.tonncalc .btn-clear { background:#f1f1f1; color:#666; }
.tonncalc .btn-clear:hover { background:#e7e7e7; }

.tonncalc .result-container {
  margin-top:20px; padding:20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius:15px; animation: tonncalc-slideUp .3s ease;
}
@keyframes tonncalc-slideUp { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

.tonncalc .result-title { color:#333; font-size:18px; font-weight:600; margin-bottom:10px; }
.tonncalc .result-value { font-size:34px; color:#667eea; font-weight:700; text-align:center; margin:10px 0 6px; }

.tonncalc .result-details { margin-top:12px; padding-top:12px; border-top:1px solid rgba(0,0,0,.1); }
.tonncalc .detail-row { display:flex; justify-content:space-between; margin-bottom:8px; font-size:14px; }
.tonncalc .detail-label { color:#666; }
.tonncalc .detail-value { color:#333; font-weight:600; }

.tonncalc .recommendation { margin-top:14px; padding:12px; background: rgba(102,126,234,.08); border-radius:10px; border-left:4px solid #667eea; }
.tonncalc .recommendation-title { font-weight:600; color:#667eea; margin-bottom:6px; }
.tonncalc .recommendation-text { color:#555; font-size:14px; line-height:1.6; }

.tonncalc .btn-machines {
  display:block; width:100%; margin-top:18px; padding:14px 18px; text-decoration:none; text-align:center;
  background:#afca1a; color:#fff; border-radius:10px; font-size:16px; font-weight:600;
  transition: all .2s ease; box-shadow: 0 2px 10px rgba(175,202,26,.3);
}
.tonncalc .btn-machines:hover { background:#9bb518; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(175,202,26,.4); }

@media (max-width:480px){
  .tonncalc .button-group { grid-template-columns:1fr; }
  .tonncalc .result-value { font-size:28px; }
}