/* Estilos propios de esta página. La base común está en assets/kalculia-ui.css. */
.extra-toggle-label { font-size: .9rem; font-weight: 700; color: var(--text); }
.extra-panel { position: relative; padding: var(--s-4); border-radius: var(--radius-lg); background: var(--surface-2); margin-bottom: var(--s-5); }
#ap-chart { display: block; width: 100%; cursor: crosshair; }
#ap-result .cc-hero-card + .calc-result-grid { margin-top: var(--s-4); }
.amort-table tbody tr.is-extra-row td { background: var(--accent-soft); font-weight: 700; }

/* Móvil: importe y plazo en la misma fila */
@media (max-width: 479px) {
  .field-row:has(#ap-principal) { grid-template-columns: 3fr 2fr; align-items: end; }
}

/* Móvil: los 3 sistemas en una lista de filas iguales (nombre y descripción en una línea) */
@media (max-width: 559px) {
  .radio-row:has(> .radio-pill--stack) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .radio-row:has(> .radio-pill--stack) > .radio-pill--stack { min-width: 0; align-items: center; padding: var(--s-3); }
  .radio-pill--stack span { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); }
  .amort-table td:first-child { color: var(--text-muted); }
}