/* Lista de deseos del simulador de compras */
.wl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }

.wl-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .wl-summary { grid-template-columns: 1fr 1fr; }
  .wl-summary .stat:last-child { grid-column: 1 / -1; }
}

.wl-sub { margin: 0; color: var(--muted); font-size: 13.5px; }

.wl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wl-bar .seg { min-width: 0; }

.wl-panel { padding: 8px 14px; container-type: inline-size; }
.wl-host { min-width: 0; }
.wl-none { margin: 0; padding: 28px 8px; text-align: center; color: var(--muted); }
.wl-list { list-style: none; margin: 0; padding: 0; display: grid; }

.wl-row {
  display: grid; align-items: start; gap: 12px 16px; min-width: 0; padding: 16px 4px;
  grid-template-columns: 46px minmax(0, 1fr) minmax(200px, 300px);
  grid-template-areas: 'ico main status' 'ico actions status';
  border-top: 1px solid var(--line);
}
.wl-row:first-child { border-top: 0; }
.wl-row > .wl-ico { grid-area: ico; }
.wl-row > .wl-main { grid-area: main; }
.wl-row > .wl-status { grid-area: status; }
.wl-row > .wl-actions { grid-area: actions; }

.wl-main { min-width: 0; display: grid; gap: 3px; align-content: start; }
.wl-main > b {
  font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; line-height: 1.3;
}
.wl-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; row-gap: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wl-meta .wl-sep { opacity: 0.7; }
.wl-note {
  margin: 4px 0 0; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}

.wl-status { min-width: 0; display: grid; gap: 6px; justify-items: start; align-content: start; }
.wl-pill {
  --t: var(--text);
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; line-height: 1.25; background: var(--surface-3); color: var(--t);
}
.wl-pill .icon { width: 14px; height: 14px; flex: none; }
.wl-pill > span { min-width: 0; overflow-wrap: anywhere; }
.wl-pill.is-ok { background: rgba(24, 227, 160, 0.16); --t: var(--pos); }
.wl-pill.is-warn { background: rgba(255, 176, 32, 0.18); --t: var(--amber); }
.wl-pill.is-orange { background: rgba(255, 138, 61, 0.18); --t: #FF9A55; }
.wl-pill.is-bad { background: rgba(255, 77, 106, 0.18); --t: var(--neg); }
.wl-pill.is-mute { background: var(--surface-3); --t: var(--muted); }
:root[data-theme='light'] .wl-pill.is-ok { --t: #0B7F57; }
:root[data-theme='light'] .wl-pill.is-warn { --t: #9A6200; }
:root[data-theme='light'] .wl-pill.is-orange { --t: #A84300; }
:root[data-theme='light'] .wl-pill.is-bad { --t: #C81E3A; }

.wl-why { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.wl-why b { color: var(--text); font-weight: 650; }
.wl-have { display: grid; gap: 6px; width: 100%; max-width: 260px; }
.wl-have > span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wl-have .meter { height: 8px; }

.wl-actions { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.wl-buttons { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.wl-tools { display: inline-flex; gap: 2px; }
.wl-tools .icon-btn { width: 36px; height: 36px; }

.wl-row.is-dim .wl-ico { opacity: 0.55; }
.wl-row.is-dim .wl-main { opacity: 0.85; }

.wl-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.wl-empty-actions .btn { margin-top: 0; }

/* Resumen de cuotas dentro del formulario. */
.wl-live { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--input-bg); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.wl-live:empty { display: none; }
.wl-live b { color: var(--text); font-weight: 650; }

/* Ancho medio: las acciones pasan debajo, a todo el ancho de la fila. */
@container (max-width: 820px) {
  .wl-row {
    grid-template-columns: 46px minmax(0, 1fr) minmax(190px, 260px);
    grid-template-areas: 'ico main status' 'ico actions actions';
  }
  .wl-actions { justify-content: space-between; }
}

/* Con poco ancho, el estado baja debajo del nombre. */
@container (max-width: 600px) {
  .wl-row {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas: 'ico main' 'status status' 'actions actions';
  }
  .wl-have { max-width: none; }
  .wl-actions { justify-content: space-between; }
}

@container (max-width: 380px) {
  .wl-row { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; }
  .wl-ico { width: 40px; height: 40px; border-radius: 14px; }
  .wl-ico .icon { width: 20px; height: 20px; }
  .wl-buttons { width: 100%; }
  .wl-buttons .btn { flex: 1 1 100%; justify-content: center; }
  .wl-tools { margin-inline: auto; }
}

@media (max-width: 420px) {
  .wl-panel { padding: 4px 12px; }
  .wl-bar .seg { width: 100%; }
  .wl-bar .seg button { flex: 1; justify-content: center; padding: 0 6px; font-size: 13px; }
  .wl-bar > .btn { width: 100%; justify-content: center; }
}

@media (max-width: 360px) {
  .wl-bar .seg { padding: 3px; gap: 2px; }
  .wl-bar .seg button { padding: 0 3px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-have .meter > i { transition: none; }
}

.wl-split { align-items: start; }