/* Ferramentas interativas (/ferramentas/*).
   Formulários não existiam na v6: estilos novos, namespace v6-tool-,
   tokens da home (styles.css). Sem animações — nada a fazer para
   prefers-reduced-motion. */

.v6-tool {
  background: #fff;
  border: 1px solid var(--v6-blue-150);
  border-radius: var(--v6-radius-block);
  padding: clamp(24px, 3.5vw, 48px);
  box-shadow: 0 18px 44px rgba(0, 31, 61, 0.07);
}

.v6-tool + .v6-tool { margin-top: clamp(20px, 2.5vw, 32px); }

/* displays explícitos (grid/flex) vencem o UA stylesheet do [hidden] —
   reafirmar aqui, senão blocos "escondidos" continuam na tela */
.v6-tool [hidden] { display: none !important; }

.v6-tool-form { display: grid; gap: clamp(18px, 2.2vw, 26px); }

.v6-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.v6-tool-campo { display: grid; gap: 7px; align-content: start; }

.v6-tool-campo > label,
.v6-tool-fieldset > legend {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--v6-navy);
}

.v6-tool-campo input,
.v6-tool-campo select {
  font: inherit;
  color: var(--v6-navy);
  background: #fff;
  border: 1.5px solid var(--v6-blue-140);
  border-radius: var(--v6-radius-card);
  padding: 11px 14px;
  min-height: 48px;
  width: 100%;
}

.v6-tool-campo input:focus-visible,
.v6-tool-campo select:focus-visible,
.v6-tool-pill input:focus-visible + span {
  outline: 3px solid var(--v6-blue);
  outline-offset: 2px;
}

.v6-tool-campo small { color: #56718c; }

.v6-tool-fieldset { border: 0; margin: 0; padding: 0; }
.v6-tool-fieldset > legend { padding: 0 0 8px; }

.v6-tool-pills { display: flex; flex-wrap: wrap; gap: 10px; }

.v6-tool-pill { position: relative; }

.v6-tool-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.v6-tool-pill span {
  display: inline-block;
  padding: 10px 20px;
  border: 1.5px solid var(--v6-blue-140);
  border-radius: 999px;
  font-weight: 700;
  color: var(--v6-royal);
  background: #fff;
  cursor: pointer;
}

.v6-tool-pill input:checked + span {
  background: var(--v6-royal);
  border-color: var(--v6-royal);
  color: #fff;
}

.v6-tool-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.v6-tool-erro {
  color: #a4123f;
  font-weight: 700;
  margin: 0;
}

.v6-tool-resultado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin: clamp(18px, 2.4vw, 28px) 0 0;
}

.v6-tool-resultado > div {
  background: var(--v6-alice);
  border: 1px solid var(--v6-blue-150);
  border-radius: var(--v6-radius-card);
  padding: 16px 18px;
  display: grid;
  gap: 4px;
  align-content: start;
}

.v6-tool-resultado dt { font-size: 0.9rem; color: #56718c; }

.v6-tool-resultado dd {
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
  font-weight: 800;
  color: var(--v6-navy);
}

.v6-tool-resultado dd small { font-size: 0.95rem; font-weight: 400; color: #56718c; }

/* ---------- gráfico da curva de crescimento ---------- */

.v6-tool-figura { margin: clamp(20px, 3vw, 34px) 0 0; }

.v6-tool-figura figcaption {
  font-weight: 800;
  color: var(--v6-navy);
  font-size: var(--v6-fs-body-lg);
  margin-bottom: 10px;
}

.v6-tool-grafico { position: relative; }

.v6-tool-grafico svg { display: block; width: 100%; height: auto; }

.v6-tool-grafico .v6-tool-eixo { stroke: #c7d6e6; stroke-width: 1; }
.v6-tool-grafico .v6-tool-grade { stroke: #e8eef5; stroke-width: 1; }
.v6-tool-grafico text { font-family: inherit; font-size: 12px; fill: #56718c; }
.v6-tool-grafico .v6-tool-rotulo-p { font-weight: 700; }

.v6-tool-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--v6-navy);
  color: #fff;
  border-radius: var(--v6-radius-card);
  padding: 8px 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
  display: none;
  z-index: 2;
}

.v6-tool-tabela { margin: clamp(16px, 2vw, 24px) 0 0; overflow-x: auto; }

.v6-tool-tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.v6-tool-tabela caption {
  text-align: left;
  color: #56718c;
  font-size: 0.9rem;
  padding-bottom: 8px;
}

.v6-tool-tabela th,
.v6-tool-tabela td {
  border: 1px solid var(--v6-blue-150);
  padding: 9px 12px;
  text-align: center;
  color: var(--v6-navy);
}

.v6-tool-tabela th { background: var(--v6-alice); }

.v6-tool-nota {
  margin-top: clamp(18px, 2.4vw, 28px);
  color: #56718c;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .v6-tool-grid { grid-template-columns: 1fr; }
}