/* Tarifas (modules/pricing.js) and Portal de pedidos (modules/portal.js). Tokens from styles.css only. */

/* number with a unit after it */
.input-suffix { position: relative; display: flex; align-items: center; }
.input-suffix input { width: 100%; padding-right: 40px; }
.input-suffix > span { position: absolute; right: 11px; font-size: 12px; color: var(--text3); pointer-events: none; }
.input-suffix.inline { justify-content: flex-end; }
.input-suffix.inline input { width: 120px; height: 32px; text-align: right; padding-right: 46px; }
td .input-suffix.inline { margin-left: auto; width: max-content; }

.table-title { font-size: 13px; font-weight: 600; }
#pcTable select { height: 32px; min-width: 170px; font-size: 13px; }

.tier-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.tier-pill { font-family: var(--font-mono); font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text2); white-space: nowrap; }
.tier-pill b { font-weight: 600; color: var(--accent-text); }

.tier-editor { display: flex; flex-direction: column; gap: 8px; }
.tier-editor:empty::before { content: 'Sin tramos: el precio no cambia con los kilos.'; font-size: 13px; color: var(--text3); }
.tier-row { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text2); }
.tier-row .input-suffix { width: 120px; }
.pricing-modal .modal-card { width: min(720px, 100%); }

/* order composer: where the price comes from */
.ord-pricing { margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; color: var(--text2); background: var(--surface-3); }
.ord-pricing.warn { background: var(--red-soft); color: var(--red); }

/* portal */
.portal-settings { display: flex; flex-direction: column; gap: 18px; }
.portal-setting { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.portal-setting h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.portal-setting p { margin: 0; font-size: 13px; color: var(--text2); max-width: 60ch; }
.portal-welcome textarea { resize: vertical; }
.invite-link { display: flex; gap: 8px; }
.invite-link input { flex: 1; font-family: var(--font-mono); font-size: 12px; }

@media (max-width: 640px) {
  .tier-row { flex-wrap: wrap; }
  .invite-link { flex-direction: column; }
}