/* ═══════════════════════════════════════════════════════════════════
   POS-SAAS-0A.6 · Cobro de pedidos, link de pago y WhatsApp SIMULADO
   Sin logotipos ni colores de marca de terceros: todo con tokens propios.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Selector de pago con 3 métodos ── */
.pay-methods--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pay-methods--3 .pay-option { flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-2); font-size: var(--fs-md, 1rem); text-align: center; }
.pay-option__label { display: grid; justify-items: center; gap: 2px; line-height: 1.2; }
.pay-option__hint { font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-2); }
.pay-option:has(input:checked) .pay-option__hint { color: var(--c-petrol); }
@media (max-width: 560px) {
  .pay-methods--3 { grid-template-columns: 1fr; }
  .pay-methods--3 .pay-option { flex-direction: row; gap: var(--s-3); }
  .pay-methods--3 .pay-option__label { justify-items: start; text-align: left; }
}

/* ── Pago en el detalle de pedido ── */
.od-pay { display: grid; gap: var(--s-3); }
.od-pay__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.od-pay__past { margin: 0; padding-left: var(--s-5); color: var(--c-ink-2); }
.od-pay__wa { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px dashed var(--c-line-strong); }
.od-pay__wa p { margin: 0; }

/* ── Link de pago (QR y código ficticios) ── */
.plink { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.plink__qr { display: grid; gap: var(--s-2); justify-items: center; padding: var(--s-3); border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); }
.demo-qr { width: 150px; height: 150px; shape-rendering: crispEdges; color: var(--c-ink); }
.demo-qr__bg { fill: var(--c-surface); }
.plink__qr-note { font-size: var(--fs-sm); color: var(--c-ink-2); text-align: center; font-weight: 600; }
.plink__data { display: grid; gap: var(--s-3); min-width: 0; }
.plink__amount { margin: 0; font-size: 2rem; font-weight: 800; color: var(--c-ink); }
.plink__dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; }
.plink__dl dt { color: var(--c-ink-2); font-weight: 600; }
.plink__dl dd { margin: 0; overflow-wrap: anywhere; }
.plink__code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; color: var(--c-ink); background: var(--c-surface-2); padding: 2px 6px; border-radius: var(--r-sm); justify-self: start; }
.plink__hint { margin: var(--s-4) 0 0; color: var(--c-ink-2); }
.plink .text-small { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; }
.plink .text-small .icon { flex: none; margin-top: 2px; }
@media (max-width: 560px) { .plink { grid-template-columns: 1fr; } }

/* ── Comprobante: envío simulado por WhatsApp ── */
.rc-wa { display: grid; gap: var(--s-3); margin: var(--s-4) 0; padding: var(--s-4); border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); background: var(--c-bg); }
.rc-wa__title { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-weight: 700; }
.rc-wa .form-error:empty, .rc-wa__status:empty { display: none; }
.rc-wa__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; color: var(--c-secondary-ink); font-weight: 600; }

/* ── Caja: fila de link ── */
.kv--link .kv__value { color: var(--c-ink); }

/* ── Topbar: bandeja de mensajes simulados ── */
.topbar__inbox { position: relative; }
.topbar__inbox-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--c-primary-strong); color: var(--c-on-primary);
  font-size: 12px; font-weight: 800; line-height: 1;
}
.topbar__inbox-badge[hidden] { display: none; }

/* ── Vista previa (conversación genérica, sin imitar ninguna app) ── */
.wa-preview { display: grid; gap: var(--s-3); }
.wa-preview__stamp { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--c-demo-soft); color: var(--c-ink); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .02em; }
.wa-preview__stamp .icon { flex: none; }
.wa-preview__note { margin: 0; color: var(--c-ink-2); font-size: var(--fs-sm); text-align: center; }
.wa-chat { border: 1px solid var(--c-line); border-radius: var(--r-lg, 16px); overflow: hidden; background: var(--c-surface-2); }
.wa-chat__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.wa-chat__avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.wa-chat__from { margin: 0; font-weight: 800; }
.wa-chat__to { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.wa-chat__body { padding: var(--s-4); display: grid; }
.wa-bubble { justify-self: start; max-width: 92%; display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: 4px 16px 16px 16px; background: var(--c-surface); color: var(--c-ink); box-shadow: 0 1px 0 var(--c-line); }
.wa-bubble__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.wa-bubble__link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.wa-bubble__link .icon { width: 16px; height: 16px; flex: none; }
.wa-bubble__time { justify-self: end; font-size: 12px; color: var(--c-ink-2); }

/* ── Bandeja ── */
.wa-inbox { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.wa-inbox__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.wa-inbox__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-surface-2); color: var(--c-ink); }
.wa-inbox__text { display: grid; min-width: 0; }
.wa-inbox__text strong, .wa-inbox__text span { overflow-wrap: anywhere; }
.wa-empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-4); color: var(--c-ink-2); text-align: center; }
.wa-empty .icon { width: 32px; height: 32px; }
@media (max-width: 560px) {
  .wa-inbox__item { grid-template-columns: auto minmax(0, 1fr); }
  .wa-inbox__item > :nth-child(3), .wa-inbox__item > :nth-child(4) { grid-column: 2; justify-self: start; }
}

/* ── Toast con título y acción «Ver» ── */
.toast__msg { display: grid; gap: 2px; }
.toast__title { font-weight: 800; }
.toast__msg > span { font-weight: 500; }
.toast__action { flex: none; min-height: 40px; padding: 0 var(--s-3); align-self: center; }
.toast--wa { border-left-color: var(--c-secondary); }
.toast--wa > .icon { color: var(--c-secondary-ink); }

/* Vista dividida: los avisos van abajo a la IZQUIERDA para no tapar Cocina. */
body.toasts-left .toasts { right: auto; left: var(--s-5); width: min(380px, calc(100vw - 32px)); }

/* ── Tienda: estado de pago y acceso al mensaje simulado ── */
.store-wa { flex-wrap: wrap; }
.store-wa__btn { margin-left: auto; }
.store-wa > span { flex: 1 1 180px; min-width: 0; }