.calculadora-itb {
  --itb-color-normal: #1f7a3f;
  --itb-color-altered: #b45309;
  --itb-color-critical: #b91c1c;
  --itb-border: #d7dee8;
  --itb-surface: #ffffff;
  --itb-surface-soft: #f8fafc;
  --itb-text: #172033;
  --itb-muted: #5f6b7a;

  max-width: 1120px;
  margin: 24px auto;
  padding: 24px;
  color: var(--itb-text);
  background: var(--itb-surface);
  border: 1px solid var(--itb-border);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
}

.calculadora-itb *,
.calculadora-itb *::before,
.calculadora-itb *::after {
  box-sizing: border-box;
}

.calculadora-itb__header {
  margin-bottom: 20px;
}

.calculadora-itb__title {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.2;
}

.calculadora-itb__intro,
.calculadora-itb__disclaimer,
.calculadora-itb__note {
  color: var(--itb-muted);
}

.calculadora-itb__layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 320px) minmax(220px, 1fr);
  grid-template-areas:
    "arm-right image arm-left"
    "ankle-right image ankle-left";
  gap: 20px;
  align-items: center;
}

.calculadora-itb__panel {
  padding: 18px;
  background: var(--itb-surface-soft);
  border: 1px solid var(--itb-border);
  border-radius: 16px;
}

.calculadora-itb__panel h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.calculadora-itb__panel--arm-right {
  grid-area: arm-right;
}

.calculadora-itb__panel--arm-left {
  grid-area: arm-left;
}

.calculadora-itb__panel--ankle-right {
  grid-area: ankle-right;
}

.calculadora-itb__panel--ankle-left {
  grid-area: ankle-left;
}

.calculadora-itb__image-wrap {
  grid-area: image;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 520px;
  padding: 10px;
  border: 1px dashed var(--itb-border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.calculadora-itb__image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 560px;
  object-fit: contain;
}

.calculadora-itb__image-fallback {
  display: none;
  padding: 32px;
  text-align: center;
  color: var(--itb-muted);
}

.calculadora-itb--image-error .calculadora-itb__image {
  display: none;
}

.calculadora-itb--image-error .calculadora-itb__image-fallback {
  display: block;
}

.calculadora-itb__field + .calculadora-itb__field {
  margin-top: 14px;
}

.calculadora-itb__field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.calculadora-itb__input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calculadora-itb__input-row input {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 1.15rem;
  border: 1px solid #9aa6b2;
  border-radius: 10px;
  background: #ffffff;
}

.calculadora-itb__input-row input:focus,
.calculadora-itb__button:focus {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

.calculadora-itb__unit {
  flex: 0 0 auto;
  color: var(--itb-muted);
  font-weight: 700;
}

.calculadora-itb__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.calculadora-itb__button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: #1d4ed8;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.calculadora-itb__button--secondary {
  background: #ffffff;
  color: #1d4ed8;
}

.calculadora-itb__messages {
  margin-top: 18px;
}

.calculadora-itb__messages ul {
  margin: 0;
  padding: 14px 18px 14px 34px;
  border-left: 4px solid var(--itb-color-altered);
  border-radius: 12px;
  background: #fffbeb;
}

.calculadora-itb__results {
  margin-top: 24px;
}

.calculadora-itb__results h3 {
  margin-bottom: 12px;
}

.calculadora-itb__result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.calculadora-itb__result-card {
  padding: 18px;
  border: 1px solid var(--itb-border);
  border-left: 6px solid var(--itb-border);
  border-radius: 16px;
  background: #ffffff;
}

.calculadora-itb__result-card h4 {
  margin: 0 0 10px;
}

.calculadora-itb__result-card p {
  margin: 6px 0;
}

.calculadora-itb__abi {
  font-size: 1.25rem;
}

.calculadora-itb__result-card--normal {
  border-left-color: var(--itb-color-normal);
}

.calculadora-itb__result-card--altered {
  border-left-color: var(--itb-color-altered);
}

.calculadora-itb__result-card--critical {
  border-left-color: var(--itb-color-critical);
  background: #fff5f5;
}

.calculadora-itb__disclaimer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--itb-border);
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .calculadora-itb {
    padding: 18px;
  }

  .calculadora-itb__layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "image image"
      "arm-right arm-left"
      "ankle-right ankle-left";
  }

  .calculadora-itb__image-wrap {
    min-height: 360px;
  }

  .calculadora-itb__image {
    max-height: 360px;
  }

  .calculadora-itb__result-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .calculadora-itb {
    margin: 16px 0;
    padding: 14px;
    border-radius: 12px;
  }

  .calculadora-itb__layout {
    display: block;
  }

  .calculadora-itb__image-wrap,
  .calculadora-itb__panel {
    margin-bottom: 14px;
  }

  .calculadora-itb__image-wrap {
    min-height: 260px;
  }

  .calculadora-itb__image {
    max-height: 280px;
  }

  .calculadora-itb__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .calculadora-itb__button {
    width: 100%;
  }
}