/* Under > Clientes.
   Every new class starts with .unc-. The card, chip, sheet and contact button
   looks come from the existing classes (.as-card, .as-top, .fi-name, .as-amt, .as-sub, .as-st, .un-pills, .un-sec, .un-row,
   .un-addr, .un-ct / .un-ctb, .btn.ghost.sm.un-btn); here is only what the customers screen adds.
   Tap targets: 40 px or more. Nothing here may create horizontal page scroll at 360, 375, 390 and 430 px. */

/* ---- list ---- */
.unc-card .as-top { align-items: flex-start; }
.unc-card .fi-name { min-width: 0; overflow-wrap: anywhere; }
.unc-card .as-amt { white-space: nowrap; flex-shrink: 0; }
.unc-card .as-amt.unc-zero { color: var(--v-muted, var(--muted)); font-weight: 500; }
.unc-card .as-sub { overflow-wrap: anywhere; }
.unc-card .un-pills { margin-top: 8px; }
.unc-card .un-pills .as-st, .unc-det .un-pills .as-st { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.unc-card:focus-visible, .unc-ord:focus-visible { outline: 2px solid var(--v-blue, var(--dv-blue)); outline-offset: 2px; }
.unc-counts { margin-top: -4px; }

/* ---- detail sheet ---- */
.unc-det { min-width: 0; }
.unc-det .un-ct { margin: 6px 0; }
.unc-det .un-row { align-items: baseline; }
.unc-det .un-row > span { flex: 0 0 auto; }
.unc-det .un-row > b { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.unc-since { margin-top: 8px; }
.unc-sec-orders { scroll-margin-top: 56px; }   /* back from an order: the section stops under the sticky sheet title */

/* one order of the customer: a whole-row button that opens the existing order sheet */
.unc-ord { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 56px; margin: 0 0 6px; padding: 9px 8px 9px 12px;
  border: 1px solid var(--v-line, var(--line)); border-radius: 12px; background: var(--v-gray-bg, rgba(255,255,255,.05));
  color: var(--v-strong, var(--text)); font-family: var(--v-sans, inherit); font-size: 13px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.unc-ord:last-child { margin-bottom: 0; }
.unc-ord-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.unc-ord-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.unc-ord-t b { font-weight: 600; overflow-wrap: anywhere; }
.unc-ord-at { font-family: var(--v-mono, monospace); font-size: 10.5px; color: var(--v-muted, var(--muted)); white-space: nowrap; }
.unc-ord-amt { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.unc-chev { flex: 0 0 auto; width: 14px; text-align: center; font-size: 18px; line-height: 1; color: var(--v-muted, var(--muted)); }

/* one address of the customer */
.unc-addr { margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--v-line, var(--line)); border-radius: 12px; overflow-wrap: anywhere; }
.unc-addr:last-child { margin-bottom: 0; }
.unc-addr .un-acts { margin-top: 8px; }
.unc-addr .un-ct { margin: 8px 0 0; }
.unc-det .btn.sm.un-btn { flex: 0 0 auto; }
.unc-det .btn.sm.un-btn:disabled { opacity: .55; cursor: default; }
.unc-err { text-align: center; }
.unc-err .un-acts { justify-content: center; }

/* light theme: the order row and the address box sit on a white sheet */
html.v2:not([data-theme="dark"]) .unc-ord { background: #f8fafc; border-color: rgba(16,24,40,.1); }
html.v2:not([data-theme="dark"]) .unc-addr { border-color: rgba(16,24,40,.1); }
html.v2[data-theme="dark"] .unc-ord { background: rgba(255,255,255,.05); }