/* Calculadora de hipoteca — complementos a styles.css */
.breakdown { list-style: none; padding: 0; margin-top: .55rem; display: grid; gap: .25rem; font-size: .88rem; }
.breakdown li { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-2); }
.breakdown strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.more-options, .amort { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.more-options > summary, .amort > summary {
  cursor: pointer; list-style: none; padding: .75rem 1rem; font-weight: 600; font-size: .93rem; color: var(--ink-2);
}
.more-options > summary::-webkit-details-marker, .amort > summary::-webkit-details-marker { display: none; }
.more-options > summary::before, .amort > summary::before { content: "+ "; color: var(--accent); font-weight: 700; }
.more-options[open] > summary::before, .amort[open] > summary::before { content: "− "; }
.more-options > .stack { padding: 0 1rem 1rem; }
.amort { margin-top: 1.25rem; }
.amort > :not(summary) { margin-inline: 1rem; }
.amort > .table-wrap { margin-bottom: 1rem; }

.chart { margin: 0; }
.chart-wrap { width: 100%; min-height: 230px; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .8rem; color: var(--ink-3); margin-top: .4rem; }
.chart-legend .key { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--accent); margin-left: .4rem; }
.chart-legend .key:first-child { margin-left: 0; }
.chart-legend .key-int { border-top: 2px dashed var(--ink-2); }

#hip-results .stat .value { word-break: break-word; }

@media print {
  .tool-split { display: block; }
  .more-options, .chart, #hip-market, label[for="hip-market"] { display: none !important; }
  .amort { border: 0; }
  .amort > .table-wrap { max-height: none !important; }
  .amort > summary { padding-left: 0; }
}