/* ==========================================================================
   LAYOUTS DE PRECIOS — Stacked y Chips
   Markup: inc/price-layouts.php · Selector: Customizer → Precios Diferenciales
   ========================================================================== */

.tp-pl {
  --tp-pl-transfer: var(--color-ps-transfer, var(--color-success, #10b981));
  --tp-pl-inst: var(--color-ps-installments, var(--color-accent, #6366f1));
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-block: .625rem;
  font-size: .875rem;
  line-height: 1.4;
}
.tp-pl p { margin: 0; }
.tp-pl--card { margin-block: .375rem 0; gap: .25rem; font-size: .8rem; }

.tp-pl-logo { display: inline-block; height: 22px; width: auto; vertical-align: middle; flex-shrink: 0; }
.tp-pl--card .tp-pl-logo { height: 18px; }

/* ── STACKED ─────────────────────────────────────────────────────────── */
.tp-pl__tax { font-size: .8125rem; color: var(--color-text-muted, #64748b); }
.tp-pl__transfer,
.tp-pl__cash { color: var(--tp-pl-transfer); font-size: 1rem; }
.tp-pl__transfer strong,
.tp-pl__cash strong { font-weight: 700; }
.tp-pl--single .tp-pl__transfer strong { font-size: 1.0625rem; }
.tp-pl__cash { color: var(--color-ps-cash, #f59e0b); }
.tp-pl__inst { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; color: var(--color-text, #1e293b); }
.tp-pl__inst strong { font-weight: 700; }

.tp-pl__more { margin-top: .125rem; }
.tp-pl__more > summary {
  display: inline-block;
  cursor: pointer;
  font-size: .8125rem;
  text-decoration: underline;
  color: var(--color-text, #1e293b);
  list-style: none;
}
.tp-pl__more > summary::-webkit-details-marker { display: none; }
.tp-pl__more-body {
  margin-top: .5rem;
  padding: .75rem .875rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface, #fff);
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.tp-pl__more-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.tp-pl__more-list li { font-size: .8125rem; }

/* ── CHIPS ───────────────────────────────────────────────────────────── */
.tp-pl__transfer-box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .125rem .5rem;
  padding-top: .625rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}
.tp-pl--card .tp-pl__transfer-box { padding-top: .25rem; border-top: 0; }
.tp-pl__transfer-price { font-weight: 700; font-size: 1.0625rem; color: var(--tp-pl-transfer); }
.tp-pl--card .tp-pl__transfer-price { font-size: .9rem; }
.tp-pl__transfer-note { font-size: .8125rem; color: var(--color-text, #1e293b); }
.tp-pl--card .tp-pl__transfer-note { font-size: .72rem; color: var(--color-text-muted, #64748b); }
.tp-pl__transfer-pct { flex-basis: 100%; font-size: .8125rem; color: var(--tp-pl-transfer); }
.tp-pl__transfer-box--cash .tp-pl__transfer-price { color: var(--color-ps-cash, #f59e0b); }

.tp-pl__chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.tp-pl__chip {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 99px;
  font-size: .8125rem;
  font-weight: 700;
}
.tp-pl__chip--inst {
  background: color-mix(in srgb, var(--tp-pl-transfer) 14%, transparent);
  color: var(--tp-pl-transfer);
}
.tp-pl__chip--ship {
  background: color-mix(in srgb, var(--tp-pl-inst) 14%, transparent);
  color: var(--tp-pl-inst);
}
.tp-pl--card .tp-pl__chip { padding: .2rem .55rem; font-size: .6875rem; }
.tp-pl--card .tp-pl__chip--inst { background: color-mix(in srgb, var(--tp-pl-inst) 12%, transparent); color: var(--tp-pl-inst); }

.tp-pl__logos { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }

/* Mobile: tarjetas más compactas */
@media (max-width: 640px) {
  .tp-pl--card .tp-pl__transfer-note { display: none; }
  .tp-pl--card .tp-pl__chip { font-size: .625rem; }
}

/* ── COMPACTO ────────────────────────────────────────────────────────── */
.tp-pl--compact { gap: .25rem; }
.tp-pl--compact .tp-pl__transfer { font-size: 1rem; }
.tp-pl--compact .tp-pl__inst { font-size: .8125rem; }
.tp-pl--card.tp-pl--compact .tp-pl__transfer { font-size: .9rem; }
.tp-pl--card.tp-pl--compact .tp-pl__inst { font-size: .75rem; }
.tp-pl__pct {
  display: inline-block;
  padding: .05rem .4rem;
  border-radius: 99px;
  font-size: .6875rem;
  font-weight: 700;
  color: #fff;
  background: var(--tp-pl-transfer);
  vertical-align: middle;
}

/* ── TABLA ───────────────────────────────────────────────────────────── */
.tp-pl__table {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  background: var(--color-surface, #fff);
}
.tp-pl__tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .625rem;
  padding: .5rem .75rem;
}
.tp-pl__tr + .tp-pl__tr { border-top: 1px solid var(--color-border, #e2e8f0); }
.tp-pl__tlabel { flex: 1 1 auto; min-width: 0; font-size: .8125rem; color: var(--color-text, #1e293b); }
.tp-pl__tlogos { display: inline-flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.tp-pl__tlogos .tp-pl-logo { height: 18px; }
.tp-pl__tvalue { margin-left: auto; font-weight: 700; white-space: nowrap; }
.tp-pl__tr--transfer { background: color-mix(in srgb, var(--tp-pl-transfer) 8%, transparent); }
.tp-pl__tr--transfer .tp-pl__tvalue { color: var(--tp-pl-transfer); }
.tp-pl__tr--cash .tp-pl__tvalue { color: var(--color-ps-cash, #f59e0b); }
.tp-pl--card .tp-pl__tr { padding: .3rem .5rem; }
.tp-pl--card .tp-pl__tlabel { font-size: .72rem; }
.tp-pl--card .tp-pl__tvalue { font-size: .8125rem; }
@media (max-width: 480px) {
  .tp-pl__tlogos { order: 3; flex-basis: 100%; }
}