/* ==========================================================================
   CALCULADORA DE MATERIAL (calculadora.html)
   ========================================================================== */

.page-card.calc { max-width: 1040px; }

/* Passo a passo no topo */
.calc-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--gray-500);
}

.calc-steps li { display: flex; align-items: center; gap: var(--space-2); }

.calc-steps strong {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: var(--fs-xs);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 50%;
}

.calc-intro { margin: calc(-1 * var(--space-2)) 0 var(--space-5); color: var(--navy-900); font-weight: 600; }

.calc-title { margin-bottom: 2px; font-weight: 800; color: var(--navy-900); }

/* Abas: pintura, parede, contrapiso, piso */
.calc-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.calc-tab {
  flex: none;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy-900);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.calc-tab:hover { border-color: var(--gray-300); }

.calc-tab.is-active {
  color: var(--white);
  background: var(--navy-900);
  border-color: var(--navy-900);
}

.calc-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 860px) {
  .calc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.calc-check { font-size: var(--fs-sm); }

/* Resultado */
.calc-result {
  padding: var(--space-5);
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
}

.calc-empty { color: var(--gray-500); text-align: center; padding: var(--space-6) 0; }

.calc-summary { font-size: var(--fs-sm); color: var(--gray-500); }
.calc-summary strong { color: var(--navy-900); }

.calc-lines {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.calc-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
}

.calc-line__img img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--white);
}

.calc-line__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.calc-line:not(:has(.calc-line__img)) .calc-line__body { grid-column: 1 / -1; }

.calc-line__what { font-size: var(--fs-sm); color: var(--gray-500); }
.calc-line__what strong { color: var(--ink); }

.calc-line__product { font-size: var(--fs-sm); line-height: 1.35; color: var(--ink); }
.calc-line__product a:hover { text-decoration: underline; }

.calc-line__warn { font-size: var(--fs-xs); color: #a14a00; }
.calc-line__warn a { font-weight: 700; text-decoration: underline; }

.calc-line__swap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

.calc-line__swap select {
  width: 100%;
  min-width: 0;
  flex: 1;
  min-height: 32px;
  text-overflow: ellipsis;
  padding: 0 var(--space-2);
  font-size: var(--fs-xs);
  color: var(--ink);
  background: var(--white);
  border: 1px solid #c9d1de;
  border-radius: var(--radius-sm);
}

.calc-line__price { font-weight: 800; color: var(--navy-900); white-space: nowrap; }

.calc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
  font-weight: 700;
  color: var(--navy-900);
}

.calc-total strong { font-size: var(--fs-xl); font-weight: 900; }

.calc-how {
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--gray-500);
  line-height: 1.6;
}

.calc-how summary { cursor: pointer; font-weight: 700; color: var(--navy-900); }
.calc-how p { margin-top: var(--space-2); }
.calc-how a { font-weight: 700; color: var(--navy-700); text-decoration: underline; }

@media (max-width: 480px) {
  .calc-line { grid-template-columns: 52px minmax(0, 1fr); }
  .calc-line__img img { width: 52px; height: 52px; }
  .calc-line__price { grid-column: 2; }
}