/* "Ventas", measured on Fresha at 1280 px. */
.team-page.sl-page { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.sl-wrap { max-width: 1200px; margin: 0 auto; }
.sl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sl-head h1 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.sl-head h1 .count { height: 20px; min-width: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 600 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sl-head .acts { display: flex; gap: 8px; flex: none; }
.sl-lead { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sl-lead a { color: var(--accent); text-decoration: none; }
.sl-tools { margin-top: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sl-tools .t-search { width: 256px; }
.sl-tools .sp { flex: 1; }
.sl-day { display: inline-flex; align-items: center; }
.sl-day .tbtn { border-radius: 0; margin-left: -1px; }
.sl-day .tbtn:first-child { border-radius: 999px 0 0 999px; margin-left: 0; width: 36px; padding: 0; }
.sl-day .tbtn:last-child { border-radius: 0 999px 999px 0; width: 36px; padding: 0; }
.sl-day input[type=date] { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.sl-card { background: var(--db-ffffff, #fff); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .1); }
.sl-two { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sl-sum { padding: 24px; }
.sl-sum h2 { margin: 0 0 16px; font: 600 20px/28px var(--font); }
.sl-sum table { width: 100%; border-collapse: collapse; font: 400 15px/20px var(--font); }
.sl-sum th { padding: 12px 8px; text-align: right; font-weight: 600; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sl-sum th:first-child, .sl-sum td:first-child { text-align: left; padding-left: 0; }
.sl-sum td { padding: 14px 8px; text-align: right; border-bottom: 1px solid var(--de-f2f2f2, rgb(242, 242, 242)); }
.sl-sum tr.total td { font-weight: 600; border-bottom: 0; }
.sl-pill { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; font: 500 13px/16px var(--font); white-space: nowrap; }
.sl-pill.green { background: var(--db-edfbe9, rgb(237, 251, 233)); color: var(--df-1f8900, rgb(31, 137, 0)); }
.sl-pill.orange { background: var(--db-fff4de, rgb(255, 244, 222)); color: var(--df-b7570b, rgb(183, 87, 11)); }
.sl-pill.red { background: var(--db-feeceb, rgb(254, 236, 235)); color: var(--df-d4163a, rgb(212, 22, 58)); }
.sl-pill.grey { background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-767676, rgb(118, 118, 118)); }
.sl-tabs { margin: 24px 0 0; padding: 0; list-style: none; display: flex; gap: 4px; }
.sl-tabs li { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font: 600 15px/20px var(--font); cursor: pointer; }
.sl-tabs li:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.sl-tabs li[aria-selected="true"] { background: var(--ink); color: var(--do-ffffff, #fff); }
.sl-tw { margin-top: 16px; overflow-x: auto; background: var(--db-ffffff, #fff); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .1); }
.sl-t { width: 100%; border-collapse: collapse; font: 400 15px/20px var(--font); white-space: nowrap; }
.sl-t th { padding: 16px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); user-select: none; }
.sl-t th.sort { cursor: pointer; }
.sl-t th svg { display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -3px; }
.sl-t td { padding: 16px; border-bottom: 1px solid var(--de-f2f2f2, rgb(242, 242, 242)); }
.sl-t tr.click { cursor: pointer; }
.sl-t tr.click:hover td { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.sl-t .ref, .sl-t .lk { color: var(--accent); text-decoration: none; }
.sl-t a.lk:hover { text-decoration: underline; }
.sl-foot { margin: 0; padding: 18px 0 19px; text-align: center; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sl-foot b { font-weight: 600; }
.sl-empty { padding: 64px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sl-empty svg { width: 40px; height: 40px; color: var(--df-acacac, rgb(172, 172, 172)); }
.sl-empty b { margin-top: 16px; font: 600 17px/24px var(--font); }
.sl-empty p { margin: 4px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sl-empty .tbtn { margin-top: 20px; }
.sl-reg { margin-top: 24px; padding: 24px; display: flex; align-items: center; gap: 16px; max-width: 642px; }
.sl-reg .t { flex: 1; }
.sl-reg b { display: block; font: 600 17px/24px var(--font); }
.sl-reg small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sl-reg strong { font: 600 20px/28px var(--font); }
.sl-h2 { margin: 40px 0 0; font: 600 20px/28px var(--font); }
.sl-drawer { position: fixed; inset: 0 0 0 auto; z-index: 55; width: min(560px, 100%); background: var(--db-ffffff, #fff); box-shadow: -8px 0 40px rgba(19, 19, 19, .14); display: flex; flex-direction: column; animation: sl-in .25s cubic-bezier(.16, 1, .3, 1); }
@keyframes sl-in { from { transform: translateX(40px); opacity: 0; } }
.sl-drawer .hd { padding: 24px 32px 16px; display: flex; align-items: flex-start; gap: 12px; }
.sl-drawer .hd h2 { margin: 0; flex: 1; font: 600 24px/32px var(--font); }
.sl-drawer .bd { flex: 1; overflow-y: auto; padding: 0 32px 32px; }
.sl-drawer .ft { padding: 16px 32px; display: flex; gap: 8px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sl-drawer .ft .tbtn { flex: 1; }
.sl-lines { margin: 16px 0 0; padding: 0; list-style: none; }
.sl-lines li { padding: 12px 0; display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--de-f2f2f2, rgb(242, 242, 242)); font: 400 15px/20px var(--font); }
.sl-lines li small { display: block; color: var(--df-767676, rgb(118, 118, 118)); }
.sl-lines li.b { font-weight: 600; }

/* ---------- Checkout ---------- */
.co { position: fixed; inset: 0; z-index: 60; background: var(--db-ffffff, #fff); display: grid; grid-template-columns: minmax(0, 1fr) 480px; }
.co-x { position: absolute; top: 12px; left: 12px; z-index: 2; width: 48px; height: 48px; border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.co-l { overflow-y: auto; padding: 24px 32px 48px 104px; }
.co-r { overflow-y: auto; padding: 20px 20px 24px; border-left: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; gap: 16px; }
.co-crumbs { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font: 500 15px/20px var(--font); color: var(--df-acacac, rgb(172, 172, 172)); }
.co-crumbs .on { color: var(--ink); }
.co-crumbs svg { width: 16px; height: 16px; }
.co-h { margin: 4px 0 24px; font: 600 28px/36px var(--font); }
.co-search { height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 12px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); }
.co-search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.co-search svg { width: 20px; height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.co-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15px/20px var(--font); }
.co-tiles { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.co-tile { min-height: 96px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); text-align: left; font: 400 17px/24px var(--font); }
.co-tile:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.co-tile svg { width: 24px; height: 24px; }
.co-tile small { display: block; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-qh { margin: 32px 0 12px; display: flex; justify-content: space-between; }
.co-qh p { margin: 0; font: 600 17px/24px var(--font); }
.co-quick { padding: 64px 24px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.co-quick b { margin-top: 12px; font: 600 20px/28px var(--font); }
.co-quick p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-quick a { color: var(--accent); text-decoration: none; }
.co-ill { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, rgb(182, 160, 255), rgb(105, 80, 243)); color: #fff; }
.co-ill svg { width: 28px; height: 28px; }
.co-back { margin: 0 0 16px; display: flex; align-items: center; gap: 12px; font: 600 20px/28px var(--font); }
.co-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.co-row { width: 100%; min-height: 64px; padding: 12px 16px; display: flex; align-items: center; gap: 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); text-align: left; }
.co-row:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.co-row .t { flex: 1; min-width: 0; }
.co-row b { display: block; font: 500 15px/20px var(--font); }
.co-row small { display: block; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-row .p { font: 500 15px/20px var(--font); white-space: nowrap; }
.co-cat { width: 100%; height: 56px; padding: 0 16px 0 20px; position: relative; display: flex; align-items: center; gap: 8px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); overflow: hidden; }
.co-cat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.co-cat:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.co-cat b { font: 600 15px/20px var(--font); }
.co-cat .n { height: 20px; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); font: 600 11px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-cat svg { margin-left: auto; width: 20px; height: 20px; }
.co-none { margin: 24px 0; text-align: center; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-client { width: 100%; min-height: 96px; padding: 16px 20px; display: flex; align-items: center; gap: 12px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); text-align: left; }
.co-client .t { flex: 1; }
.co-client b { display: block; font: 500 17px/24px var(--font); }
.co-client small { display: block; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-client .ic { width: 56px; height: 56px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: grid; place-items: center; position: relative; }
.co-client .ic svg { width: 22px; height: 22px; }
.co-client .ic svg + svg { position: absolute; right: 12px; top: 14px; width: 12px; height: 12px; }
.co-client .av { width: 48px; height: 48px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: grid; place-items: center; font: 600 17px/24px var(--font); }
.co-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.co-empty b { margin-top: 16px; font: 600 17px/24px var(--font); }
.co-empty p { margin: 8px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-ill.cart { width: 48px; height: 48px; border-radius: 12px; }
.co-items { display: flex; flex-direction: column; gap: 8px; }
.co-item { position: relative; padding: 12px 12px 12px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); overflow: hidden; }
.co-item .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: rgb(165, 223, 248); }
.co-item b { display: block; font: 500 15px/20px var(--font); }
.co-item small { display: block; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-item .p { font: 500 15px/20px var(--font); text-align: right; }
.co-item .p s { display: block; color: var(--df-767676, rgb(118, 118, 118)); font-weight: 400; }
.co-item .acts { grid-column: 1 / -1; display: flex; gap: 16px; }
.co-sum { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.co-disc { height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); font: 500 15px/20px var(--font); }
.co-disc svg { width: 18px; height: 18px; }
.co-sum .row { display: flex; justify-content: space-between; font: 500 15px/20px var(--font); }
.co-sum .row.sm { font-weight: 400; color: var(--df-767676, rgb(118, 118, 118)); }
.co-sum .row.big { padding-top: 8px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 600 20px/28px var(--font); }
.co-sum .note { margin: 0; display: flex; gap: 8px; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-sum .note svg { width: 16px; height: 16px; flex: none; }
.co-sum .btns { margin-top: 8px; display: flex; gap: 8px; }
.co-sum .btns .tbtn { flex: 1; }
.co-sum .btns .ob-dots { width: 48px; height: 48px; }
.co-pick { display: flex; flex-direction: column; gap: 12px; }
.co-new { width: 100%; height: 56px; padding: 0 12px; display: flex; align-items: center; gap: 12px; border-radius: 12px; color: var(--ink); text-decoration: none; text-align: left; font: 500 15px/20px var(--font); }
.co-new:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.co-new .ic { width: 40px; height: 40px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: grid; place-items: center; }
.co-new .ic svg { width: 18px; height: 18px; }
.co-clients { display: flex; flex-direction: column; }
.co-cl { width: 100%; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border-radius: 12px; text-align: left; }
.co-cl:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.co-cl b { display: block; font: 500 15px/20px var(--font); }
.co-cl small { display: block; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-done { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; }
.co-done svg { width: 56px; height: 56px; color: var(--df-1f8900, rgb(31, 137, 0)); }
.co-done h1 { margin: 8px 0 0; font: 600 28px/36px var(--font); }
.co-done p { margin: 0 0 16px; font: 400 17px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-win { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.co-one { grid-template-columns: 1fr; }
.co-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.co-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.co-keys button { height: 56px; border-radius: 12px; background: var(--db-f5f5f5, rgb(245, 245, 245)); font: 500 20px/28px var(--font); }
.co-keys button:hover { background: var(--db-ebebeb-h, rgb(235, 235, 235)); }
.co-by, .co-left { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.co-by b { color: var(--ink); font-weight: 500; }
.co-seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); align-self: flex-start; }
.co-seg button { height: 32px; padding: 0 14px; border-radius: 999px; font: 500 15px/20px var(--font); }
.co-seg button.on { background: var(--db-ffffff, #fff); box-shadow: 0 1px 3px rgba(19, 19, 19, .15); }
.co-row2 { display: flex; gap: 8px; align-items: center; }
.co-row2 .bf-input { flex: 1; }
.co-after { display: flex; justify-content: space-between; font: 400 15px/20px var(--font); }
.co-qty { display: flex; align-items: center; gap: 8px; }
.co-qty button { width: 48px; height: 48px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); display: grid; place-items: center; }
.co-qty button svg { width: 18px; height: 18px; }
.co-qty input { width: 80px; height: 48px; text-align: center; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 12px; font: 500 17px/24px var(--font); }
.co-delitem { align-self: flex-start; }
@media (max-width: 1023px) {
  .sl-two { grid-template-columns: minmax(0, 1fr); }
  /* Phones (Fresha): the title keeps its margin and the table runs edge to edge, scrolling inside. */
  /* The card keeps its line all round (outside, so the table never covers it) and clips the
     table at its corners; the page behind is grey, as Fresha. */
  .sec-app .team-page.sl-page.sl-page:has(.sl-two) { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
  .sl-sum { padding: 24px 0 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); }
  .sl-sum h2 { padding: 0 24px; }
  .sl-sum .tscroll { padding: 0 16px; scrollbar-width: none; }
  .sl-sum .tscroll::-webkit-scrollbar { display: none; }
  .sl-sum .tscroll > table { width: max-content; min-width: 100%; }
  .sl-sum th, .sl-sum td { white-space: nowrap; }
  .sl-sum th:first-child, .sl-sum td:first-child { white-space: normal; min-width: 96px; max-width: 120px; }
}
@media (max-width: 767px) { .sl-head { flex-direction: column; } .sl-tools .t-search { width: 100%; } .sl-drawer .hd, .sl-drawer .bd, .sl-drawer .ft { padding-left: 16px; padding-right: 16px; } }
@media print { .sidebar, .topbar, .subnav, .subnav-toggle, .sl-head .acts, .sl-tools { display: none !important; } .team-page { padding: 0 !important; } }
.sl-t th { white-space: nowrap; }

/* ---------- Sale drawer (Fresha: 613 px, a 133 px tab rail, grey content) ---------- */
.sd-wrap { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.sd-wrap > * { pointer-events: auto; }
.sd-x { position: absolute; top: 12px; right: 625px; width: 48px; height: 48px; border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: 0 2px 8px rgba(19, 19, 19, .12); }
.sd { position: absolute; top: 0; right: 0; bottom: 0; width: min(613px, 100%); display: grid; grid-template-columns: 133px minmax(0, 1fr); background: var(--db-f5f5f5, rgb(245, 245, 245)); box-shadow: -8px 0 40px rgba(19, 19, 19, .14); animation: sl-in .25s cubic-bezier(.16, 1, .3, 1); }
.sd-rail { background: var(--db-ffffff, #fff); padding: 16px 0; display: flex; flex-direction: column; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sd-rail button { position: relative; padding: 12px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font: 500 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); text-align: left; }
.sd-rail button svg { width: 20px; height: 20px; }
.sd-rail button.on { color: var(--accent); }
.sd-rail button.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sd-main { overflow-y: auto; padding: 0 32px 40px; }
.sd-top { position: sticky; top: 0; z-index: 1; height: 72px; display: flex; align-items: center; gap: 8px; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.sd-top .sp { flex: 1; }
.sd-pill { height: 32px; padding: 0 16px 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font: 500 15px/20px var(--font); }
.sd-pill svg { width: 16px; height: 16px; }
.sd-pill.green { background: rgb(31, 137, 0); color: #fff; }
.sd-pill.orange { background: var(--db-fff4de, rgb(255, 244, 222)); color: var(--df-b7570b, rgb(183, 87, 11)); }
.sd-pill.red { background: rgb(212, 22, 58); color: #fff; }
.sd-pill.grey { background: var(--db-e5e5e5, rgb(229, 229, 229)); color: var(--ink); }
.sd-h { margin: 12px 0 0; font: 600 28px/36px var(--font); }
.sd-sub { margin: 4px 0 24px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sd-body { display: flex; flex-direction: column; gap: 16px; }
.sd-card { background: var(--db-ffffff, #fff); border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .1); padding: 8px 24px; }
.sd-client { min-height: 104px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; }
.sd-client b { font: 600 17px/24px var(--font); }
.sd-client .ic { width: 48px; height: 48px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: grid; place-items: center; }
.sd-client .ic svg { width: 22px; height: 22px; }
.sd-sale { padding: 16px 0; }
.sd-sale b { display: block; font: 600 20px/28px var(--font); }
.sd-sale small, .sd-items small, .sd-pays small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sd-items, .sd-tot, .sd-pays { margin: 0; padding: 16px 0; list-style: none; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sd-items li, .sd-tot li, .sd-pays li { display: flex; justify-content: space-between; gap: 16px; font: 400 15px/20px var(--font); }
.sd-items b, .sd-pays b { font: 500 15px/20px var(--font); }
.sd-items s { color: var(--df-767676, rgb(118, 118, 118)); font-weight: 400; }
.sd-tot li { color: var(--df-767676, rgb(118, 118, 118)); }
.sd-tot li.b { color: var(--ink); font-weight: 600; }
.sd-pays b svg { width: 16px; height: 16px; vertical-align: -3px; margin: 0 2px; }
.sd-note { margin: 0; padding: 16px 0; display: flex; gap: 8px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sd-note svg { width: 18px; height: 18px; flex: none; }
.sd-empty { padding: 56px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.sd-empty svg { width: 40px; height: 40px; color: var(--df-acacac, rgb(172, 172, 172)); }
.sd-empty b { margin-top: 8px; font: 600 17px/24px var(--font); }
.sd-empty p { margin: 0 0 16px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sd-comments { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sd-comments li { padding: 16px 20px; background: var(--db-ffffff, #fff); border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .1); }
.sd-comments p { margin: 0; font: 400 15px/20px var(--font); white-space: pre-wrap; }
.sd-comments small { display: block; margin-top: 8px; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sd-act { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sd-act li.m { font: 600 15px/20px var(--font); text-transform: capitalize; }
.sd-act li:not(.m) { padding: 16px 20px; background: var(--db-ffffff, #fff); border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .1); }
.sd-act b { display: block; font: 600 15px/20px var(--font); }
.sd-act small { display: block; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sd-act p { margin: 8px 0 0; font: 400 15px/20px var(--font); }
.sd-hint { margin: 8px 0 0; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sd-list { margin: 8px 0 0; padding-left: 20px; font: 400 15px/20px var(--font); }
/* Phones (Fresha's sale at 402 px): the whole screen, ← and × in a 72px bar, the status row,
   "Venta" 28/36, then the tabs as underlined text (no icons) and the cards on grey. */
@media (max-width: 767px) {
  .sd { width: 100%; display: block; overflow-y: auto; box-shadow: none; }
  .sd-x { z-index: 3; right: 8px; left: auto; top: 12px; bottom: auto; box-shadow: none; background: none; }
  .sd-back { position: absolute; z-index: 3; top: 12px; left: 8px; width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; }
  .sd-main { overflow: visible; padding: 72px 20px 40px; }
  .sd-top { position: static; height: auto; background: none; }
  .sd-rail { margin: 0 -20px 16px; padding: 0 20px; flex-direction: row; gap: 24px; background: none; border: 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .sd-rail button { padding: 16px 0 14px; flex-direction: row; color: var(--ink); font: 600 15px/20px var(--font); }
  .sd-rail button svg { display: none; }
  .sd-rail button.on { color: var(--ink); }
  .sd-rail button.on::before { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px; border-radius: 0; background: var(--ink); }
  .sd-sub { margin-bottom: 16px; }
}

/* Fresha's list tables: 13 px text, 58 px rows, pills with a hairline. */
.sl-t { font: 400 13px/18.57px var(--font); }
.sl-t th { padding: 17px 16px; }
.sl-t td { padding: 19px 16px; }
.sl-t tr.sum td { background: var(--db-f9f9f9, rgb(249, 249, 249)); font-weight: 600; }
.sl-pill { padding: 0 12px; box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .06); }
.sl-pill.green { box-shadow: inset 0 0 0 1px var(--ds-d2f6c9, rgb(210, 246, 201)); }
.sl-pill.orange { box-shadow: inset 0 0 0 1px var(--ds-ffe5b5, rgb(255, 229, 181)); }
.sl-pill.red { box-shadow: inset 0 0 0 1px var(--ds-fee3e2, rgb(254, 227, 226)); }
.sl-t .ob-dots { width: 32px; height: 32px; }
.co-full { margin: 0; padding: 12px 0 0; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 500 15px/20px var(--font); color: var(--df-1f8900, rgb(31, 137, 0)); }
.co-full svg { width: 20px; height: 20px; }
.co-full b { margin-left: auto; color: var(--ink); }
.sd-items li > span:last-child, .sd-pays li > span:last-child, .sd-tot li > span:last-child { white-space: nowrap; flex: none; }
.sd-pays b svg, .sd-items b svg { display: inline-block; }

/* Inside the agenda's "Venta" layer: the agenda draws the round × outside. */
html.embedded .co-x { display: none; }
html.embedded .team-dialog { margin-left: calc(var(--co-left, 0px) * -1); }
html.embedded .co:not(.m) .co-l { padding: 24px 32px 48px 33px; }

/* ---------- "Seleccionar pago" and "Añadir cantidad en efectivo", measured on the reference ---------- */
.co-crumbs button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.co-crumbs button:hover { color: var(--ink); }
/* Beside the cart: the crumbs at 32, the title at 68, the tiles at 136, 16 apart. */
.co:not(.m) .co-crumbs { margin: 8px 0 16px; }
.co:not(.m) .co-crumbs + .co-h { margin: 0; }
.co:not(.m) .co-tiles.pay { margin-top: 32px; gap: 16px; }
.co-tiles.pay .co-tile { min-height: 120px; padding: 8px; align-items: center; justify-content: center; gap: 8px; text-align: center; border-radius: 20.32px; font: 500 15px/20px var(--font); }
/* The column beside it, measured at 1470: 480 wide with 32 of margin; the cart without a card, only the 4 px
   line; the discount 46 above the total; «A pagar» and the 48 px buttons at the foot. */
.co:not(.m) .co-r { padding: 32px 32px 16px 31px; }
.co:not(.m) .co-client { min-height: 104px; padding: 20px; border-radius: 20.32px; box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; }
.co:not(.m) .co-client small { font: 400 15px/20px var(--font); }
.co:not(.m) .co-client .ic { width: 64px; height: 64px; }
.co:not(.m) .co-client .ic svg { width: 28px; height: 28px; }
.co:not(.m) .co-client .ic svg + svg { right: 13px; top: 15px; width: 14px; height: 14px; }
.co:not(.m) .co-items { margin-top: 24px; gap: 16px; }
.co:not(.m) .co-item { display: block; padding: 24px 82px 0 20px; border-radius: 0; box-shadow: none; overflow: visible; }
.co:not(.m) .co-item .bar { width: 4px; border-radius: 999px; }
.co:not(.m) .co-item b { font: 500 17px/24px var(--font); }
.co:not(.m) .co-item small { margin-top: 2px; font: 400 15px/20px var(--font); }
.co:not(.m) .co-item .p { position: absolute; top: 12px; right: 0; font: 500 17px/24px var(--font); }
.co:not(.m) .co-item .acts { margin-top: 4px; }
.co:not(.m) .co-sum { gap: 2px; }
.co:not(.m) .co-disc { height: 40px; margin-bottom: 44px; border-radius: 20.32px; }
.co:not(.m) .co-sum .btns { margin-top: 10px; }
.co-tiles.pay .co-tile .ic { display: inline-flex; height: 28px; margin: 0; color: var(--ink); }
.co-tiles.pay .co-tile .ic svg { width: 28px; height: 28px; }
.co-tiles.pay .co-tile .ic.g { color: var(--df-1f8900, rgb(31, 137, 0)); }
.co-tiles.pay .co-tile .ic.p { color: var(--df-6950f3, rgb(105, 80, 243)); }
.co-tile.on { box-shadow: inset 0 0 0 2px var(--accent); }
.co-disc { width: 100%; border: 0; cursor: pointer; text-align: left; }
.co-disc span { flex: 1; }
.co-disc svg:last-child { width: 20px; height: 20px; }
.co-sum hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.co-sum .row.pay span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.co-bin { width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.co-bin svg { width: 18px; height: 18px; }
.co-fold { align-self: center; width: 40px; height: 40px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.co-fold svg { width: 20px; height: 20px; }
.co-sum .row.big.co-due { width: 100%; border: 0; border-top: 0; padding: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: 600 17px/24px var(--font); }
.co-due span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.co-due svg { width: 20px; height: 20px; }
.co-amdlg { width: 512px; max-width: calc(100vw - 32px); border-radius: 30px; }
.co-amh { padding: 30px 36px 0 48px; }
.co-amh .pkp-big { flex: 1; margin: 0; font: 600 20px/28px var(--font); }
.co-amt { padding: 24px 48px 36px; display: flex; flex-direction: column; gap: 24px; }
.co-big { align-self: center; display: inline-flex; align-items: baseline; gap: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--de-d3d3d3, rgb(211, 211, 211)); font: 700 40px/44px var(--font); color: var(--ink); }
.co-big input { width: 4ch; field-sizing: content; min-width: 1ch; max-width: 8ch; border: 0; outline: 0; padding: 0; font: inherit; color: inherit; background: none; }
.co-big input::selection { background: var(--db-c9dcff, rgb(201, 220, 255)); }
.co-amt .co-chips { justify-content: space-between; flex-wrap: nowrap; }
.co-chip { height: 36px; padding: 0 12px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); font: 400 14px/16px var(--font); color: var(--ink); cursor: pointer; }
.co-chip:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.co-chip.on { background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.co-amt .co-keys button { height: 58px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); font: 600 24px/32px var(--font); color: var(--ink); }
.co-amt .co-keys button:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.co-amt .co-keys button:active { transform: scale(0.97); }
.co-amt .co-by { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; }
.co-who { padding: 0; border: 0; background: none; font: inherit; color: var(--accent); cursor: pointer; }
.co-who:hover { text-decoration: underline; }
.co-amf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-amf b { font: 600 20px/28px var(--font); }
.co-amf b.green { color: var(--df-1f8900, rgb(31, 137, 0)); }
.co-mems { padding: 16px 28px 28px; max-height: 70vh; overflow: auto; }
.co-mems p { margin: 8px 20px 8px; font: 600 15px/20px var(--font); }
.co-mems hr { margin: 16px 20px; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.co-mem { width: 100%; height: 64px; padding: 0 20px; border: 0; border-radius: 15px; background: none; display: flex; align-items: center; gap: 16px; cursor: pointer; font: 500 15px/20px var(--font); color: var(--ink); text-align: left; }
.co-mem:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.co-mem .av { width: 40px; height: 40px; border-radius: 999px; background: var(--db-e6f7fe, rgb(230, 247, 254)); color: var(--df-0075a8, rgb(0, 117, 168)); display: flex; align-items: center; justify-content: center; font: 600 13px/16px var(--font); box-shadow: inset 0 0 0 2px rgb(165, 223, 248); }
.co-mem b { flex: 1; font-weight: 500; }
.co-mem svg { width: 20px; height: 20px; }
.sd-mi { display: inline-flex; width: 28px; height: 20px; align-items: center; justify-content: center; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 6px; vertical-align: middle; }
.sd-mi svg { width: 16px; height: 16px; }
/* Windows opened from the checkout or a sale's drawer go above them. */
.co ~ .team-backdrop, .sd-wrap ~ .team-backdrop { z-index: 70; }
/* In the agenda's layer only the checkout, the sale's drawer and their windows show: the
   calendar stays visible behind, as Fresha. */
html.embedded, html.embedded body { background: transparent !important; }
/* The page behind the checkout never shows: its frame stays visible by rule (html.booted) whatever its parent says. */
html.embedded #frame { display: none !important; }
html.embedded body > :not(.co):not(.sd-wrap):not(.team-backdrop):not(.popover):not(.toast):not(.gt-tip):not(.gt-confetti):not(script) { visibility: hidden; }
.sl-pill.blue { background: var(--db-eaf1fd, rgb(234, 241, 253)); color: var(--df-2d76ec, rgb(45, 118, 236)); box-shadow: inset 0 0 0 1px var(--ds-d5e4fb, rgb(213, 228, 251)); }
.sl-pill.purple { background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--df-6950f3, rgb(105, 80, 243)); box-shadow: inset 0 0 0 1px var(--ds-e0dcfd, rgb(224, 220, 253)); }
/* Phones (Fresha, 402 px): the day and filter buttons stay on one line that slides sideways,
   the card's table scrolls inside the card (its own title keeps the 24px padding), and the
   cells keep to one line. */
@media (max-width: 767px) {
  .sl-tools:not(:has(.t-search)) { flex-wrap: nowrap; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 0 20px; scrollbar-width: none; }
  .sl-tools:not(:has(.t-search))::-webkit-scrollbar { display: none; }
  .sl-tools > * { flex: none; }
  .sl-sum { padding: 24px 0 8px; }
  .sl-sum h2 { padding: 0 24px; }
  .sl-sum th { min-width: 88px; padding: 16px 8px; vertical-align: bottom; }
  .sl-sum td { padding: 18px 8px; white-space: nowrap; }
  .sl-sum th:first-child, .sl-sum td:first-child { padding-left: 16px; min-width: 90px; }
  .sl-sum th:last-child, .sl-sum td:last-child { padding-right: 16px; }
}
@media (max-width: 767px) { .sl-reg { flex-wrap: wrap; gap: 16px; } .sl-reg > .tbtn { width: 100%; justify-content: center; } }
/* Phones, Fresha's sales lists (Citas, Ventas, Pagos, Vendidos): white page, the table across
   the whole width with no card, the filters as a 36px round button, no sort button, and the
   search as a round magnifier that opens into a field (Pagos keeps the field, filters next to it). */
@media (max-width: 767px) {
  .sec-app .team-page.sl-page:not(:has(.sl-reg)) { background: var(--db-ffffff, #fff); }
  .sl-tw { margin: 24px -20px 0; border-radius: 0; box-shadow: none; }
  .sl-t th:first-child, .sl-t td:first-child { padding-left: 20px; }
  .sl-tools:has(.t-search) { flex-wrap: wrap; }
  .sl-tools:has(.t-search) > #sort, .sl-tools:has(.t-search) > .sp { display: none; }
  .sl-tools > #filters { width: 50px; padding: 0; justify-content: center; position: relative; }
  .sl-tools:has(#range) > #filters { width: 36px; }
  .sl-tools > #filters > span:not([data-icon]):not(.menu-badge) { display: none; }
  .sl-tools > #filters .menu-badge { position: absolute; top: -4px; right: -4px; }
  .sl-tools .t-search { width: 52px !important; flex: none; cursor: pointer; transition: width .2s; }
  .sl-tools .t-search svg { margin-left: 15px; }
  .sl-tools .t-search input { padding: 0; width: 0; }
  .sl-tools .t-search:focus-within, .sl-tools .t-search:has(input:not(:placeholder-shown)) { width: 100% !important; }
  .sl-tools .t-search:focus-within input, .sl-tools .t-search:has(input:not(:placeholder-shown)) input { width: 100%; padding: 0 16px 0 8px; }
  .sl-tools:has(#range) .t-search { width: auto !important; flex: 1 1 0; }
  .sl-tools:has(#range) .t-search input { width: 100%; padding: 0 16px 0 8px; }
  .sl-tools:has(#range) > #filters { order: 1; }
  .sl-tools:has(#range) > #range { order: 2; }
  .sl-tools:has(#range)::after { content: ""; order: 1; flex-basis: 100%; }
  .sec-app :is(.page-actions, .acts) > .tbtn.dark[data-mdark] { background: var(--ink); border-color: var(--ink); color: var(--do-ffffff, #fff); }
}
/* Phones (Fresha's checkout at 402 px): one screen at a time with × on the right (and ← to
   go back): the cart ("Añadir al carrito" 20/28, the client card, the items, the outlined
   "Añadir al carrito" and the footer), the catalogue when adding, and "Seleccionar pago"
   with its 2-column tiles of 120 px and only the footer under them. */
.co.m { display: flex; flex-direction: column; overflow: hidden; }
.co.m .co-x { left: auto; right: 8px; top: 12px; box-shadow: none; background: none; }
.co.m .co-mback { position: absolute; top: 12px; left: 8px; z-index: 2; width: 48px; height: 48px; border-radius: 999px; }
.co.m .co-crumbs { display: none; }
.co.m .co-l { padding: 72px 20px 24px; overflow-y: auto; }
.co.m .co-r { flex: 1; min-height: 0; padding: 18px 20px calc(16px + env(safe-area-inset-bottom)); border: 0; overflow-y: auto; }
.co.m:not(.m-pay):not(.m-browse) .co-l { display: none; }
.co.m.m-browse .co-r { display: none; }
.co.m.m-browse .co-l { flex: 1; }
.co.m.m-pay .co-l { flex: 1; }
.co.m.m-pay .co-r { flex: none; padding-top: 12px; }
.co.m.m-pay .co-r > :not(.co-sum) { display: none; }
.co.m.m-pay .co-disc { display: none; }
.co.m .co-h { margin: 0 0 24px; font: 600 28px/36px var(--font); }
.co-mh { padding-right: 48px; }
.co.m .co-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co.m .co-client { min-height: 104px; padding: 24px; border-radius: 20.32px; box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; }
.co-madd { align-self: flex-start; gap: 8px; }
.co-madd svg { width: 20px; height: 20px; }
.co.m .co-disc { height: 40px; border-radius: 20.32px; }
.co-mback { display: none; }
.co.m .co-mback { display: grid; place-items: center; }
/* Fresha from 768 to 1023 keeps this layout, with more margin: 32 at the sides, the title 24/32, tiles 12 apart. */
@media (min-width: 768px) {
  .co.m .co-x { right: 20px; }
  .co.m .co-mback { left: 20px; }
  .co.m .co-l { padding: 74px 32px 24px; }
  .co.m .co-h { margin: 0; font: 600 24px/32px var(--font); }
  .co.m .co-tiles.pay { margin-top: 34px; gap: 12px; }
  .co.m .co-r { padding-left: 32px; padding-right: 32px; }
}
/* Phones (Fresha's "Añadir cantidad en efectivo" at 402 px): the whole screen, the title
   20/28 next to the ×, the amount 40px in the middle, the quick amounts on one sliding line,
   a 3×4 keypad of 60 px pills across the width (28/600), and at the bottom who took it,
   what is left and "Añadir". */
@media (max-width: 767px) {
  .team-backdrop:has(.co-amdlg) { padding: 0; }
  .team-dialog.co-amdlg { width: 100vw !important; max-width: none !important; height: 100dvh !important; max-height: none !important; border-radius: 0 !important; display: flex; flex-direction: column; }
  .co-amh { padding: 12px 8px 0 20px; align-items: center; }
  .co-amt { flex: 1; min-height: 0; padding: 32px 20px calc(16px + env(safe-area-inset-bottom)); gap: 24px; overflow-y: auto; }
  .co-amt .co-chips { justify-content: flex-start; gap: 8px; margin: 0 -20px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
  .co-amt .co-chips::-webkit-scrollbar { display: none; }
  .co-chip { flex: none; height: 32px; font: 500 13px/16px var(--font); }
  .co-amt .co-keys { gap: 12px 8px; }
  .co-amt .co-keys button { height: 60px; font: 600 28px/36px var(--font); }
  .co-amt .co-by { margin-top: auto; font: 500 15px/20px var(--font); }
  .co-amf b { font: 600 17px/24px var(--font); }
  .co-amf .tbtn { height: 48px; padding: 0 24px; }
}

/* Fresha's sales lists (Citas, Ventas, Pagos, Vendidos), measured at 1200: a white page, the
   17/24 description, the search and filters in a grey band (radius 20, 16 padding, 32 under
   the description) and the table 16 below it with no card. The first column stays fixed while
   the rest slides; once moved, a line and a 16 px shade appear beside it (the header's shade
   fades in from the top), and a 16 px shade marks the right edge while there is more, faded
   64 px at its top and bottom. Header 15/20 semibold, 53 high; rows 59 with a line under each. */
.sec-app .team-page.sl-page:has(.sl-tools .t-search):not(:has(.sl-reg)) { background: var(--db-ffffff, #fff); }
@media (min-width: 768px) {
  .sl-page:has(.sl-tools .t-search) .sl-lead { font: 400 17px/24px var(--font); }
  .sl-tools:has(.t-search) { margin-top: 32px; padding: 16px; gap: 12px; border-radius: 20px; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
}
.sl-tw { position: relative; overflow: visible; border-radius: 0; box-shadow: none; background: none; }
.sl-ts { overflow-x: auto; overscroll-behavior-x: contain; }
.sl-tw .sl-t { border-collapse: separate; border-spacing: 0; }
.sl-tw .sl-t th { padding: 16px; font: 600 15px/20px var(--font); background: var(--db-ffffff, #fff); }
.sl-tw .sl-t td { padding: 17px 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); }
.sl-tw .sl-t th:first-child, .sl-tw .sl-t td:first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid transparent; transition: border-color .2s ease-out; }
.sl-tw .sl-t th:first-child::after, .sl-tw .sl-t td:first-child::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% + 1px); width: 16px; pointer-events: none; opacity: 0; transition: opacity .2s ease-out; background: linear-gradient(to right, rgba(19, 19, 19, .1), transparent); }
.sl-tw .sl-t th:first-child::after { -webkit-mask: linear-gradient(transparent, #000); mask: linear-gradient(transparent, #000); }
.sl-tw.l .sl-t th:first-child, .sl-tw.l .sl-t td:first-child { border-right-color: var(--de-e5e5e5, rgb(229, 229, 229)); }
.sl-tw.l .sl-t th:first-child::after, .sl-tw.l .sl-t td:first-child::after { opacity: 1; }
.sl-tw::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 16px; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .2s ease-out; background: linear-gradient(to left, rgba(19, 19, 19, .1), transparent);
  -webkit-mask: linear-gradient(transparent 0, #000 64px, #000 calc(100% - 64px), transparent); mask: linear-gradient(transparent 0, #000 64px, #000 calc(100% - 64px), transparent); }
.sl-tw.r::after { opacity: 1; }
.sl-tw.sl-tw-empty { border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .1); background: var(--db-ffffff, #fff); overflow: hidden; }
/* Phones (Fresha at 402): the table 16 under the buttons, edge to edge, 16 px cell padding,
   rows of 56; «Visualización de resultados…» 15/20, 17 under the table. */
@media (max-width: 767px) {
  .sl-tw:not(.sl-tw-empty) { margin: 16px -20px 0; }
  .sl-tw .sl-t th:first-child, .sl-tw .sl-t td:first-child { padding-left: 16px; }
  .sl-tw .sl-t td { padding: 16px; }
  .sl-foot { padding: 17px 0 0; font: 400 15px/20px var(--font); }
  .sl-page:has(.sl-tools .t-search) .sl-lead { margin-top: 12px; }
}
@media (max-width: 767px) { .sl-tools:has(.t-search) { gap: 12px; } }
/* Fresha between 768 and 1199: the head buttons drop to 36 high, the search to 207 wide and
   «Filtros» to its icon (50 wide). */
@media (min-width: 768px) and (max-width: 1199px) {
  .sl-head .acts > .tbtn.lg { height: 36px; padding: 0 16px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
  .sl-head .acts > .tbtn.lg > span[data-icon] svg { width: 20px; height: 20px; }
  .sl-tools:has(.t-search) .t-search { width: 207px; }
  .sl-tools:has(.t-search) > #filters { width: 50px; padding: 0; justify-content: center; position: relative; }
  .sl-tools:has(.t-search) > #filters > span:not([data-icon]):not(.menu-badge) { display: none; }
  .sl-tools:has(.t-search) > #filters .menu-badge { position: absolute; top: -4px; right: -4px; }
}
/* Fresha's blue note on the payment step («Las membresías habituales solo pueden pagarse…»). */
.co-only { margin: 16px 0 0; padding: 12px 16px; display: flex; gap: 8px; align-items: flex-start; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); font: 400 13px/18px var(--font); color: var(--ink); }
.co-only svg { flex: none; width: 18px; height: 18px; color: var(--df-6950f3, rgb(105, 80, 243)); }
/* Fresha's report tables with a width per column (Tarjetas regalo, Bonos y Membresías vendidos):
   fixed layout, headers that wrap onto two lines (73 high), cells on one line ending in «…»,
   numbers to the right, the grey «Total» row in 600 and rows of 56; «Pendiente» in amber. */
.sl-tw .sl-t.fx { table-layout: fixed; }
.sl-tw .sl-t.fx th { white-space: normal; vertical-align: middle; }
.sl-tw .sl-t.fx td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-tw .sl-t .r { text-align: right; }
.sl-tw .sl-t tr.sum td { background: var(--db-f9f9f9, rgb(249, 249, 249)); font-weight: 600; padding-top: 18px; padding-bottom: 18px; }
.sl-pill.amber { background: var(--db-fff7db, rgb(255, 247, 219)); color: var(--df-b7570b, rgb(183, 87, 11)); box-shadow: inset 0 0 0 1px var(--ds-ffefb2, rgb(255, 239, 178)); }
.sl-tw .sl-t.tight td { padding-top: 16px; padding-bottom: 16px; }
.sl-tw .sl-t.tight tr.sum td { padding-top: 18px; padding-bottom: 17px; }
/* The sort arrow beside the title, also when the title takes two lines (Fresha). */
.sl-t th .thc { display: flex; align-items: center; gap: 4px; }
.sl-t th.r .thc { justify-content: flex-end; }
.sl-t th .thc svg { flex: none; margin: 0; vertical-align: 0; }
.sl-tw .sl-t.tight td { padding-top: 15.5px; padding-bottom: 15.5px; }
.sl-tw .sl-t.tight tr.sum td { padding-top: 18.5px; padding-bottom: 18px; }

/* ---------- A sold bono's drawer (Fresha's package drawer, measured at 1470 and 402) ---------- */
.sd.pk { width: min(609px, 100%); grid-template-columns: 128px minmax(0, 1fr); animation: none; }
.sd.pk.pk-in { animation: sl-in .25s cubic-bezier(.16, 1, .3, 1); }
.pk-wrap .sd-x { right: 621px; }
.pk-rail { padding: 20px 8px; gap: 0; }
.pk-rail button { min-height: 75px; padding: 12px 8px; justify-content: center; gap: 4px; border-radius: 15.24px; }
.pk-rail button svg { width: 24px; height: 24px; }
.pk-rail button span { font: 500 15px/20px var(--font); }
.pk-rail button.on::before { left: -8px; top: 0; bottom: 0; width: 4px; border-radius: 999px; }
.pk-main { padding: 24px 32px 40px; }
.pk-top { height: 36px; display: flex; align-items: center; gap: 8px; }
.pk-top .sp { flex: 1; }
.pk-acts { height: 36px; padding: 0 15px; gap: 4px; border-radius: 999px; font: 500 15px/20px var(--font); }
.pk-acts svg { width: 16px; height: 16px; }
.pk-h { margin: 24px 0 0; font: 600 28px/36px var(--font); }
.pk-body { margin-top: 32px; display: flex; flex-direction: column; }
.pk-card { aspect-ratio: 2 / 1; padding: 20px; border-radius: 20.32px; background-size: auto, cover; background-position: 0 0, center; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.pk-card p { margin: 0; }
.pk-cn { font: 600 20px/28px var(--font); }
.pk-cb { margin-top: 4px !important; font: 500 15px/20px var(--font); }
.pk-cr { text-align: right; }
.pk-cp { font: 600 28px/36px var(--font); }
.pk-cr p { margin-top: 4px; font: 400 15px/20px var(--font); }
.pk-client { margin-top: 24px; min-height: 104px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--db-ffffff, #fff); border-radius: 20.32px; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); color: var(--ink); text-decoration: none; }
.pk-client b { display: block; font: 600 17px/24px var(--font); }
.pk-client small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); overflow-wrap: anywhere; }
.pk-av { flex: none; width: 64px; height: 64px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); box-shadow: inset 0 0 0 1px var(--ds-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: grid; place-items: center; font: normal 600 20px/28px var(--font); }
.pk-h3 { margin: 32px 0 8px; font: 600 17px/24px var(--font); }
.pk-dl { margin: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; background: var(--db-ffffff, #fff); border-radius: 20.32px; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); }
.pk-dl div { display: flex; justify-content: space-between; gap: 12px; font: 500 15px/20px var(--font); }
.pk-dl dt { white-space: nowrap; }
.pk-dl dd { margin: 0; color: var(--df-767676, rgb(118, 118, 118)); text-align: right; }
.pk-ben { min-height: 88px; padding: 20px 16px 20px 24px; display: flex; align-items: center; gap: 12px; background: var(--db-ffffff, #fff); border-radius: 20.32px; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); }
.pk-ben + .pk-ben { margin-top: 16px; }
.pk-ben .bw-ic, .pk-ei { border-radius: 15.24px; }
.pk-bt { flex: 1; min-width: 0; }
.pk-bt b { display: block; font: 600 15px/20px var(--font); }
.pk-bt small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pk-dots { flex: none; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); }
.pk-dots:hover { background: var(--db-131313-5-h, rgba(19, 19, 19, .05)); }
.pk-dots svg { width: 22px; height: 22px; }
/* «Ver datos» of a benefit. */
.pk-dtop { height: 36px; display: flex; align-items: center; justify-content: space-between; }
.pk-back { height: 36px; padding: 0 15px; gap: 6px; border-radius: 999px; }
.pk-back svg { width: 16px; height: 16px; }
.pk-dh { margin: 20px 0 0; font: 600 28px/36px var(--font); }
.pk-dsub { margin: 4px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pk-left { margin-top: 24px; padding: 20px 24px; background: var(--db-ffffff, #fff); border-radius: 20.32px; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); }
.pk-left p { margin: 0; font: 400 17px/24px var(--font); }
.pk-bar { margin-top: 12px; display: block; height: 6px; border-radius: 999px; background: var(--db-131313-5, rgba(19, 19, 19, .05)); overflow: hidden; }
.pk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.pk-detail .pk-h3 { margin-top: 24px; }
.pk-ul { margin: 0; padding: 20px 24px 20px 48px; display: flex; flex-direction: column; gap: 4px; background: var(--db-ffffff, #fff); border-radius: 20.32px; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); font: 400 17px/24px var(--font); }
.pk-lk { padding: 0; font: inherit; color: var(--accent); }
.pk-lk:hover { text-decoration: underline; }
/* «Actividad»: a timeline of cards. */
.pk-act { margin: 0; padding: 0; list-style: none; }
.pk-act li.m { margin-bottom: 20px; font: 600 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pk-act li.e { position: relative; padding: 0 0 24px 32px; }
.pk-act li.e::before { content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--db-d3d3d3, rgb(211, 211, 211)); }
.pk-act li.e::after { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; border-radius: 999px; background: var(--db-d3d3d3, rgb(211, 211, 211)); }
.pk-ev { margin-top: 8px; padding: 24px 24px 20px; display: flex; gap: 16px; background: var(--db-ffffff, #fff); border-radius: 20.32px; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); }
.pk-et { flex: 1; min-width: 0; }
.pk-ev:not(:has(p)) { padding-bottom: 24px; }
.pk-et b { display: block; font: 600 15px/20px var(--font); }
.pk-et small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pk-et p { margin: 16px 0 0; font: 400 15px/20px var(--font); }
.pk-ei { position: relative; flex: none; margin-top: -4px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--db-131313-5, rgba(19, 19, 19, .05)); }
.pk-ei > svg { width: 24px; height: 24px; }
.pk-ei i { position: absolute; left: 32px; top: 32px; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px var(--ds-ffffff, #fff); }
.pk-ei i svg { width: 12px; height: 12px; stroke-width: 2.5; }
.pk-ei i.green { background: rgb(31, 137, 0); }
.pk-ei i.dark { background: var(--db-0d0d0d, rgb(13, 13, 13)); }
.pk-ei i.red { background: rgb(212, 22, 58); }
/* Its windows: 512 px in the middle (radius 30), a sheet from the bottom on phones. */
.team-backdrop:has(.pk-dlg) { background: var(--db-131313-25, rgba(19, 19, 19, .25)); }
.team-dialog.pk-dlg { width: calc(100% - 32px); max-width: 512px; height: auto; max-height: calc(100dvh - 64px); padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 30.48px; box-shadow: 0 2px 8px rgba(19, 19, 19, .08), 0 4px 20px rgba(19, 19, 19, .12); }
.pk-mh { position: relative; flex: none; min-height: 74px; padding: 32px 96px 16px 48px; }
.pk-mh h2 { margin: 0; font: 600 24px/28px var(--font); }
.pk-mh .pkp-x { position: absolute; top: 20px; right: 36px; width: 48px; height: 48px; }
.pk-mb { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 48px 16px; }
.pk-mf { flex: none; padding: 16px 48px 32px; display: flex; align-items: center; gap: 8px; }
.pk-mf .tbtn.lg { height: 48px; padding: 0 24px; font: 600 17px/24px var(--font); }
.pk-mf .pk-wide { flex: 1; }
.pk-half .tbtn { flex: 1; }
.pk-two { justify-content: flex-end; }
.pk-txt { margin: 0; font: 400 15px/20px var(--font); }
.pk-adj { display: flex; flex-direction: column; text-align: center; }
.pk-ai { align-self: center; margin-top: 16px; background: none !important; }
.pk-ai svg { width: 40px; height: 40px; }
.pk-big { margin: 8px 0 0; font: 700 40px/44px var(--font); }
.pk-grey { margin: 8px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pk-seg { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; background: var(--db-131313-5, rgba(19, 19, 19, .05)); border-radius: 15.24px; }
.pk-seg button { height: 48px; border-radius: 15.24px; font: 600 17px/24px var(--font); color: var(--ink); }
.pk-seg button[aria-checked="true"] { background: var(--db-ffffff, #fff); box-shadow: 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
.pk-lab { display: block; margin: 24px 0 8px; text-align: left; font: 600 15px/20px var(--font); }
.pk-num { display: flex; gap: 10px; }
.pk-num .ti { flex: 1; height: 48px; border-radius: 15.24px; text-align: left; }
.pk-num .ti.err { box-shadow: inset 0 0 0 1px var(--ds-d4163a, rgb(212, 22, 58)); border-color: var(--de-d4163a, rgb(212, 22, 58)); }
.pk-step { flex: none; width: 96px; height: 48px; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15.24px; }
.pk-step button { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); }
.pk-step button:disabled { color: var(--df-acacac, rgb(172, 172, 172)); }
.pk-step svg { width: 20px; height: 20px; }
.pk-err { margin: 8px 0 0; text-align: left; font: 400 13px/18px var(--font); color: var(--df-d4163a, rgb(212, 22, 58)); }
.pk-adjf { justify-content: space-between; }
.pk-adjf small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pk-adjf b { display: block; font: 600 17px/24px var(--font); }
.pk-sel { width: 100%; height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15.24px; background: var(--db-ffffff, #fff); font: 400 15px/20px var(--font); color: var(--ink); text-align: left; }
.pk-sel svg { width: 16px; height: 16px; flex: none; }
.pk-pause .pk-sel { margin-top: 8px; }
.pk-pause .pk-lab:first-child, .pk-mb > .pk-lab:first-child { margin-top: 8px; }
.pk-help { margin: 6px 0 0; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pk-ck { margin-top: 20px; }
.pk-ta { width: 100%; margin-top: 12px; min-height: 96px; border-radius: 15.24px; resize: vertical; }
.team-dialog.pk-tall { max-width: 600px; height: min(760px, calc(100dvh - 64px)); }
.pk-inc h2 { margin: 0; font: 600 28px/36px var(--font); }
.pk-search { margin-top: 24px; width: 100%; height: 48px; border-radius: 15.24px; }
.pk-inc h3 { margin: 32px 0 8px; font: 600 17px/24px var(--font); }
.pk-inc ul { margin: 0; padding: 0; list-style: none; }
.pk-inc li { padding: 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 400 17px/24px var(--font); }
.pk-inc li b { display: block; font-weight: 400; }
.pk-inc li small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pk-none { text-align: center; margin-top: 32px; }
/* The list on phones: rows of name, client and state. */
.pk-rows { margin: 0 -20px; }
.pk-row { display: block; padding: 16px 20px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); color: var(--ink); text-decoration: none; }
.pk-row:active { background: var(--db-131313-3-h, rgba(19, 19, 19, .03)); }
.pk-row > span { display: flex; flex-direction: column; align-items: flex-start; }
.pk-row b { font: 600 17px/24px var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-row small { margin-top: 2px; font: 400 15px/20px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pk-row .sl-pill { margin-top: 8px; }
.pk-foot { text-align: center; }
@media (max-width: 767px) {
  .sd.pk { width: 100%; background: var(--db-ffffff, #fff); }
  .pk-main { padding: 72px 0 0; min-height: 100%; display: flex; flex-direction: column; background: var(--db-ffffff, #fff); }
  .pk-top { padding: 0 20px; }
  .pk-h { margin: 0; padding: 18px 20px 0; font: 600 24px/32px var(--font); }
  .pk-wrap .sd-x { right: 8px; }
  .pk-rail.sd-rail { margin: 0; padding: 0 20px; height: 53px; gap: 24px; background: var(--db-ffffff, #fff); border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .pk-rail.sd-rail button { min-height: 0; padding: 16px 0; border-radius: 0; }
  .pk-rail.sd-rail button span { font-weight: 600; }
  .pk-rail.sd-rail button.on::before { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px; border-radius: 0; }
  .pk-body { margin: 0; padding: 20px 20px 40px; flex: 1; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
  .pk-main.pk-detail { padding: 20px 20px 40px; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
  .pk-detail ~ .sd-x, .pk-wrap:has(.pk-detail) .sd-x { display: none; }
  .team-backdrop:has(.pk-dlg) { align-items: flex-end; padding: 0; }
  .team-dialog.pk-dlg { width: 100%; max-width: none; max-height: calc(100dvh - 40px); border-radius: 30.48px 30.48px 0 0; animation: pk-up .3s cubic-bezier(.16, 1, .3, 1); }
  .team-dialog.pk-tall { height: calc(100dvh - 40px); }
  .pk-mh { padding: 30px 72px 16px 20px; min-height: 62px; }
  .pk-mh h2 { font: 600 28px/36px var(--font); }
  .pk-mh .pkp-x { top: 12px; right: 8px; }
  .pk-mb { padding: 8px 20px 16px; }
  .pk-mf { padding: 16px 20px 16px; }
}
@keyframes pk-up { from { transform: translateY(100%); } }
/* Bonos and Membresías vendidos on phones (Fresha at 402 and 767): the search box (up to
   214 px, placeholder visible) and «Todos los estados» on one line, the period under them;
   36 px tall. */
@media (max-width: 767px) {
  .sl-tools:has(#state) { gap: 0 9px; }
  .sl-tools:has(#state) .t-search { width: auto !important; flex: 1 1 0; max-width: 214px; min-width: 0; height: 36px; cursor: text; }
  .sl-tools:has(#state) .t-search svg { margin-left: 12px; }
  .sl-tools:has(#state) .t-search input { width: 100%; min-width: 0; padding: 0 12px 0 8px; }
  .sl-tools:has(#state) > #state { order: 1; height: 36px; }
  .sl-tools:has(#state)::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .sl-tools:has(#state) > #period { order: 3; height: 36px; margin-top: 8px; }
}
/* The date picker opened from a bono window sits above it. */
body:has(.pk-dlg) .dp { z-index: 200; }

/* Nothing sold yet (Fresha, measured at 1470): bordered card, 56 px picture, 20/28 title. */
.sl-none { padding: 64px 24px; border: 1px solid var(--db-e5e5e5, rgb(229, 229, 229)); border-radius: 25.4px; text-align: center; }
.sl-none img { display: block; width: 56px; height: 56px; margin: 0 auto 16px; }
.sl-none h2 { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.sl-none p { max-width: 512px; margin: 4px auto 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sl-none .tbtn { margin-top: 24px; height: 36px; padding: 0 16px; font-size: 14px; }
.sl-tools + .sl-none { margin-top: 16px; }
.sl-tools.gone { display: none; } .sl-tools.gone + .sl-none { margin-top: 32px; }

/* «Enviar la factura» (Fresha, TT 7 Nov 2026): 512 wide, radius 30.48, head 32 48 16 with the 20/28 title and a 48 px ×
   20 px from the top, «Email del cliente» 14/20 over a 48 px field (radius 15.24), footer 16 48 32 with two 48 px halves. */
.team-dialog.sd-mail { max-width: 512px; padding: 0; border-radius: 30.48px; overflow: visible; }
.sd-mail .sdm-h { position: relative; padding: 30px 96px 18px 48px; }
.sd-mail .sdm-h p { margin: 0; font: 600 20px/28px var(--font); }
.sd-mail .sdm-x { position: absolute; top: 20px; right: 36px; width: 48px; height: 48px; border-radius: 999px; }
.sd-mail .sdm-b { position: relative; padding: 16px 48px 40px; }
.sd-mail .sdm-b label { display: block; margin-bottom: 4px; font: 400 14px/20px var(--font); }
.sd-mail .sdm-b .bf-input { height: 48px; border-radius: 15.24px; }
.sd-mail .sdm-b .bf-input.bad { border-color: var(--de-d4163a, #d4163a); }
.sd-mail .sdm-err { position: absolute; left: 48px; bottom: 18px; font: 400 13px/16px var(--font); color: var(--df-d4163a, #d4163a); }
.sd-mail .sdm-f { display: flex; gap: 8px; padding: 16px 48px 32px; }
.sd-mail .sdm-f .tbtn { flex: 1; height: 48px; }
@media (max-width: 767px) { .sd-mail .sdm-h { padding: 24px 72px 16px 24px; } .sd-mail .sdm-x { top: 14px; right: 12px; } .sd-mail .sdm-b { padding: 16px 24px 40px; } .sd-mail .sdm-err { left: 24px; } .sd-mail .sdm-f { padding: 16px 24px 24px; } }