.compare {
  display: grid;
  gap: var(--space-5);
  margin-block: var(--space-5) var(--space-7);
  scroll-margin-top: var(--space-4);
}
.compare-form-col, .compare-result {
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-width: 0;
}
.compare-models, .compare-periods { margin-block-end: var(--space-5); }
.compare-models legend, .compare-periods legend { padding: 0; margin-block-end: var(--space-2); }
.compare-choices { display: grid; gap: var(--space-2); }
.compare-choices .choice input { width: 22px; height: 22px; }
.compare-amounts .field { margin-block-end: var(--space-5); }
.compare-periods-grid { display: grid; gap: var(--space-3); }
.compare-period { margin-block-end: 0; }
.compare-period input[type="number"] { max-width: 160px; }
.compare-fields:disabled .choice { opacity: 0.6; cursor: not-allowed; }
@media (min-width: 560px) { .compare-periods-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 900px) {
  .compare-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compare-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) var(--space-6); align-items: start; }
  .compare-amounts { display: grid; gap: var(--space-3); }
  .compare-periods { margin-block-end: var(--space-3); }
}

.compare-notices > .notice:last-child { margin-block-end: var(--space-4); }
.compare-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  font-weight: var(--weight-bold);
}
.compare-best-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--success-tint);
  color: var(--success);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  vertical-align: middle;
}
.compare-best-mark .icon { width: 18px; height: 18px; }

.compare-table-wrap { margin-block-end: var(--space-5); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; margin: 0; font-size: var(--text-legal); border: var(--border-width) solid var(--line); border-radius: var(--radius-md); }
.compare-table caption { text-align: start; padding: 0 0 var(--space-3); font-weight: var(--weight-bold); caption-side: top; }
.compare-table th, .compare-table td { padding: var(--space-3) var(--space-3); text-align: end; border-block-start: var(--border-width) solid var(--line); vertical-align: top; overflow-wrap: normal; white-space: nowrap; }
.compare-table thead th { background: var(--paper); color: var(--muted); font-size: var(--text-sm); border-block-start: 0; white-space: normal; min-width: 6.5em; }
.compare-table th[scope="row"], .compare-table thead th:first-child { text-align: start; white-space: normal; }
.compare-table th[scope="row"] { font-weight: var(--weight-bold); min-width: 9em; }
.compare-table td[data-label="Cost total"], .compare-table td[data-label="Total de rambursat"] { font-weight: var(--weight-bold); }
.compare-table tr.compare-best { background: var(--success-tint); }
.compare-table tr.compare-best th[scope="row"] { color: var(--success); }
.compare-assumptions { font-size: var(--text-legal); color: var(--muted); margin-block-end: var(--space-5); }
.compare-assumptions h3 { font-size: var(--text-lg); color: var(--ink); margin-block-end: var(--space-2); }
.compare-assumption { margin-block-end: var(--space-3); }
.compare-assumption h4 { font-family: var(--font-body); font-size: var(--text-legal); color: var(--ink); margin-block-end: var(--space-1); }
.compare-assumption ul { margin: 0; padding-inline-start: 1.2em; }
.compare-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-block-start: var(--space-4); border-block-start: var(--border-width) solid var(--line); }
.compare-actions .button { flex: 1 1 200px; }

@media (max-width: 768px) {
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table-wrap { overflow: visible; }
  .compare-table { border: 0; border-radius: 0; }
  .compare-table th, .compare-table td { white-space: normal; overflow-wrap: anywhere; }
  .compare-table caption { display: block; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .compare-table tr {
    margin-block-end: var(--space-3);
    border: var(--border-width) solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
  }
  .compare-table tr.compare-best { border-color: var(--success); }
  .compare-table th[scope="row"] { text-align: start; background: var(--paper); border-block-start: 0; padding: var(--space-3) var(--space-4); }
  .compare-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: baseline;
    text-align: end;
    padding: var(--space-2) var(--space-4);
  }
  .compare-table td::before { content: attr(data-label); text-align: start; color: var(--muted); font-weight: var(--weight-regular); }
  .compare-best-mark { white-space: normal; }
}

.compare-mechanics { margin-block-end: var(--space-5); }
.compare-mechanics dt { font-weight: var(--weight-bold); margin-block-end: var(--space-1); }
.compare-mechanics dd { margin: 0; }

.avantaje-hero { display: grid; gap: var(--space-5); align-items: center; margin-block-end: var(--space-6); }
.avantaje-illustration { max-width: min(100%, 420px); margin-inline: auto; }
@media (min-width: 900px) { .avantaje-hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .avantaje-illustration { margin-inline: 0 auto; } }
.tool-cards { margin-block-end: var(--space-7); }
.tool-card { display: flex; flex-direction: column; gap: var(--space-2); }
.tool-card .button { margin-block-start: auto; align-self: flex-start; }
.tool-card-icon { margin: 0 0 var(--space-1); color: var(--primary); }
.tool-card-icon .icon { width: 32px; height: 32px; }
.avantaje-actions { margin-block: var(--space-6); }

.saved { margin-block: var(--space-5) var(--space-7); }
.saved-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-5); }
.saved-count { margin: 0; color: var(--muted); font-weight: var(--weight-bold); }
.saved-list { display: grid; gap: var(--space-4); margin-block-end: var(--space-6); }
@media (min-width: 900px) { .saved-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.saved-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.saved-card-stale { border-color: var(--accent); }
.saved-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.saved-card-title { font-size: var(--text-xl); margin: 0; }
.saved-params { margin: 0; border-block-start: var(--border-width) solid var(--line); }
.saved-param { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-2) 0; border-block-end: var(--border-width) solid var(--line); align-items: baseline; }
.saved-param dt { color: var(--muted); }
.saved-param dd { margin: 0; text-align: end; font-weight: var(--weight-bold); }
.saved-result { margin: 0; font-weight: var(--weight-bold); }
.saved-card .notice { margin: 0; }
.saved-recalc { align-self: flex-start; }
.saved-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: var(--border-width) solid var(--line); }
.saved-choice { flex: 1 1 100%; }
.saved-actions .button { flex: 1 1 140px; }
.saved-compare { margin-block-start: var(--space-6); padding: var(--space-5); background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-lg); }

@media print {
  .compare { display: block; }
  .compare-form-col, .compare-result, .saved-compare, .saved-card { border: 0; padding: 0; box-shadow: none; position: static; }
  .compare-form, .compare-actions, .saved-actions, .saved-toolbar, .saved-choice, .avantaje-actions, .tool-card .button { display: none !important; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: revert; }
  .compare-table thead { display: table-header-group; position: static; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; }
  .compare-table tr { break-inside: avoid; page-break-inside: avoid; border: 0; box-shadow: none; }
  .compare-table th, .compare-table td { border-top: 0.5pt solid #999; padding: 3pt 6pt; text-align: right; }
  .compare-table td::before { content: none; }
  .compare-table tr.compare-best { background: #eee; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .compare-best-mark { background: transparent; color: #000; border: 0.5pt solid #000; }
  .compare-assumptions, .compare-assumption h4, .saved-param dt { color: #000; }
}