/* =====================================================================
   Calculadora de refinería y venta (solo calculadora.html). Base: tarjetas y tablas del panel y de la operación.
   ===================================================================== */
.calc-head { margin-bottom: 20px; }
.calc-intro { max-width: 760px; margin: 10px 0 0; color: var(--gray-300); }
.calc-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.calc-input { position: sticky; top: calc(var(--header-h, 80px) + 12px); }
.calc-out { display: grid; gap: 20px; }
.calc-rows { display: grid; gap: 8px; }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px; gap: 8px; align-items: center; }
.calc-row input { width: 100%; padding: 9px 10px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: inherit; }
.calc-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25); }
.calc-add { justify-self: start; margin-top: 8px; }
.calc-where { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 16px; }
.calc-where select { width: 100%; max-width: none; }
.calc-total { margin: 12px 0 0; color: var(--gray-500); font-size: 0.88rem; }
.calc-rank { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; counter-reset: r; }
.calc-rank li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--gray-800); border-radius: 6px; counter-increment: r; }
.calc-rank li::before { content: counter(r); color: var(--gray-500); font-family: var(--font-display); font-weight: 700; text-align: center; }
.calc-rank li.is-top { border-color: rgba(201, 162, 39, 0.55); }
.calc-rank li.is-top::before { color: var(--gold); }
.calc-rank .btn-link { justify-self: start; font-size: 1rem; }
.calc-rank-val { color: var(--gold-light); font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-where-now { margin: 0 0 8px; color: var(--gray-300); font-family: var(--font-display); font-weight: 700; }
.calc-sell-res { padding: 12px 0; border-top: 1px solid var(--gray-800); }
.calc-sell-res:first-of-type { border-top: 0; padding-top: 0; }
.calc-sell-res .op-sub { margin-bottom: 8px; }
.calc-sell-line { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 4px 14px; align-items: start; margin-top: 6px; }
.calc-sell-label { color: var(--gray-300); font-size: 0.9rem; padding-top: 4px; }
.calc-sell-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.calc-sell-places li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 4px 10px; border-radius: 4px; color: var(--gray-300); font-size: 0.9rem; }
.calc-sell-places li.is-top { background: rgba(201, 162, 39, 0.08); color: var(--gray-100); }
.calc-sell-places strong { color: var(--gold-light); font-variant-numeric: tabular-nums; }
.calc-sell-places small { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.calc-verdict { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--gold); border-radius: 4px; background: rgba(201, 162, 39, 0.08); color: var(--gray-300); }
.calc-verdict strong { color: var(--gray-100); }
.calc-verdict.is-no { border-left-color: var(--gray-500); background: rgba(255, 255, 255, 0.03); }
@media (max-width: 900px) {
  .calc-grid { grid-template-columns: 1fr; }
  .calc-input { position: static; }
}
@media (max-width: 520px) {
  .calc-sell-line { grid-template-columns: 1fr; }
  .calc-where { grid-template-columns: 1fr; }
}