/* DCA calculator. Base layout and inputs come from calculadoras.css. */
.dca-wrap {
  max-width: 680px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}
.dca-wrap > [hidden] { display: none; }

.dca-period { display: flex; gap: 10px; }
.dca-period .input-field { flex: 1; min-width: 0; }

.dca-status {
  margin-top: 16px;
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.5;
}
.dca-result { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.dca-result:empty { display: none; }
.dca-result .rate-value { text-align: right; overflow-wrap: anywhere; }
.dca-pos { color: var(--pos); }
.dca-neg { color: var(--neg); }
.dca-error { margin: 0; color: var(--neg); overflow-wrap: anywhere; }

/* chart: series colours validated (dataviz validator; dark surface #171c1f; light surface #fff: 3.32 / 3.72) */
.dca-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin: 0 0 8px;
  padding: 0;
  color: var(--ink-soft);
  font-size: 13px;
}
.dca-legend li { display: flex; align-items: center; gap: 6px; }
.dca-swatch { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
.dca-swatch-invested { border-top-style: dashed; border-color: #9b6fd6; }
.dca-swatch-value { border-color: #2a9d8f; }

.dca-svg { display: block; width: 100%; height: auto; touch-action: pan-y; outline: none; }
.dca-svg:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 8px; }
.dca-grid { stroke: var(--line-strong); stroke-width: 1; }
.dca-axis { fill: var(--ink-dim); font-size: 12px; font-family: var(--font-body); }
.dca-axis-y { text-anchor: end; }
.dca-axis-x { text-anchor: middle; }
.dca-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dca-line-invested { stroke: #9b6fd6; stroke-dasharray: 6 4; }
.dca-line-value { stroke: #2a9d8f; }
.dca-cross { stroke: var(--ink-dim); stroke-width: 1; visibility: hidden; }
.dca-dot { fill: #2a9d8f; stroke: var(--surface); stroke-width: 2; visibility: hidden; }
.dca-cross.on, .dca-dot.on { visibility: visible; }

.dca-readout {
  margin: 8px 0 0;
  min-height: 1.5em;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.dca-table-wrap { margin-top: 12px; }
.dca-table-wrap summary { cursor: pointer; color: var(--accent-2); font-size: 14px; }
.dca-table-scroll { max-height: 320px; overflow: auto; margin-top: 8px; }
.dca-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dca-table th, .dca-table td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dca-table th:first-child, .dca-table td:first-child { text-align: left; }
.dca-table th { color: var(--ink-soft); font-weight: 600; position: sticky; top: 0; background: var(--surface); }

.dca-note {
  margin: 0;
  color: var(--ink-dim);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 420px) {
  .main-content { padding: 36px 14px 44px; }
  .panel-card { padding: 20px 16px; }
}