/* ═══════════════════════════════════════════════════════════════════
   POS-SAAS-0D.2 · Clientes (vista, perfil lateral, selector del POS)
   ═══════════════════════════════════════════════════════════════════ */

.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .kpis--3 { grid-template-columns: 1fr; } }
.customers-kpis { margin-bottom: var(--s-5); }
.customers > .card__body { display: grid; gap: 0; }
.customers-list { min-width: 0; }
.customers-table tr.is-inactive th, .customers-table tr.is-inactive td { background: var(--c-surface-2); }
@container (min-width: 981px) { .customers-table td.col-phone, .customers-table td.col-total, .customers-table td.col-last { white-space: nowrap; } }

/* ── Panel lateral (modal tamaño «drawer») ── */
.modal-overlay:has(> .modal--drawer) { place-items: stretch end; padding: 0; }
.modal--drawer {
  width: min(560px, 100%); max-height: none; height: 100%; border-radius: var(--r-xl) 0 0 var(--r-xl);
  display: flex; flex-direction: column;
}
.modal--drawer .modal__body { flex: 1; }
@media (max-width: 600px) { .modal--drawer { border-radius: 0; } }

.cp-id { display: grid; gap: var(--s-3); }
.cp-id__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cp-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.cp-dl dt { color: var(--c-ink-2); font-size: var(--fs-sm); }
.cp-dl dd { margin: 0; font-weight: 600; }
.cp-addresses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cp-address { display: flex; gap: var(--s-2); align-items: flex-start; }
.cp-address .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--c-ink-2); }
.cp-block { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.cp-block__title { font-size: var(--fs-md); font-weight: 700; }
.cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-2); }
.cp-stat { display: grid; gap: 2px; padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); }
.cp-stat__label { font-size: var(--fs-sm); color: var(--c-ink-2); }
.cp-stat__value { font-size: var(--fs-lg); font-weight: 700; }
.cp-active { display: grid; gap: var(--s-2); }
.cp-active__btn, .cp-order {
  display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--touch); padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); text-align: left; cursor: pointer; color: var(--c-ink);
}
.cp-active__btn { border-color: var(--c-accent); font-weight: 600; }
.cp-active__btn:hover, .cp-order:hover { border-color: var(--c-ink); }
.cp-active__btn:focus-visible, .cp-order:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.cp-active__btn .icon:last-child { margin-left: auto; }
.cp-top { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); }
.cp-top li { display: flex; justify-content: space-between; gap: var(--s-3); }
.cp-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cp-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'id total' 'channel channel' 'pills pills'; gap: var(--s-1) var(--s-3); }
.cp-order__id { grid-area: id; display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.cp-order__channel { grid-area: channel; }
.cp-order__pills { grid-area: pills; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cp-order__total { grid-area: total; font-weight: 700; }
.cp-order.is-cancelled .cp-order__total { text-decoration: line-through; color: var(--c-ink-2); }

/* ── Formulario de cliente ── */
.cf-addresses { display: grid; gap: var(--s-2); }
.cf-address { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr) minmax(0, 180px) auto; gap: var(--s-2); align-items: center; }
.cf-address .btn--icon { width: var(--touch); height: var(--touch); }
@media (max-width: 700px) { .cf-address { grid-template-columns: minmax(0, 1fr) auto; } .cf-address > input:not(:first-child) { grid-column: 1; } }

/* ── POS · cliente del pedido ── */
.cart-customer {
  display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); min-height: var(--touch-lg);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); border: 1px dashed var(--c-line-strong); border-radius: var(--r-md);
}
.cart-customer.is-set { border-style: solid; border-color: var(--c-petrol); background: var(--c-surface); }
.cart-customer > .icon { width: 20px; height: 20px; flex: none; color: var(--c-ink-2); }
.cart-customer__text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.cart-customer__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink-2); }
.cart-customer__name { font-weight: 700; overflow-wrap: anywhere; }
.cart-customer__none { color: var(--c-ink-2); }
.cart-customer__phone { font-size: var(--fs-sm); color: var(--c-ink-2); white-space: nowrap; }
.cart-customer__actions { display: flex; align-items: center; gap: var(--s-1); }
.cart-customer .btn { min-height: var(--touch); }
.cart-customer .btn--icon { width: var(--touch); }

.cpk__results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cpk__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name go' 'meta go'; align-items: center; gap: 2px var(--s-3);
  width: 100%; min-height: var(--touch-lg); padding: var(--s-2) var(--s-4); border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-surface); text-align: left; cursor: pointer; color: var(--c-ink);
}
.cpk__item:hover { border-color: var(--c-ink); }
.cpk__item:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.cpk__name { grid-area: name; font-weight: 700; }
.cpk__meta { grid-area: meta; font-size: var(--fs-sm); color: var(--c-ink-2); }
.cpk__item .icon { grid-area: go; width: 20px; height: 20px; color: var(--c-ink-2); }
.cpk__empty { color: var(--c-ink-2); padding: var(--s-3) 0; }
.cpk__new { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-2); }
.cpk__new[hidden] { display: none; }
.cpk__new-title { font-weight: 700; margin: 0; }
.cpk__new-fields { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.cpk__new .field__error:empty { display: none; }
.cpk__new .field__error { color: var(--c-danger); font-weight: 600; font-size: var(--fs-sm); margin: 0; }
.cpk__new [aria-invalid="true"] { border-color: var(--c-danger); box-shadow: 0 0 0 1px var(--c-danger); }