/* ── COMPARADOR ─────────────────────────────────── */
#comparadorApp { display: none; }
#comparadorApp.active { display: block; }

.cmp-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}

.cmp-toolbar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--navy);
  flex: 1;
}

.cmp-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all .18s;
  letter-spacing: .03em;
  white-space: nowrap;
}

.cmp-btn-secondary {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}
.cmp-btn-secondary:hover { border-color: var(--navy); color: var(--navy); background: #EFECE5; }

.cmp-btn-primary {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
}
.cmp-btn-primary:hover { background: var(--navy-mid); }

.cmp-btn-danger {
  border: 1px solid #FFBBBB;
  background: #FFF3F3;
  color: #8B0000;
}
.cmp-btn-danger:hover { background: #FFE5E5; }

.cmp-table-outer {
  overflow-x: auto;
  padding: 20px 24px 60px;
}

.cmp-table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 13px;
}

/* Column header */
.cmp-col-hdr {
  background: var(--navy);
  color: #fff;
  padding: 10px 14px;
  min-width: 180px;
  max-width: 220px;
  vertical-align: top;
  position: relative;
}
.cmp-col-hdr:first-child {
  background: #F9F8F5;
  color: var(--muted);
  min-width: 200px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cmp-bank-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.cmp-remove-col {
  position: absolute;
  top: 6px; right: 8px;
  background: rgba(255,255,255,.15);
  border: none;
  color: rgba(255,255,255,.7);
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.cmp-remove-col:hover { background: rgba(255,80,80,.4); color: #fff; }

.cmp-add-col-hdr {
  background: #F9F8F5;
  vertical-align: middle;
  padding: 10px;
}

/* Best column */
.cmp-table.has-best .cmp-col-hdr.best-col { background: var(--gold); }
.cmp-table.has-best td.best-col { background: var(--gold-lt); }
.cmp-best-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-lt);
  display: block;
}
.cmp-table.has-best .cmp-col-hdr.best-col .cmp-best-badge { color: var(--navy); }

/* Section header row */
.cmp-section-hdr-row td {
  background: var(--navy);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
}
.cmp-section-hdr-row td:hover { background: var(--navy-mid); }
.cmp-section-hdr-row td span { margin-right: 6px; transition: transform .2s; display: inline-block; }
.cmp-section-hdr-row.collapsed td span { transform: rotate(-90deg); }
.cmp-section-tag {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
  margin-left: 8px;
  vertical-align: middle;
}
.cmp-section-tag.blocked { background: rgba(255,150,150,.2); color: rgba(255,180,180,.9); }

/* Data rows */
.cmp-row td {
  padding: 9px 14px;
  border-bottom: 1px solid #F2EFE9;
  vertical-align: middle;
  color: var(--text);
}
.cmp-row:last-child td { border-bottom: none; }
.cmp-row:hover td { background: #FAF9F5; }
.cmp-row:hover td.best-col { background: #EDD9A3; }

.cmp-row-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: #F9F8F5 !important;
  white-space: nowrap;
}

/* Placeholder rows */
.cmp-placeholder-row td {
  padding: 20px 14px;
  text-align: center;
  color: #C8C3B8;
  font-size: 12px;
  font-style: italic;
  border-bottom: 1px solid #F2EFE9;
}
.cmp-placeholder-row td:first-child { text-align: left; }

/* Cell with overwrite */
.cmp-cell-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cmp-cell-input {
  flex: 1;
  border: none;
  background: none;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: var(--text);
  outline: none;
  min-width: 0;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background .15s;
}
.cmp-cell-input:focus { background: rgba(200,146,42,.08); }

.cmp-cell-mode {
  font-size: 11px;
  flex-shrink: 0;
  opacity: .5;
  cursor: help;
}
.cmp-cell-mode.manual { color: var(--navy); opacity: .8; }

.cmp-cell-reset {
  font-size: 10px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.cmp-cell-wrap:hover .cmp-cell-reset { display: flex; }
.cmp-cell-reset:hover { background: #FFF3F3; border-color: #FFBBBB; color: #8B0000; }

.cmp-calc-value {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  font-variant-numeric: tabular-nums;
}
.cmp-calc-value.highlight { font-weight: 600; color: var(--navy); }

.cmp-row-total td {
  background: #F0EDE6 !important;
  font-weight: 600;
  color: var(--navy);
  border-top: 1px solid #D1CCBA;
}
.cmp-row-total td.best-col { background: #EDD9A3 !important; }

.cmp-cell-select {
  width: 100%;
  border: none;
  background: none;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: var(--text);
  outline: none;
  cursor: pointer;
  padding: 2px 0;
}

.cmp-cell-num {
  width: 100%;
  border: none;
  background: none;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: var(--text);
  outline: none;
  padding: 2px 4px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  transition: background .15s;
}
.cmp-cell-num:focus { background: rgba(200,146,42,.08); }

.cmp-val { font-variant-numeric: tabular-nums; font-size: 13px; }
.cmp-val.dim { color: var(--muted); }
.cmp-val.positive { color: #8B0000; }

.cmp-cell-num, .cmp-cell-select {
  width: 100%;
  border: none;
  background: none;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: var(--text);
  outline: none;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background .15s;
  min-width: 0;
}
.cmp-cell-num:focus, .cmp-cell-select:focus { background: rgba(200,146,42,.08); }
.cmp-cell-num { text-align: right; font-variant-numeric: tabular-nums; }

.cmp-val { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.cmp-val.dim { color: #C8C3B8; }
.cmp-val.positive { color: #8B4000; font-weight: 500; }

.cmp-row-total td {
  font-weight: 600;
  background: #F4F1EA !important;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.cmp-row-total td.best-col { background: #EDD9A3 !important; }

@media (max-width: 600px) {
  .cmp-toolbar {
    padding: 10px 12px;
    gap: 6px;
    flex-wrap: wrap;
    position: sticky;
    top: 96px;
    z-index: 140;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .cmp-toolbar-title { font-size: 14px; width: 100%; }
  .cmp-btn { font-size: 11px; padding: 6px 10px; }
  .cmp-table-outer { padding: 8px 0 60px; -webkit-overflow-scrolling: touch; }
  .cmp-col-hdr { min-width: 140px; }
}