/* "Clientes" pages. Sizes measured on Fresha (1440×900), see docs/fresha/clientes.md. */
.team-page.cl-page { padding: 0 0 64px; }
.cl-wrap { max-width: 1088px; margin: 0 auto; padding: 32px; }
.cl-lead { margin: 0; font-size: 15px; line-height: 20px; letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.cl-lead a, .cl-text a { color: var(--accent); text-decoration: none; }
.cl-muted { margin: 0; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.cl-muted.pad { padding: 8px 12px; }
.page-title .count { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
/* Duplicates banner */
.cl-dups { position: relative; display: flex; gap: 16px; padding: 16px 24px; background: var(--db-f0f0ff, rgb(240, 240, 255)); box-shadow: inset 0 0 0 1px var(--ds-dbddff, rgb(219, 221, 255)); }
.cl-dups > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1; }
.cl-dups p { margin: 0; font-size: 17px; line-height: 24px; letter-spacing: -0.2px; }
.cl-x, .rp-x { width: 36px; height: 36px; flex: none; display: grid; place-items: center; align-self: center; border-radius: 999px; }
.cl-x:hover, .rp-x:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.cl-x svg, .rp-x svg { width: 20px; height: 20px; }
/* List */
.cl-search { width: 256px; }
.cl-table { margin-top: 16px; }
.cl-head, .cl-row { display: grid; grid-template-columns: 44px 350px 210px 130px 140px 150px; align-items: center; }
.cl-head { height: 57px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.cl-head.has-sel { grid-template-columns: 44px 1fr auto; padding-right: 8px; }
.cl-hc { display: flex; align-items: center; height: 100%; padding-left: 16px; cursor: pointer; }
.cl-th { display: flex; align-items: center; gap: 8px; height: 44px; margin: 0 4px; padding: 12px; border-radius: 4px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); text-align: left; white-space: nowrap; }
button.cl-th:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.cl-th.plain { margin: 0; padding: 16px; }
.cl-sort svg { width: 16px; height: 16px; }
.cl-sel { display: flex; align-items: center; gap: 8px; padding-left: 16px; font: 500 15px/20px var(--font); }
.cl-sel i { font-style: normal; color: var(--df-767676, rgb(118, 118, 118)); }
.cl-sel .link-btn { font-weight: 500; }
.cl-bulk { display: flex; gap: 8px; }
.tbtn.danger-o { color: var(--df-d4163a, rgb(212, 22, 58)); }
.t-check.mixed:indeterminate { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat; }
.cl-row { height: 80px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); cursor: pointer; }
.cl-row:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.cl-who { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 0 16px; }
.cl-who > div { min-width: 0; }
.cl-name { display: flex; align-items: center; gap: 4px; margin: 0; font: 500 15px/20px var(--font); letter-spacing: -0.1px; }
.cl-mail { margin: 0; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ver { display: inline-grid; color: var(--accent); }
.cl-blocked { margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--db-feeceb, rgb(254, 236, 235)); color: var(--df-d4163a, rgb(212, 22, 58)); font: 500 12px/20px var(--font); }
.cl-c { margin: 0; padding: 0 16px; font-size: 15px; line-height: 20px; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-c.strong { font-weight: 600; }
.cl-avatar { position: relative; flex: none; width: var(--s); height: var(--s); display: grid; place-items: center; 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); font: 600 calc(var(--s) * .3) / 1 var(--font); overflow: hidden; }
.cl-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* The person icon, 45% of the circle and centred (a % size made its box stretch and pushed it left). */
.cl-avatar svg { width: calc(var(--s) * .45); height: calc(var(--s) * .45); }
.cl-pager { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; padding: 16px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; }
.cl-pager p { margin: 0; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.cl-pager b { font-weight: 600; }
.cl-pager div { display: flex; gap: 8px; }
.cl-sort-menu { min-width: 267px; }
.acc-head.static { cursor: default; }
.acc-head.static:hover { background: none; }
.cl-edit { margin-left: auto; color: var(--accent); font: 500 15px/20px var(--font); text-decoration: none; }
/* Dialogs */
.team-dialog.cl-dlg, .team-dialog.cd-dlg { max-width: 720px; padding: 32px 48px; border-radius: 16px; }
.cl-big { margin: 8px 0 16px; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.team-dialog .cl-big { margin: 8px 0 16px; font: 600 28px/36px var(--font); letter-spacing: -0.2px; padding: 0; }
.leave-head .sr-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cl-dlg .leave-head { justify-content: flex-end; }
.cl-text { margin: 0 0 24px; font-size: 15px; line-height: 20px; }
.cl-dlg .d-foot, .cd-dlg .d-foot { margin-top: 32px; }
.cd-dlg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cd-dlg-h h2 { margin: 0; padding-top: 8px; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.cd-small { margin: 8px 0 0; font: 600 20px/28px var(--font); }
.tbtn.xs { height: 28px; padding: 0 10px; font-size: 13px; gap: 4px; }
.tbtn.xs svg { width: 14px; height: 14px; }
/* Tag combobox */
.cl-combo { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 50px; padding: 6px 44px 6px 8px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff); cursor: text; }
.cl-combo.open, .cl-combo:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cl-chips { display: contents; }
.cl-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); font: 500 14px/20px var(--font); }
.cl-chip button { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; }
.cl-chip svg { width: 14px; height: 14px; }
.cl-combo-in { flex: 1; min-width: 120px; height: 36px; padding: 0 8px; border: 0; outline: none; font: 400 15px/20px var(--font); background: none; }
.cl-combo-in::placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.cl-combo-chev { position: absolute; right: 16px; top: 50%; margin-top: -10px; pointer-events: none; }
.cl-combo-chev svg { width: 20px; height: 20px; }
.cl-combo.open .cl-combo-chev { transform: rotate(180deg); }
.cl-combo-menu { position: absolute; left: -1px; right: -1px; bottom: calc(100% + 8px); z-index: 5; max-height: 280px; overflow-y: auto; padding: 8px 8px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: var(--pop-shadow); }
.cl-opt { width: 100%; height: 40px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; font: 400 14px/20px var(--font); text-align: left; }
.cl-opt:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.cl-opt svg { width: 20px; height: 20px; }
.cl-box { width: 24px; height: 24px; flex: none; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 4px; background: var(--db-ffffff, #fff); }
.cl-box.on { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.5 3 3 6-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; }
/* Form */
.mf-dot { width: 8px; height: 8px; border-radius: 999px; background: rgb(212, 22, 58); }
.mf-avatar.cl-form-av { width: 120px; height: 120px; margin: 24px 0 32px; font-size: 44px; }
.mf-avatar.cl-form-av svg { width: 48px; height: 48px; }
.mf-avatar.cl-form-av .edit { right: 0; bottom: 4px; }
.mf-avatar.cl-form-av .edit svg { width: 16px; height: 16px; }
.cl-dob { grid-template-columns: 1fr 1fr 1fr; }
.cl-pick { width: 100%; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff); font: 400 15px/20px var(--font); text-align: left; cursor: pointer; }
.cl-pick:hover { border-color: var(--de-a5a5a5, #a5a5a5); }
.cl-pick.set { border-color: var(--de-dbddff, rgb(219, 221, 255)); }
.cl-pick .ph { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.cl-pick > span:nth-last-child(2) { flex: 1; }
.cl-pick-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); }
.cl-pick-ic svg { width: 16px; height: 16px; }
.cl-pick-a { color: var(--accent); font-weight: 500; }
.cl-help { margin-top: 8px !important; }
.cl-h3 { margin: 24px 0 16px; font: 600 15px/20px var(--font); }
.cl-h3.first { margin: 24px 0 2px; font-size: 17px; line-height: 24px; }
.cl-checks { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.cl-check { align-items: center; }
.mf-divider.cl-div { margin: 24px 0 0; }
.grid2 .full { grid-column: 1 / -1; }
/* Cambiar idioma */
.team-dialog.cl-lang-dlg { max-width: 1024px; padding: 32px 48px; border-radius: 16px; }
.cl-lang-dlg .cl-big { margin: 0 0 8px; }
.cl-langs { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cl-lang { height: 64px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); text-align: left; font: 400 15px/20px var(--font); }
.cl-lang:hover { box-shadow: inset 0 0 0 1px var(--ds-a5a5a5, #a5a5a5); }
.cl-lang.on { box-shadow: inset 0 0 0 2px var(--accent); }
.cl-lang strong { font-weight: 600; }
.cl-lang span { color: var(--df-767676, rgb(118, 118, 118)); }
/* Añadir una recomendación */
.team-dialog.cl-ref-dlg { max-width: 720px; height: min(836px, calc(100dvh - 32px)); padding: 32px 48px 16px; border-radius: 16px; display: flex; flex-direction: column; }
.cl-ref-dlg .d-sub a { color: var(--accent); text-decoration: none; }
.cl-upsell { position: relative; display: flex; justify-content: space-between; min-height: 146px; margin: 16px 0; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; overflow: hidden;
background: radial-gradient(120% 140% at 100% 0%, #f3b8dd 0%, var(--db-f6d4ea, #f6d4ea) 35%, rgba(255, 255, 255, 0) 70%), radial-gradient(80% 120% at 85% 100%, var(--db-e7c4f7, #e7c4f7) 0%, rgba(255, 255, 255, 0) 60%), var(--db-ffffff, #fff); }
.cl-upsell > div { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 494px; }
.cl-upsell p { margin: 0; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.cl-upsell .tbtn { margin-left: -20px; }
.cl-gem { width: 105px; height: 105px; margin: 23px 15px 0 0; flex: none; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: linear-gradient(135deg, var(--db-fbe3f2, #fbe3f2), #e9a6d8 60%, #c98ae8); box-shadow: inset 0 0 20px var(--ds-ffffff, #fff); }
.cl-bigsearch { display: flex; align-items: center; height: 48px; margin-top: 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; }
.cl-bigsearch svg { width: 20px; height: 20px; margin-left: 16px; }
.cl-bigsearch input { flex: 1; height: 46px; padding: 0 16px; border: 0; outline: none; font: 400 15px/20px var(--font); background: none; }
.cl-bigsearch:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cl-ref-list { flex: 1; overflow-y: auto; margin: 16px -16px 0; }
.cl-ref { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 12px; text-align: left; position: relative; }
.cl-ref:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.cl-ref::after { content: ""; position: absolute; left: 76px; right: 16px; bottom: 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.cl-ref > span:last-child { display: flex; flex-direction: column; font: 400 15px/20px var(--font); }
.cl-ref strong { font-weight: 500; }
.cl-ref small { font-size: 15px; color: var(--df-767676, rgb(118, 118, 118)); }
/* ---------- Client drawer ---------- */
.cd { position: absolute; top: 0; right: 0; bottom: 0; width: 1026px; max-width: 100%; display: grid; grid-template-columns: 330px 216px minmax(0, 480px); background: var(--db-ffffff, #fff); animation: drawer-in .2s ease-out; }
.cd-x { top: 12px; right: calc(100% + 24px); box-shadow: 0 8px 32px rgba(19, 19, 19, .16); border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); }
.cd-load { grid-column: 1 / -1; padding: 48px; color: var(--df-767676, rgb(118, 118, 118)); }
.cd-profile { overflow-y: auto; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.cd-top { padding: 32px 24px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cd-top .cl-avatar { margin-bottom: 12px; font-size: 32px; }
.cd-name { margin: 0; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.cd-contact { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); border-radius: 4px; }
.cd-contact:hover { color: var(--ink); }
.cd-blocked { margin-top: 8px; padding: 0 10px; border-radius: 999px; background: var(--db-feeceb, rgb(254, 236, 235)); color: var(--df-d4163a, rgb(212, 22, 58)); font: 500 13px/24px var(--font); }
.cd-actions { display: flex; gap: 12px; margin-top: 24px; }
.cd-profile hr { margin: 16px 0 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.cd-facts { padding: 8px 32px; display: flex; flex-direction: column; gap: 16px; }
.cd-fact { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 15px/20px var(--font); }
.cd-fact svg { width: 24px; height: 24px; }
.cd-fact.link a { color: var(--df-767676, rgb(118, 118, 118)); text-decoration: none; }
.cd-fact.link a:hover { text-decoration: underline; }
.cd-tabs { padding: 32px 24px; overflow-y: auto; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.cd-tabs ul { margin: 0; padding: 0 0 0 0; list-style: none; }
.cd-tab { width: 188px; margin-left: -16px; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 8px; font: 500 15px/20px var(--font); text-align: left; }
.cd-tab:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.cd-tab.is-active { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.cd-tab.is-in { color: var(--accent); }
.cd-tab svg { width: 20px; height: 20px; }
.cd-tab.is-open svg { transform: rotate(180deg); }
.cd-tab .count { padding: 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 600 13px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.cd-sub .cd-tab { padding-left: 32px; }
.cd-content { overflow-y: auto; background: var(--db-ffffff, #fff); }
.cd-content.grey { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.cd-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 32px 32px 0; background: inherit; }
.cd-head h1 { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.cd-hbtns { display: flex; gap: 8px; }
.cd-body { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.cd-sec-h { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.cd-sec-h p { margin: 0; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.cd-link, .cd-a { color: var(--accent); font: 500 15px/20px var(--font); text-decoration: none; }
.cd-card { padding: 24px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.cd-card > p:first-child { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; font: 600 15px/20px var(--font); }
.cd-card > p:first-child svg { width: 16px; height: 16px; color: var(--df-767676, rgb(118, 118, 118)); }
.cd-card strong { font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.cd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cd-pills { display: flex; align-items: center; gap: 4px; }
.cd-pill { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.cd-pill:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.cd-pill.on { background: var(--ink); color: var(--do-ffffff, #fff); }
.cd-pill svg { width: 20px; height: 20px; }
.cd-empty { margin-top: 8px; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); }
.cd-empty svg { margin-bottom: 12px; }
.cd-empty-t { margin: 0; font: 600 17px/24px var(--font); }
.cd-empty-s { margin: 0; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.cd-h2 { margin: 8px 0 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.cd-body hr { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.cd-kvs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cd-kv p { margin: 0; font: 500 15px/20px var(--font); }
.cd-kv p + p, .cd-kv p + div { font-weight: 400; color: var(--df-767676, rgb(118, 118, 118)); overflow-wrap: anywhere; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cd-tag { padding: 0 10px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--ink); font: 500 13px/28px var(--font); }
.cd-muted { margin: 0; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.cd-chan span { color: var(--df-767676, rgb(118, 118, 118)); }
.cd-chan span.on { color: var(--df-1f8900, rgb(31, 137, 0)); }
.cd-chan i { font-style: normal; color: var(--df-767676, rgb(118, 118, 118)); }
.cd-addr { display: flex; flex-direction: column; font-size: 15px; line-height: 20px; }
.cd-addr span { color: var(--df-767676, rgb(118, 118, 118)); }
.cd-note { padding: 16px 20px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font-size: 15px; line-height: 20px; }
.cd-note-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cd-note-h span { color: var(--df-767676, rgb(118, 118, 118)); font-size: 13px; }
.cd-note p { margin: 4px 0 0; }
.cd-files-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cd-views { display: flex; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; overflow: hidden; }
.cd-views button { width: 40px; height: 34px; display: grid; place-items: center; }
.cd-views button.on { background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.cd-views svg { width: 20px; height: 20px; }
.cd-center { display: flex; justify-content: center; }
.cd-promo { padding: 24px; border-radius: 12px; background: linear-gradient(135deg, var(--db-ffffff, #fff) 30%, var(--db-f6dcef, #f6dcef) 75%, var(--db-e4c8fa, #e4c8fa)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cd-promo p { margin: 0; font-size: 15px; line-height: 20px; }
.cd-promo-k { font-weight: 600; color: var(--accent); }
.cd-promo-t { font: 700 24px/32px var(--font) !important; letter-spacing: -0.2px; }
.cd-promo .tbtn { margin-top: 8px; }
.cd-menu { min-width: 256px; }
/* Comment editor */
.team-dialog.cd-note-dlg { max-width: 1024px; padding: 24px 48px 32px; border-radius: 16px; background: var(--db-ffffff, #fff); }
.cd-editor { border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); padding: 12px; }
.cd-tools { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: 0 2px 8px rgba(19, 19, 19, .08), 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.cd-tools button { min-width: 32px; height: 32px; border-radius: 8px; font: 600 14px/1 var(--font); color: var(--ink); }
.cd-tools button:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.cd-tools .t-italic { font-style: italic; } .cd-tools .t-underline { text-decoration: underline; } .cd-tools .t-strikeThrough { text-decoration: line-through; } .cd-tools .t-foreColor { text-decoration: underline 2px var(--accent); }
.cd-tools .t-bold { margin-left: 12px; }
.cd-area { min-height: 260px; padding: 16px 4px 4px; outline: none; font-size: 15px; line-height: 20px; }
.cd-area:empty::before { content: attr(data-ph); color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.cd-dlg-f { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.cd-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 500 15px/20px var(--font); }
.cd-chip .cl-avatar { font-size: 8px; }
.cd-seg { display: flex; gap: 4px; padding: 4px; margin-bottom: 8px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.cd-seg button { flex: 1; height: 40px; border-radius: 999px; font: 500 15px/20px var(--font); }
.cd-seg button.on { background: var(--db-ffffff, #fff); box-shadow: 0 1px 4px rgba(19, 19, 19, .12); }
/* ---------- Merge / import full pages ---------- */
.mg-page, .im-page { min-height: 100%; background: var(--db-ffffff, #fff); overflow-y: auto; height: 100%; }
.mg-top { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 32px; }
.mg-top .round { width: 48px; height: 48px; color: var(--ink); }
.mg-top .round svg { width: 24px; height: 24px; }
.mg-wrap { width: min(1184px, 100% - 64px); margin: 0 auto; padding: 36px 0 96px; }
.mg-info { padding: 16px 20px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.mg-info strong { display: block; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.mg-info p { margin: 2px 0 0; font-size: 15px; line-height: 20px; }
.mg-table { margin-top: 32px; }
.mg-sel { display: flex; align-items: center; gap: 16px; height: 57px; padding: 10px 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 500 15px/20px var(--font); }
.mg-sel .tbtn { margin-left: auto; }
.mg-group { display: flex; gap: 16px; padding: 24px 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.mg-group > .t-check { margin-top: 12px; }
.mg-rows { flex: 1; display: flex; flex-direction: column; gap: 32px; }
.mg-row { display: grid; grid-template-columns: 48px 286px 210px 1fr; align-items: center; gap: 16px; font-size: 15px; line-height: 20px; }
.mg-name { font-weight: 500; }
.im-progress { display: flex; gap: 8px; padding: 12px 32px 0; }
.im-progress span { flex: 1; height: 4px; border-radius: 999px; background: var(--db-131313-5, rgba(19, 19, 19, .05)); }
.im-progress span.on { background: var(--accent); }
.im-top { display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 72px; padding: 0 32px; }
.im-top .mf-top-title { opacity: 0; }
.im-top .tbtn svg { width: 20px; height: 20px; }
.im-wrap { width: min(696px, 100% - 32px); margin: 0 auto; padding-bottom: 96px; }
.im-wrap.wide { width: min(1024px, 100% - 64px); }
.im-crumb { margin: 0 0 12px; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.im-h1, .im-wrap .mf-title { margin: 0 0 12px; }
.im-lead { margin: 0 0 32px; font-size: 17px; line-height: 24px; letter-spacing: -0.2px; color: var(--df-767676, rgb(118, 118, 118)); }
.im-lead a { color: var(--accent); text-decoration: none; }
.im-consent { padding: 18px 20px; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); box-shadow: inset 0 0 0 1px var(--ds-dbddff, rgb(219, 221, 255)); font-size: 15px; line-height: 20px; }
.im-drop { margin-top: 20px; height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 12px; cursor: pointer;
background: var(--db-f9f9f9, rgb(249, 249, 249)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='.5' y='.5' width='calc(100%25 - 1px)' height='calc(100%25 - 1px)' rx='12' fill='none' stroke='%23d3d3d3' stroke-dasharray='4 4'/%3E%3C/svg%3E"); outline: 1px dashed var(--de-d3d3d3, rgb(211, 211, 211)); outline-offset: -1px; }
.im-drop.over { background-color: var(--db-f0f0ff, rgb(240, 240, 255)); }
.im-drop strong { font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.im-drop .tbtn { margin-top: 12px; }
.im-ic svg { width: 32px; height: 32px; }
.im-foot { margin: 8px 0 0; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.im-foot .link-btn { font-weight: 400; }
.im-progress.two { padding-right: 32px; }
.sgc .mf-title { margin-top: 0; }
.sgc { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.sgc-rule { padding: 20px 24px; border-radius: 12px; background: var(--db-ffffff, #fff); border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sgc-k { margin: 0 0 16px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sgc-row { display: flex; align-items: center; gap: 12px; font: 500 15px/20px var(--font); }
.sgc-row .ts { flex: none; width: 262px; height: 36px; }
.ts.sgc-type { text-align: left; font: 400 15px/20px var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts.sgc-type.placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
/* "Seleccionar el tipo" list (Fresha): field-wide, 8px below, up to 400px with scroll, radius 12,
group titles 17/24 600 (8 0 4), options 40 high 15/20 500, a 1px line between groups. */
.team-menu.sgt-menu { min-width: 0; max-height: 400px; overflow-y: auto; border-radius: 12px; }
.sgt-menu .sgt-h { margin: 0; padding: 8px 0 4px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; color: var(--ink); }
.sgt-menu .sgt-sep { margin: 8px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sgt-menu .menu-item { min-height: 40px; height: auto; padding: 8px 12px; border-radius: 8px; font: 500 15px/20px var(--font); }
.sgt-menu .menu-item:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.sgc-actions { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 20px; }
.sgc-cond { display: block; padding-bottom: 8px; font: 500 15px/20px var(--font); }
/* "Eliminar" (Fresha: only with two or more rules, right of "+ Añadir condición", 15/20 500 ink). */
.sgc-rm { font: 500 15px/20px var(--font); color: var(--ink); }
.sgc-rule + .sgc-rule { margin-top: 24px; }
/* Rule rows (Fresha): labels in a 55px column ("donde" right-aligned), 8px between rows,
the error 4px under the type field, the bin at the far right. */
.sgc-row > span:first-child { flex: none; width: 55px; }
.sgc-c { margin-top: 8px; }
.sgc-c > span:first-child { text-align: right; }
.sgc-row .ti.sgc-val { width: 262px; height: 36px; }
.sgc-c [data-op], .sgc-c .sgc-val { margin-left: -3px; }
.sgc-del { flex: none; width: 36px; height: 36px; }
.sgc-del svg { width: 20px; height: 20px; }
.ts.sgc-type[aria-invalid="true"] { border-color: var(--de-d4163a, rgb(212, 22, 58)); box-shadow: none; }
.sgc-err { margin: 4px 0 0 67px; font: 400 13px/16px var(--font); color: var(--df-d4163a, rgb(212, 22, 58)); }
/* Values (Fresha): a 262px slot holds one field, or two of 125 with 12 between;
money fields carry "€", dates open the calendar, lists the "Valor" panel. */
.sgc-in { position: relative; display: block; width: 125px; flex: none; }
.sgc-in.full { width: 262px; }
.sgc-in .ti { width: 100%; height: 36px; }
.sgc-in.money span { position: absolute; left: 13px; top: 8px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sgc-in.money .ti { padding-left: 31px; }
.sgc-two { display: flex; gap: 12px; width: 262px; flex: none; }
.sgc-two .ts { width: 125px; }
/* Fresha: 9px before the comparison, 8px before the value. */
.sgc-row > .sgc-in.full, .sgc-row > .sgc-two, .sgc-row > [data-day], .sgc-row > [data-pick], .sgc-row > [data-modal] { margin-left: -4px; }
.sgc-row:not(.sgc-c) > [data-op] { margin-left: -3px; }
.sgt-ops .menu-item { gap: 8px; }
.sgt-ic { flex: none; width: 20px; height: 20px; display: grid; place-items: center; }
.sgt-ic svg { width: 20px; height: 20px; }
.sgt-ops .menu-item > span:not(.sgt-ic):not(.menu-check) { flex: 1; }
/* "Valor" list panel: 320 wide, centred, search 36 high, rows 40 with a checkbox. */
.popover.sgv-pop { position: fixed; z-index: 80; background: var(--db-ffffff, #fff); border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; box-shadow: rgba(19, 19, 19, .08) 0 2px 8px, rgba(19, 19, 19, .12) 0 4px 20px; }
.sgv-pick { width: 320px; padding: 12px 20px 8px; }
.sgv-search { display: block; }
.sgv-search input { width: 100%; height: 36px; padding: 0 8px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; font: 400 15px/20px var(--font); outline: 0; }
.sgv-search input:focus { border-color: var(--accent); }
.sgv-search input::placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.sgv-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.sgv-opt { display: flex; align-items: center; gap: 12px; margin: 0 -12px; padding: 8px 12px; min-height: 40px; border-radius: 8px; cursor: pointer; }
.sgv-opt:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.sgv-opt p { margin: 0; font: 500 15px/20px var(--font); }
.sgv-none { padding: 10px 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* Calendar panel (Fresha, from its screenshot): 345 wide, header 36 with arrows,
weekdays from Monday, 7 columns of 44, days in 38px circles, today ringed. */
.sgv-cal { width: 345px; padding: 18px 17px 10px; }
.sgv-cal-h { display: flex; align-items: center; justify-content: space-between; height: 36px; margin-bottom: 15px; padding: 0 7px; }
.sgv-cal-h p { margin: 0; font: 600 15px/20px var(--font); }
.sgv-cal-h .icon-btn { width: 36px; height: 36px; }
.sgv-cal-g { display: grid; grid-template-columns: repeat(7, 44px); grid-template-rows: 40px; grid-auto-rows: 44px; }
.sgv-cal-g .wd { height: 32px; display: grid; place-items: center; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sgv-d { width: 38px; height: 38px; margin: 3px; display: grid; place-items: center; border: 0; background: none; border-radius: 999px; font: 400 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.sgv-d:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.sgv-d.today { box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
.sgv-d.on { background: var(--ink); color: var(--do-ffffff, #fff); }
.sgc-foot { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; }
.sgc-foot p { margin: 0; color: var(--df-767676, rgb(118, 118, 118)); font: 400 15px/20px var(--font); text-align: right; }
.sgc-foot p b { display: block; font-weight: 600; color: var(--ink); }
/* Fresha: a 960px column, the title 124 from the top and "Más información" on its own line. */
.sgc .im-wrap.wide { width: min(960px, 100% - 32px); max-width: none; }
.sgc .im-wrap.wide > .mf-title { margin-top: 36px; }
.sgc .im-lead #more { display: block; width: fit-content; }
.sgc-kh { display: flex; align-items: flex-start; justify-content: space-between; }
.sgc-x, .sgc-narrow, .sgc-bar { display: none; }
/* Below 1024px (Fresha): column of up to 896 with 32 margins, only an X on top,
fields stacked full width (48 high, 12 apart) under bold labels, "Eliminar" by
"Regla N", and the total with Continuar in a fixed bar at the bottom. */
@media (max-width: 1023px) {
.sgc .im-top .sgc-wide, .sgc .sgc-wide { display: none; }
.sgc-x { display: grid; place-items: center; width: 48px; height: 48px; margin-top: 20px; border-radius: 999px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); color: var(--ink); }
.sgc-x svg { width: 24px; height: 24px; }
.sgc .im-wrap.wide { width: min(896px, 100% - 64px); padding-bottom: 120px; }
.sgc .im-lead #more { display: inline; }
.sgc-narrow { display: block; }
.sgc-kh .sgc-rm { margin-top: -8px; padding: 8px 16px; margin-right: -16px; }
.sgc-row { flex-direction: column; align-items: stretch; gap: 12px; }
.sgc-row > span:first-child { width: auto; font-weight: 600; }
.sgc-row .ts, .sgc-row .ti, .sgc-in, .sgc-in.full, .sgc-two { width: 100%; height: 48px; margin-left: 0 !important; }
.sgc-in .ti { height: 48px; }
.sgc-in.money span { top: 14px; }
.sgc-two .ts, .sgc-two .sgc-in { flex: 1; width: auto; }
.sgc-c { position: relative; margin-top: 16px; gap: 12px; }
.sgc-c > span:first-child { height: 36px; display: flex; align-items: center; margin-bottom: -8px; text-align: left; }
.sgc-c .sgc-del { position: absolute; top: 0; right: -8px; }
.sgc-actions { margin-top: 12px; }
.sgc-cond { padding: 8px 0; font: 500 17px/24px var(--font); }
.sgc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 16px 32px; background: var(--db-ffffff, #fff); box-shadow: var(--ds-e5e5e5, rgb(229, 229, 229)) 0 -1px 0 0; }
.sgc-bar p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sgc-bar p b { display: block; font-weight: 600; color: var(--ink); }
}
/* Phones (Fresha, 375 wide): 20px margins, title 28/36, lead 15/20, cards padded 20, a bare X. */
@media (max-width: 767px) {
.sgc .im-progress { padding: 12px 20px 0; }
.sgc .im-top { padding: 0 8px; }
.sgc-x { border: 0; background: none; margin-top: 5px; }
.sgc .im-wrap.wide { width: calc(100% - 40px); }
.sgc .im-wrap.wide > .mf-title { margin-top: 0; font: 600 28px/36px var(--font); }
.sgc .im-lead { font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.sgc-rule { padding: 20px; }
.sgc-bar { padding: 16px 20px; }
}
/* ---------- Segments ---------- */
.team-page.sg-page { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
/* Fresha: the bar sticks under the header (68 high, page grey) and the black pill slides (300 ms). */
.sg-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; margin: 16px 0 8px; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.team-page.sg-page { padding-bottom: 0; }
.sg-pills { position: relative; isolation: isolate; }
.sg-pills .cd-pill.on { background: none; }
.sg-pills .cd-pill { position: relative; z-index: 1; transition: color .2s; }
.sg-ind { position: absolute; left: 0; top: 0; height: 36px; border-radius: 999px; background: var(--ink); transition: transform .3s, width .1s; }
.sg-ind.still { transition: none; }
.sg-search { width: 205px; }
.sg-list { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 84px; }
.sg-list + .sg-list { margin-top: 48px; }
.sg-h2 { margin: 0; font: 600 20px/28px var(--font); }
.sg-card { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
/* Fresha draws each icon on a gradient: "wild princess" for standard segments, "burnt orange" (with a pencil) for custom ones. */
.sg-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 999px; background: url("/clients/seg-blue.svg") center / cover; color: #fff; }
.sg-ic.cus { background-image: url("/clients/seg-orange.svg"); }
.sg-ic svg { width: 24px; height: 24px; }
.sg-txt { flex: 1; min-width: 0; }
.sg-txt p { margin: 0; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.sg-txt p:first-child { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.sg-txt strong { font-weight: 600; }
.sg-txt .count { padding: 0 6px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); font: 600 13px/20px var(--font); }
/* "Añadir segmento": Fresha's secondary pill (36 high, 1px #d3d3d3, 15/20 500, + 20px). */
.sg-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); color: var(--ink); font: 500 15px/20px var(--font); text-decoration: none; transition: transform .1s ease-out; }
.sg-add:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); border-color: var(--de-a5a5a5, rgb(165, 165, 165)); }
.sg-add:active { transform: scale(.96); }
.sg-add svg { width: 20px; height: 20px; }
/* ---------- Loyalty ---------- */
.team-page.ly-page { position: relative; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--db-ffffff, #fff); }
.ly-glow { position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(60% 65% at 102% 0%, rgba(176, 116, 242, .95), rgba(196, 150, 246, .55) 45%, rgba(255, 255, 255, 0) 75%), radial-gradient(55% 70% at 104% 72%, rgba(232, 118, 176, .9), rgba(240, 170, 205, .5) 45%, rgba(255, 255, 255, 0) 75%), radial-gradient(70% 90% at 95% 40%, rgba(245, 225, 250, .9), rgba(255, 255, 255, 0) 80%); filter: blur(12px); }
.ly-col { position: relative; width: 509px; margin-right: 404px; }
.ly-badge { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; }
.ly-badge p { margin: 0; font: 600 15px/20px var(--font); }
.ly-app { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #c27cf7, #8a5cf6); color: #fff; }
.ly-app svg { width: 22px; height: 22px; }
.ly-h1 { margin: 8px 0 16px; font: 700 40px/44px var(--font); letter-spacing: -0.2px; }
.ly-lead { margin: 0 0 24px; font-size: 17px; line-height: 24px; letter-spacing: -0.2px; }
.ly-list { margin: 0 0 32px; padding: 0; list-style: none; }
.ly-list li { display: flex; gap: 12px; padding-bottom: 8px; font-size: 15px; line-height: 20px; }
.ly-list svg { flex: none; margin-top: 2px; }
.ly-save { margin: 0; font-size: 15px; line-height: 20px; color: var(--df-1f8900, rgb(31, 137, 0)); }
.ly-price { margin: 0; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
.ly-price s { color: var(--df-767676, rgb(118, 118, 118)); }
.ly-trial { margin: 0 0 40px; font: 500 17px/24px var(--font); }
.ly-btns { display: flex; gap: 4px; }
/* ---------- Reputation ---------- */
.rp-tabs { display: flex; gap: 24px; margin-top: 24px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.rp-tabs button { display: flex; align-items: center; gap: 6px; height: 52px; font: 600 15px/20px var(--font); color: var(--ink); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rp-tabs button.on { border-color: var(--ink); }
.rp-tabs svg { color: var(--accent); }
.rp-ai { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 20px 24px; border-radius: 12px; color: #fff;
background: linear-gradient(100deg, #e15aa5 0%, #b74fd8 55%, #f06bb4 100%); overflow: hidden; }
.rp-ai > div { max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rp-ai p { margin: 0; font-size: 15px; line-height: 20px; }
.rp-ai-t { font: 600 17px/24px var(--font) !important; }
.rp-ai .tbtn { margin-top: 12px; border-color: var(--de-ffffff, #fff); }
.rp-orb { width: 128px; height: 128px; margin-right: 56px; flex: none; display: grid; place-items: center; border-radius: 999px; background: radial-gradient(circle at 35% 35%, var(--db-ffffff, #fff) 0%, var(--db-f6c6ff, #f6c6ff) 25%, #b56cf3 60%, #e25fae 100%); box-shadow: 0 0 40px rgba(255, 255, 255, .6); color: #fff; }
.rp-orb svg { width: 40px; height: 40px; }
.rp-x { position: absolute; top: 8px; right: 8px; color: #fff; }
.rp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.rp-card { padding: 24px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.rp-card > p { margin: 0 0 8px; font: 600 15px/20px var(--font); }
.rp-card > strong { display: flex; align-items: center; gap: 6px; font: 600 28px/36px var(--font); }
.rp-card small { display: block; margin-top: 8px; color: var(--df-767676, rgb(118, 118, 118)); font-size: 13px; }
.rp-star, .rp-stars { color: #f5b301; display: inline-flex; align-items: center; }
.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.rp-bh { display: flex; justify-content: space-between; align-items: center; }
.rp-logo { font: 700 22px/1 var(--font); letter-spacing: -0.04em; }
.rp-bb { display: flex; gap: 32px; margin-top: 16px; }
.rp-big { font: 600 40px/44px var(--font); }
.rp-stars em { font-style: normal; color: var(--ink); font-size: 13px; margin-left: 4px; }
.rp-bars { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rp-bar { display: grid; grid-template-columns: 16px 1fr 16px; align-items: center; gap: 8px; font-size: 13px; color: var(--df-767676, rgb(118, 118, 118)); }
.rp-bar i { height: 4px; border-radius: 999px; background: var(--db-e5e5e5, rgb(229, 229, 229)); overflow: hidden; }
.rp-bar b { display: block; height: 100%; background: #f5b301; }
.rp-google { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
background: linear-gradient(135deg, rgba(251, 188, 5, .18), rgba(255, 255, 255, 0) 40%), linear-gradient(315deg, rgba(66, 133, 244, .2), rgba(255, 255, 255, 0) 45%), linear-gradient(45deg, rgba(52, 168, 83, .18), rgba(255, 255, 255, 0) 40%), var(--db-ffffff, #fff); }
.rp-google p { margin: 0 0 12px; color: var(--df-767676, rgb(118, 118, 118)); font-size: 15px; }
.rp-g { width: 32px; height: 32px; display: grid; place-items: center; font: 700 22px/1 Arial, sans-serif; color: #4285f4; }
.rp-h2 { margin: 48px 0 16px; font: 600 20px/28px var(--font); }
.rp-empty { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.rp-illu { width: 40px; height: 40px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #b9a8ff, #6950f3); color: #fff; }
.rp-et { margin: 0; font: 600 17px/24px var(--font); }
.rp-es { margin: 0 0 16px; max-width: 460px; color: var(--df-767676, rgb(118, 118, 118)); font-size: 15px; line-height: 20px; }
.rp-tools { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.rp-right { margin-left: auto; }
.rp-all { display: grid; grid-template-columns: 280px 1fr; gap: 24px; margin-top: 24px; }
.rp-filters { display: flex; flex-direction: column; gap: 12px; }
.rp-score strong { font: 600 40px/44px var(--font); display: block; }
.rp-score p { margin: 4px 0 12px; color: var(--df-767676, rgb(118, 118, 118)); font-size: 13px; }
.rp-ft { margin: 16px 0 0; font: 600 15px/20px var(--font); }
.rp-tip { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 400px; padding: 20px; border-radius: 12px; background: var(--accent); color: #fff; box-shadow: var(--pop-shadow); }
.rp-tip p { margin: 0 0 12px; font-size: 13px; line-height: 18px; }
.rp-tip-t { font: 600 15px/20px var(--font) !important; margin-bottom: 4px !important; }
.rp-video { height: 200px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #2b2b40, #6b6b8a); }
.rp-video span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; background: var(--db-ffffff-50, rgba(255, 255, 255, .5)); font-size: 18px; }
.rp-tip-f { display: flex; align-items: center; gap: 24px; margin-top: 16px; }
.rp-tip-f .link-btn { color: #fff; font-weight: 500; font-size: 14px; }
.rp-tip-f .link-btn:first-child { margin-right: auto; }
.rp-tip-f .tbtn { background: var(--db-ffffff, #fff); border-color: var(--de-ffffff, #fff); }
@media (max-width: 1100px) {
/* Fresha keeps every column on tablets: the table slides sideways. */
.cl-table { overflow-x: auto; }
.cl-head, .cl-row { width: max-content; min-width: 100%; }
.cd { grid-template-columns: 300px 200px minmax(0, 1fr); }
.ly-col { margin-right: 0; }
}
@media (max-width: 767px) {
.cl-wrap { padding: 20px 16px; }
.cl-head, .cl-row { grid-template-columns: 0 minmax(0, 1fr) 0 0 0 0; }
.cl-hc, .cl-row > p, .cl-head > :not(.cl-th:first-of-type) { display: none !important; }
.cl-search { width: 100%; }
.cd { grid-template-columns: 1fr; overflow-y: auto; }
.cd-tabs { border: 0; padding: 0 24px; } .cd-tab { width: 100%; margin: 0; }
.cl-langs { grid-template-columns: 1fr 1fr; }
.rp-stats, .rp-two, .rp-all { grid-template-columns: 1fr; }
.rp-tip { left: 16px; width: auto; }
.ly-col { width: auto; padding: 24px 16px; }
}
/* Segment "Acciones" (Fresha: 200 wide; "Ver clientes" at 0 stays dark but does nothing). */
.team-menu.sg-menu { min-width: 0; width: 200px; }
.sg-card [data-acts] { gap: 6px; }
.sg-card [data-acts] i, .sg-card [data-acts] i svg { width: 20px; height: 20px; }
.team-menu .menu-item.sg-view[aria-disabled="true"] { opacity: 1; }
/* Active filters (Fresha): "Filtros" outlined purple; a chip per filter under the
search (36 high, purple outline, 15/20 500, ×), then "Borrar todos". */
.t-toolbar:has(.cl-chips) { flex-wrap: wrap; row-gap: 16px; }
.cl-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cl-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 7px 0 15px; border: 1px solid var(--accent); border-radius: 999px; background: var(--db-ffffff, #fff); font: 500 15px/20px var(--font); color: var(--ink); }
.cl-chip button { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.cl-chip button svg { width: 20px; height: 20px; }
.tbtn.cl-clear { border-color: transparent; background: none; font: 500 15px/20px var(--font); }
.tbtn.cl-flt-on { border-color: var(--accent); }
/* "No se han encontrado clientes": search glyph 56, title 20/28 600, hint 15/20 grey. */
.cl-none { display: flex; flex-direction: column; align-items: center; padding: 64px 0 48px; text-align: center; }
.cl-none [data-icon] svg { width: 56px; height: 56px; }
.cl-none p { margin: 16px 0 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.cl-none small { margin-top: 4px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* Filters drawer: how many are on (purple disc) and "Borrar" on the right. */
.drawer .acc-head { font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.acc-n:empty { display: none; }
.acc-n { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font: 600 13px/16px var(--font); }
.acc-clear { display: none; margin-left: auto; font: 500 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.acc.on .acc-clear { display: inline; }
.acc.on .acc-head .chev { margin-left: 4px; }
.acc.on .cl-edit { display: none; }
.acc-head.seg { cursor: pointer; }
.acc-head.seg:hover { background: var(--t-soft, var(--db-f9f9f9-h, #f9f9f9)); }
/* "Segmentos de clientes" window (Fresha: 720 wide, header 30/48, rows with checkbox, name 15/20 600 and grey 13/16 text, footer count + Aplicar). */
.team-dialog.sgm-dlg { max-width: 720px; max-height: calc(100dvh - 160px); padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; }
.sgm-head { display: flex; align-items: flex-start; gap: 16px; padding: 30px 48px 0; }
.sgm-head > div { flex: 1; }
.team-dialog .sgm-head h2 { margin: 0; padding: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.sgm-head p { margin: 1px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sgm-head a { color: var(--accent); font-weight: 500; text-decoration: none; }
.sgm-head .icon-btn { flex: none; width: 48px; height: 48px; margin: -10px -12px 0 0; }
.sgm-body { flex: 1; min-height: 0; overflow-y: auto; padding: 36px 48px 8px; }
.sgm-search { display: flex; align-items: center; height: 48px; padding: 0 0 0 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; }
.sgm-search:focus-within { border-color: var(--accent); }
.sgm-search [data-icon] svg { width: 20px; height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.sgm-search input { flex: 1; height: 46px; padding: 0 16px 0 8px; border: 0; outline: 0; background: none; font: 400 15px/20px var(--font); }
#sgm-l { margin-top: 47px; }
.sgm-row { display: flex; align-items: flex-start; gap: 12px; padding: 17px 0 15px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); cursor: pointer; }
.sgm-row.all { align-items: center; padding: 0 0 15px; border-top: 0; }
.sgm-row h3 { margin: 0; font: 600 15px/20px var(--font); }
.sgm-row p { margin: 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sgm-row .count { padding: 0 6px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); font: 600 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sgm-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 48px 32px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sgm-foot p { margin: 0; font: 400 15px/20px var(--font); }
/* Segment name step and standard segment editor (Fresha: 600 column, labels 15/20 600, fields 48). */
.sgd .im-top, .sgs .im-top { position: relative; }
.sgd-back { position: absolute; left: 32px; top: 12px; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); }
.sgd-back svg { width: 20px; height: 20px; }
.sgd-wrap { width: min(600px, 100% - 32px); }
.sgd-wrap > .mf-title { margin: 36px 0 32px; letter-spacing: -0.2px; }
.sgd .sgd-wrap > .mf-title { margin-bottom: 12px; }
.sgd .im-lead { margin-bottom: 32px; }
.sgd-wrap .tf { display: flex; flex-direction: column; gap: 4px; }
.sgd-wrap .tf > label { display: flex; justify-content: space-between; font-size: 15px; line-height: 20px; font-weight: 600; }
.sgd-wrap .tf > label .count { font-weight: 400; color: var(--df-767676, rgb(118, 118, 118)); }
.sgd-wrap .ti { height: 48px; width: 100%; }
.sgd-err { margin: 0; font-size: 13px; line-height: 18px; color: var(--df-d4163a, rgb(212, 22, 58)); }
.sgd-wrap .ti[aria-invalid="true"] { border-color: var(--de-d4163a, rgb(212, 22, 58)); }
.sgd-badge { margin-top: 24px; }
.sgd-badge strong { font-weight: 400; }
.sgs .im-top .sgs-opt { margin-right: 0; }
.sgs-row { display: flex; gap: 16px; margin-bottom: 24px; }
.sgs-row > .tf { flex: 1; min-width: 0; }
.sgs-row .ts { height: 48px; width: 100%; text-align: left; }
.sgs-in { position: relative; display: block; }
.sgs-in .ti { padding-right: 72px; }
.sgs-in span { position: absolute; right: 16px; top: 14px; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); pointer-events: none; }
.sgs-in.money .ti { padding: 0 16px 0 36px; }
.sgs-in.money span { left: 16px; right: auto; color: var(--df-131313, rgb(19, 19, 19)); }
.sgs-fixed:disabled { background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-acacac, rgb(172, 172, 172)); -webkit-text-fill-color: rgb(172, 172, 172); opacity: 1; }
.sgs-pick { max-width: none; }
.sgs-total { margin: 0; font-size: 15px; line-height: 20px; }
.sgs-total b { font-weight: 600; }
.sgs-h { margin: 47px 0 16px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.sgs-menu { width: 332px; }
.sgs-menu .menu-text small { white-space: normal; }
@media (max-width: 767px) {
.sgd-back { left: 8px; }
.sgs-row { flex-direction: column; gap: 24px; }
.sgd-wrap > .mf-title { margin-top: 0; }
}
/* Fresha: Opciones 145 without border, Cerrar 89, Guardar 103; total in grey with the number dark. */
.sgs .sgs-opt { min-width: 145px; justify-content: center; border-color: transparent; background: transparent; }
.sgs .sgs-opt:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.sgd #close, .sgs #close { min-width: 89px; justify-content: center; }
.sgd #save, .sgs #save { min-width: 103px; justify-content: center; }
.sgs-total { color: var(--df-767676, rgb(118, 118, 118)); }
.sgs-total b { color: var(--df-0d0d0d, rgb(13, 13, 13)); }
.sgs .sgd-badge { margin-top: 16px; }
.sgs .sgs-h { margin-top: 48px; }
.sgs-menu .menu-item { align-items: center; }
/* "Clientes que más gastan": the amount 314 wide, the months 270 (Fresha). */
.sgs-row.sgs-top-0 > .tf:first-child { flex: 0 0 314px; }
.sgs-in.money span { left: 17px; color: var(--df-767676, rgb(118, 118, 118)); }
/* Fresha's checkbox text sits 2px lower with the help right under it. */
.sgd-badge strong { padding-top: 2px; }
.sgd-badge small { margin-top: 0; }
@media (max-width: 767px) { .sgs-row.sgs-top-0 > .tf:first-child { flex: none; } }
/* "Todos los servicios seleccionados · Editar" sits 8px under the select (Fresha). */
.sgs-pickrow { margin-top: -16px; }
/* Standard segment editor below 1024 (Fresha): "⋮" and X at the top, one field per
row in a 536 column, "Opciones avanzadas" 15/20 and the total with Guardar in the bottom bar. */
.sgs-ic { display: none; }
@media (max-width: 1023px) {
.sgs .sgs-wide { display: none; }
.sgs .im-top { gap: 4px; }
.sgs-ic { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink); }
.sgs-ic svg { width: 20px; height: 20px; }
.sgs .sgd-wrap { width: min(536px, 100% - 64px); padding-bottom: 120px; }
.sgs-row { flex-direction: column; gap: 24px; }
.sgs-row.sgs-top-0 > .tf:first-child { flex: none; }
.sgs-total { display: none; }
.sgs .sgs-h { margin-top: 32px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.sgs #save2 { min-width: 103px; justify-content: center; }
}
@media (max-width: 767px) {
.sgs .im-top { padding: 0 20px; }
.sgs .sgd-wrap { width: calc(100% - 40px); }
.sgs .sgd-wrap > .mf-title { margin-top: 0; font: 600 28px/36px var(--font); }
}
/* Name step below 1024 (Fresha): ← and X as 48 circles, 536 column, Guardar alone in the bottom bar. */
@media (max-width: 1023px) {
.sgd .sgc-wide { display: none; }
.sgd .sgc-x { margin-top: 0; }
.sgd .sgd-wrap { width: min(536px, 100% - 64px); padding-bottom: 120px; }
.sgd-bar { justify-content: flex-end; }
.sgd #save2 { min-width: 103px; justify-content: center; }
}
@media (max-width: 767px) {
.sgd .im-progress { padding: 12px 20px 0; }
.sgd .im-top { padding: 0 8px; }
.sgd .sgc-x { margin-top: 0; }
.sgd-back { border: 0; background: none; }
.sgd .sgd-wrap { width: calc(100% - 40px); }
.sgd .sgd-wrap > .mf-title { font: 600 28px/36px var(--font); }
.sgd .im-lead { margin-bottom: 32px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
}
/* Badge of a custom segment (Fresha): name 20 at most, 22 colours of 32 in rows of 12, preview. */
.sgd-bn { margin-top: 24px; }
.sgd-lbl { margin: 24px 0 8px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.sgd-colors { display: grid; grid-template-columns: repeat(12, 32px); justify-content: space-between; row-gap: 16px; }
.sgd-sw { position: relative; width: 32px; height: 32px; border-radius: 999px; background: var(--c); border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); cursor: pointer; }
.sgd-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sgd-sw:has(input:checked) { outline: 2px solid var(--c); outline-offset: 2px; }
.sgd-sw:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.sgd-hint { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sgd-err { color: var(--df-d4163a, rgb(212, 22, 58)); line-height: 16px; }
.sgd-wrap .ti[aria-invalid="true"] { border-color: var(--de-d4163a, rgb(212, 22, 58)); }
.seg-badge { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; height: 24px; min-width: 24px; padding: 0 12px; gap: 4px; border: 0; border-radius: 999px; background: var(--c); color: var(--t); box-shadow: inset 0 0 0 1px var(--c); font: 500 13px/16px var(--font); }
.seg-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.seg-badge { cursor: pointer; }
@media (max-width: 767px) { .sgd-colors { grid-template-columns: repeat(auto-fill, 32px); gap: 16px; justify-content: start; } }
/* Client's file: badges, tags and "Añadir etiqueta" under the contact (Fresha: 16 below, 8 apart). */
.cd-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.cd-tag.sm { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; font: 500 13px/16px var(--font); }
.cd-addtag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); color: var(--ink); font: 500 13px/16px var(--font); cursor: pointer; }
.cd-addtag:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.cd-addtag svg { width: 16px; height: 16px; }
/* A badge's segment window (Fresha: 720 wide, title 20/28, Editar segmento). */
.team-dialog.sgx-dlg { width: calc(100% - 32px); max-width: 720px; padding: 0 0 32px; border-radius: 16px; box-shadow: 0 2px 8px rgba(19, 19, 19, .08), 0 4px 20px rgba(19, 19, 19, .12); }
.team-backdrop:has(.sgx-dlg) { z-index: 50; background: var(--db-131313-25, rgba(19, 19, 19, .25)); }
.sgx-h { position: relative; padding: 30px 96px 0 48px; }
.sgx-h p { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.sgx-h .icon-btn { position: absolute; top: 20px; right: 36px; width: 48px; height: 48px; }
.sgx-h .icon-btn svg { width: 24px; height: 24px; }
.sgx-b { padding: 24px 48px 0; }
.sgx-b p { margin: 0 0 12px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.sgx-b a:not(.tbtn) { color: var(--accent); text-decoration: none; }
.sgx-b a:not(.tbtn):hover { text-decoration: underline; }
.sgx-b .sgx-when { margin: -4px 0 24px; color: var(--df-767676, rgb(118, 118, 118)); }
.sgx-b .tbtn svg { width: 16px; height: 16px; }
@media (max-width: 767px) { .sgx-h { padding-left: 20px; padding-right: 76px; } .sgx-h .icon-btn { right: 8px; } .sgx-b { padding: 24px 20px 0; } }
/* Email and phone menus of the client's file (Fresha: 200 wide; a bottom sheet on phones). */
.team-menu.cd-cmenu { min-width: 200px; width: 200px; }
.cd-sheet-scrim { position: fixed; inset: 0; z-index: 80; background: var(--db-131313-25, rgba(19, 19, 19, .25)); }
.cd-sheet { position: fixed; left: 0; right: 0; bottom: 0; padding: 73px 9px 25px; border-radius: 16px 16px 0 0; background: var(--db-ffffff, #fff); animation: sheet-up .22s ease-out; }
.cd-sheet .menu-item { width: 100%; height: 48px; padding: 8px 12px; border-radius: 8px; font: 500 17px/24px var(--font); text-align: left; }
.cd-sheet .menu-item:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.cd-sheet-x { position: absolute; top: 7px; right: 9px; width: 48px; height: 48px; }
.cd-sheet-x svg { width: 24px; height: 24px; }
/* "Eliminar" in the client form's top bar (Fresha: 102 wide, red text, grey ring). */
.mf-top .cl-del { min-width: 102px; justify-content: center; }
/* "Eliminar cliente" (Fresha: 512 × 299; title 20/28 at 30, text at 90, buttons 202 at 219). */
.team-dialog.cl-del-dlg { width: calc(100% - 32px); max-width: 512px; min-height: 299px; padding: 0 48px 32px; border-radius: 16px; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(19, 19, 19, .08), 0 4px 20px rgba(19, 19, 19, .12); }
.team-backdrop:has(.cl-del-dlg), .team-backdrop:has(.mgc-dlg) { background: var(--db-131313-25, rgba(19, 19, 19, .25)); }
.cl-del-h { position: relative; padding: 30px 48px 0 0; }
.cl-del-h p { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.cl-del-h .icon-btn, .mgc-x { position: absolute; top: 20px; right: -12px; width: 48px; height: 48px; }
.cl-del-h .icon-btn svg, .mgc-x svg { width: 24px; height: 24px; }
.cl-del-p { margin: 32px 0 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.cl-del-f { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
/* "Confirmar fusión" (Fresha: 512 wide, title 28/36, "Entiendo…" ticked before Confirmar). */
.team-dialog.mgc-dlg { position: relative; width: calc(100% - 32px); max-width: 512px; padding: 72px 48px 32px; border-radius: 16px; box-shadow: 0 2px 8px rgba(19, 19, 19, .08), 0 4px 20px rgba(19, 19, 19, .12); }
.mgc-x { right: 36px; }
.team-dialog .mgc-t { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.mgc-p { margin: 32px 0 0; font: 400 17px/24px var(--font); letter-spacing: -0.2px; }
.mgc-c { margin-top: 24px; align-items: center; }
.mgc-f { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; }
/* Fresha: Cerrar 89 and Guardar 103 next to Eliminar. */
.mf-top:has(.cl-del) #close { min-width: 89px; justify-content: center; }
.mf-top:has(.cl-del) #save { min-width: 103px; justify-content: center; }
/* "Todos los filtros" of the client list, compact as in Fresha: title 28/36 at 32, rows of
56 one after the other, 24px icons, line under the text only, options of 44 (8 above,
28 below), tag boxes every 40, footer of 80 with 17/24 buttons. */
.cl-flt .drawer-head { padding: 32px 32px 0; }
.cl-flt .drawer-head h2 { font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.cl-flt .drawer-body { display: block; padding: 32px 32px 16px; gap: 0; }
.cl-flt .acc { border: 0; }
.cl-flt .acc::after { content: ""; display: block; height: 1px; margin-left: 36px; background: var(--db-e5e5e5, rgb(229, 229, 229)); }
.cl-flt .acc:last-child::after { display: none; }
.cl-flt .acc-head { width: calc(100% + 32px); height: 56px; margin: 0 -16px; padding: 0 16px; gap: 12px; border-radius: 12px; font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.cl-flt .acc-head > span[data-icon] svg, .cl-flt .acc-head .chev svg { width: 24px; height: 24px; }
.cl-flt .acc-body { padding: 8px 0 28px; gap: 0; }
.cl-flt .opt-row { width: calc(100% + 32px); height: 44px; margin: 0 -16px; padding: 0 16px 0 52px; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; font: 500 15px/20px var(--font); letter-spacing: -0.1px; text-align: left; }
.cl-flt .opt-row:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.cl-flt .opt-row svg { width: 20px; height: 20px; }
.cl-flt .acc-body .tcheck { height: 40px; align-items: center; padding-left: 36px; gap: 12px; }
.cl-flt .acc-body .tcheck span { font: 500 15px/20px var(--font); }
.cl-flt .drawer-foot { height: 80px; padding: 16px 32px; gap: 12px; border-top: 0; box-shadow: inset 0 1px 0 var(--ds-e5e5e5, rgb(229, 229, 229)); }
.cl-flt .drawer-foot .tbtn { height: 48px; font: 600 17px/24px var(--font); }
/* "Verificado en …": Fresha's badge, 16px in the accent colour next to the name. */
.cl-ver { display: inline-flex; width: 16px; height: 16px; margin-left: 4px; vertical-align: -2px; color: var(--accent); border-radius: 999px; }
.cl-ver svg { width: 16px; height: 16px; }
.cd-name .cl-ver { margin-left: 6px; }
.cl-mphone { display: none; }
/* Phones (Fresha, 402 px): no table head; the search box fills the line next to a round
filter button; each client is a 96px row (photo 64, name 15/20 500, email and phone in
grey under it) 18px apart, across the whole width. */
@media (max-width: 767px) {
.sec-app .cl-wrap { padding: 0 20px; }
.cl-wrap .t-toolbar { margin-top: 24px; padding: 0; gap: 12px; background: none; flex-wrap: nowrap; }
.cl-wrap .t-toolbar .left { flex: 1; gap: 12px; }
.cl-wrap .t-toolbar .right { display: none; }
.cl-wrap .cl-search { flex: 1; width: auto; }
.cl-wrap #filters-btn { width: 36px; padding: 0; justify-content: center; flex: none; }
.cl-wrap #filters-btn > span:not([data-icon]) { display: none; }
.cl-table { margin: 12px -20px 0; }
.cl-head:not(.has-sel) { display: none; }
.cl-table { overflow-x: visible; }
.cl-head, .cl-row { width: auto; min-width: 0; }
.cl-row { display: flex; height: auto; padding: 16px 20px; margin-bottom: 18px; border-bottom: 0; }
.cl-row .cl-who { gap: 16px; padding: 0; }
.cl-row .cl-avatar { --s: 64px !important; font-size: 20px; }
.cl-row .cl-name { font: 500 15px/20px var(--font); }
.cl-row .cl-mail { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.cl-mphone { display: block; }
.cl-pager { padding: 0; }
}
/* Phones: the client's window as Fresha's phone web (402 px): × at the top right, the
profile, a row of ⋮ · Llamar · Reservar ahora, the facts in a white card and the
sections as a card of 48px rows with a chevron; a section opens on its own screen. */
.cd-mback, .cd-call { display: none; }
@media (max-width: 767px) {
.cd { display: block; width: 100%; overflow-y: auto; animation-name: sheet-in; }
.cd-x { position: fixed; top: 12px; right: 8px; left: auto; z-index: 5; width: 48px; height: 48px; border: 0; box-shadow: none; background: none; }
.cd-profile { overflow: visible; border: 0; }
.cd-top { padding: 64px 20px 0; }
.cd-actions { align-self: stretch; margin-top: 32px; gap: 12px; }
.cd-actions > * { justify-content: center; }
.cd-actions #cd-acts { width: 36px; flex: none; padding: 0; border-radius: 999px; font-size: 0; }
.cd-actions #cd-acts > * { display: none; }
.cd-actions #cd-acts::after { content: ""; width: 24px; height: 24px; background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / 24px no-repeat;
mask: url('data:image/svg+xml;utf8,') center / 24px no-repeat; }
.cd-call { display: inline-flex; flex: 1; gap: 8px; }
.cd-call svg { width: 20px; height: 20px; }
.cd-actions .dark { flex: 1.2; }
.cd-profile hr { display: none; }
.cd-facts { margin: 32px 20px 0; padding: 24px; gap: 16px; border-radius: 20.32px; box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; }
.cd-fact { color: var(--df-767676, rgb(118, 118, 118)); }
.cd-fact:not(.link) { color: var(--ink); }
.cd-tabs { margin: 16px 20px 32px; padding: 12px; border: 0; border-radius: 20.32px; box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; overflow: visible; }
.cd-tab { width: 100%; margin: 0; height: 48px; padding: 8px 12px; border-radius: 15.24px; font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.cd-tab.is-active { background: none; }
.cd-tab:not([data-records])::after { content: ""; width: 24px; height: 24px; flex: none; margin-left: 8px; background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / 24px no-repeat;
mask: url('data:image/svg+xml;utf8,') center / 24px no-repeat; }
.cd-tab .count { margin-left: auto; }
.cd-sub .cd-tab { padding-left: 32px; }
.cd:not(.m-content) .cd-content { display: none; }
.cd.m-content .cd-profile, .cd.m-content .cd-tabs { display: none; }
.cd.m-content .cd-content { min-height: 100%; }
.cd-mback { display: grid; place-items: center; position: sticky; top: 12px; z-index: 3; width: 48px; height: 48px; margin: 12px 0 0 8px; border-radius: 999px; }
.cd-mback svg { width: 24px; height: 24px; }
.cd-content .cd-head { position: static; padding: 24px 20px 0; }
.cd-content .cd-head h1 { font: 600 24px/32px var(--font); }
.cd-content .cd-body { padding: 24px 20px 32px; }
}
/* Phones (Fresha): Segmentos on a white page, the search on its own line under the pills,
each segment a plain row (40px icon, name, count, description) with a ⋮; Reputación's
tabs stay on one line and slide sideways. */
@media (max-width: 767px) {
.sec-app .team-page:has(.sg-bar) { background: var(--db-ffffff, #fff); }
.sg-bar { position: static; flex-wrap: wrap; gap: 16px; margin: 16px 0 8px; padding: 0; background: none; }
.sg-search { width: 100%; }
.sg-list { gap: 8px; }
.sg-card { padding: 12px 0; gap: 12px; border-radius: 0; box-shadow: none; background: none; align-items: flex-start; }
.sg-ic { width: 40px; height: 40px; }
.sg-ic svg { width: 20px; height: 20px; }
.sg-txt strong { font-weight: 500; }
.sg-card [data-acts] { width: 36px; padding: 0; justify-content: center; border: 0; background: none; font-size: 0; align-self: center; }
.sg-card [data-acts] > * { display: none; }
.sg-card [data-acts]::after { content: ""; width: 24px; height: 24px; background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center / 24px no-repeat;
mask: url('data:image/svg+xml;utf8,') center / 24px no-repeat; }
.rp-tabs { gap: 24px; margin-left: -20px; margin-right: -20px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.rp-tabs::-webkit-scrollbar { display: none; }
.rp-tabs button { flex: none; white-space: nowrap; }
}
/* Citas, Ventas and Artículos of the client's file (Fresha, 1470). */
.cd-pill-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--db-f0f0f0, rgb(240, 240, 240)); color: var(--ink); font: 500 13px/16px var(--font); }
.cd-pill.on .cd-pill-n { background: rgba(255, 255, 255, .2); color: #fff; }
.cd-month { margin: 16px 0 8px; font: 500 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); text-transform: lowercase; }
.cd-tl { position: relative; display: flex; gap: 12px; margin-top: 16px; }
.cd-month + .cd-tl { margin-top: 8px; }
.cd-tl:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: -16px; width: 2px; background: var(--db-e5e5e5, rgb(229, 229, 229)); }
.cd-tl-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 16px; border-radius: 999px; background: var(--db-0d0d0d, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); z-index: 1; }
.cd-tl-ic svg { width: 14px; height: 14px; }
.cd-tl-card { flex: 1; min-width: 0; display: block; padding: 16px 20px 20px; border-radius: 16px; background: var(--db-ffffff, #fff); color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.cd-tl-card.link:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.cd-tl-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cd-tl-h b { display: block; font: 600 17px/24px var(--font); }
.cd-tl-h p, .cd-tl-row p { margin: 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.cd-tl i, .cd-item i { font-style: normal; margin: 0 2px; }
.cd-tl em { font-style: normal; }
.cd-tl em.ok { color: var(--df-008038, rgb(0, 128, 56)); }
.cd-tl em.bad { color: var(--danger); }
.cd-st { flex: none; padding: 2px 8px; border-radius: 999px; 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-dbddff, rgb(219, 221, 255)); font: 500 13px/16px var(--font); }
.cd-st.completed { background: var(--db-f5f5f5, rgb(245, 245, 245)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.cd-st.confirmed { background: var(--db-e8f7ee, rgb(232, 247, 238)); color: var(--df-008038, rgb(0, 128, 56)); box-shadow: none; }
.cd-st.no_show, .cd-st.cancelled { background: var(--db-fdecef, rgb(253, 236, 239)); color: var(--danger); box-shadow: none; }
.cd-tl-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; font: 400 15px/20px var(--font); }
.cd-tl-row > span:last-child { flex: none; }
.cd-tl-row.total { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.cd-tl-row.total b { font-weight: 600; }
.cd-tl-f { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cd-item { position: relative; margin-top: 16px; padding: 20px 20px 20px 28px; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.cd-item::before { content: ""; position: absolute; left: 12px; top: 20px; height: 44px; width: 4px; border-radius: 4px; background: var(--bar); }
.cd-item-h { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.cd-item-h b { font: 600 17px/24px var(--font); }
.cd-item-h p { margin: 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* «Importa tu lista de clientes» (Fresha at 1470: 1024 × 180, black into purple and pink). */
.cl-promo { position: relative; display: flex; min-height: 180px; margin: 24px 0 32px; overflow: hidden; border-radius: 16px; color: #fff; background: linear-gradient(115deg, rgb(13, 13, 13) 45%, rgb(90, 20, 170) 72%, rgb(226, 40, 190) 100%); }
.cl-promo-t { position: relative; z-index: 1; box-sizing: border-box; width: min(664px, 100% - 300px); padding: 24px; }
.cl-promo h2 { margin: 0 0 4px; font: 600 20px/28px var(--font); }
.cl-promo p { margin: 0; font: 400 15px/20px var(--font); }
.cl-promo-f { display: flex; align-items: center; gap: 24px; margin-top: 20px; }
.cl-promo-go { background: var(--db-ffffff, #fff); color: var(--df-0d0d0d, rgb(13, 13, 13)); text-decoration: none; }
.cl-promo-more { padding: 0; color: #fff; font: 500 15px/20px var(--font); cursor: pointer; }
.cl-promo-art { position: absolute; top: 0; right: 0; bottom: 0; width: 330px; }
.cl-promo-art i { position: absolute; border-radius: 50%; }
.cl-promo-art i:nth-child(1) { left: 28px; top: 56px; width: 52px; height: 52px; }
.cl-promo-art i:nth-child(2) { left: 110px; top: 30px; width: 84px; height: 84px; }
.cl-promo-art i:nth-child(3) { left: 0; top: 104px; width: 86px; height: 86px; }
.cl-promo-art i:nth-child(4) { left: 100px; top: 118px; width: 118px; height: 118px; }
.cl-promo-art i:nth-child(5) { left: 238px; top: 110px; width: 100px; height: 100px; }
.cl-promo-x { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; color: #fff; cursor: pointer; }
.cl-promo-x:hover { background: rgba(255, 255, 255, .12); }
.cl-promo-x svg { width: 20px; height: 20px; }
.cl-promo-art i { overflow: hidden; }
.cl-promo-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* «Atrae nuevos clientes con las reservas online» (Fresha at 1470). */
.cl-promo.market { background: radial-gradient(circle at 100% 20%, rgb(110, 170, 250) 0%, transparent 22%), radial-gradient(circle at 75% -10%, rgb(190, 110, 245) 0%, transparent 38%), radial-gradient(circle at 100% 100%, rgb(215, 100, 225) 0%, transparent 25%), linear-gradient(115deg, rgb(150, 70, 240) 0%, rgb(125, 0, 235) 45%, rgb(125, 0, 235) 100%); }
.cl-promo.market .cl-promo-art { right: 56px; width: 230px; font-size: 10px; }
.cl-promo.market .cl-promo-art .ma { position: absolute; top: 26px; left: 0; }
/* Phone (Fresha): the text on top and the picture under it, centred. */
@media (max-width: 767px) {
.cl-promo { flex-direction: column; margin: 16px 0 24px; background: linear-gradient(160deg, rgb(13, 13, 13) 30%, rgb(90, 20, 170) 70%, rgb(226, 40, 190) 100%); }
.cl-promo-t { width: 100%; padding: 20px 44px 16px 20px; }
.cl-promo-art { position: relative; width: 330px; max-width: 100%; height: 150px; margin: 0 auto; }
.cl-promo-f { flex-wrap: wrap; gap: 12px 24px; }
.cl-promo.market .cl-promo-t { width: 100%; }
.cl-promo.market .cl-promo-art { position: relative; right: auto; width: 230px; height: 170px; margin: 0 auto; overflow: hidden; }
.cl-promo.market .cl-promo-art .ma { top: 8px; }
}
/* ---------- «Importar clientes», steps 1 to 4 (Fresha, 2026-11-06) ---------- */
.im-flow { position: relative; }
.im-head { position: sticky; top: 0; z-index: 5; background: var(--db-ffffff, #fff); transition: box-shadow .15s; }
.im-head.scrolled { box-shadow: 0 1px 0 var(--ds-e5e5e5, rgb(229, 229, 229)); }
.im-head.scrolled .mf-top-title { opacity: 1; }
.im-flow .im-progress { width: min(1376px, 100% - 64px); margin: 0 auto; padding: 12px 0 0; }
.im-flow .im-top { width: min(1376px, 100% - 64px); margin: 0 auto; padding: 0; }
.im-flow .im-top .im-back { order: -1; width: 48px; height: 48px; margin-right: 16px; }
.im-narrow { display: none; }
.im-flow .im-wrap.m { width: min(960px, 100% - 64px); }
.im-flow .im-wrap.l { width: min(1184px, 100% - 64px); }
.im-bar { display: none; }
.im-danger { background: rgb(212, 22, 58); border-color: var(--de-d4163a, rgb(212, 22, 58)); color: #fff; }
.im-danger:hover { background: rgb(190, 18, 50); }
.im-ok { display: flex; align-items: center; gap: 8px; min-height: 56px; box-sizing: border-box; margin-top: 20px; padding: 8px 16px; border-radius: 12px; background: var(--db-eefbe9, rgb(238, 251, 233)); box-shadow: inset 0 0 0 1px var(--ds-def5d6, rgb(222, 245, 214)); font: 400 15px/20px var(--font); }
.im-ok svg { flex: none; width: 20px; height: 20px; color: var(--df-2d823c, rgb(45, 130, 60)); }
.im-file { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 8px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-f2f2f2, rgb(242, 242, 242)); }
.im-csv { display: grid; place-items: center; width: 36px; height: 44px; border-radius: 4px; background: rgb(45, 115, 65); color: #fff; font: 700 11px/1 var(--font); clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%); }
.im-file strong { display: block; font: 500 15px/20px var(--font); overflow-wrap: anywhere; }
.im-file small { display: block; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.im-file-x { position: absolute; top: -12px; right: -12px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px, rgba(19, 19, 19, .08) 0 1px 4px; color: var(--ink); cursor: pointer; }
.im-file-x svg { width: 16px; height: 16px; }
.im-map-head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0 24px; }
.im-map-head h2 { margin: 0; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
.im-map-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; align-items: start; }
.im-map-row .tf { margin: 0; min-width: 0; }
.im-map-row .im-map-l { display: none; }
.im-map-row .ti:disabled { background: var(--db-f2f2f2, rgb(242, 242, 242)); border-color: var(--de-e5e5e5, rgb(229, 229, 229)); }
.im-map-row .ti:disabled::placeholder { color: var(--df-a0a0a0, rgb(160, 160, 160)); }
.im-map-row .help { margin: 4px 0 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.im-map-row.bad .ts { border-color: var(--danger); }
.im-map-err { margin: 4px 0 0; font: 400 13px/16px var(--font); color: var(--danger); }
.im-tabs { display: flex; gap: 24px; margin-top: 20px; box-shadow: inset 0 -1px 0 var(--ds-e5e5e5, rgb(229, 229, 229)); }
.im-tabs button { height: 52px; padding: 0; border: 0; background: none; font: 600 14px/20px var(--font); color: var(--ink); cursor: pointer; }
.im-tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--ds-0d0d0d, rgb(13, 13, 13)); }
.im-table-wrap { position: relative; }
.im-scroll { overflow-x: auto; }
.im-table { width: max-content; min-width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font); color: var(--ink); }
.im-table th { height: 72px; padding: 0 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font-weight: 700; text-align: left; white-space: nowrap; background: var(--db-ffffff, #fff); }
.im-table td { height: 56px; box-sizing: border-box; padding: 8px 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); max-width: 280px; overflow-wrap: anywhere; }
.im-table td.im-why { min-width: 288px; max-width: 320px; }
.im-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; background: var(--db-feeceb, rgb(254, 236, 235)); box-shadow: inset 0 0 0 1px var(--ds-fee3e2, rgb(254, 227, 226)); color: var(--df-d4163a, rgb(212, 22, 58)); font: 500 13px/16px var(--font); white-space: nowrap; }
.im-fade { position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; background: linear-gradient(to left, rgba(19, 19, 19, .08), rgba(19, 19, 19, 0)); transition: opacity .15s; }
.im-fade.off { opacity: 0; }
.im-count { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.im-count b { font-weight: 600; }
.im-count .round:disabled { opacity: .4; cursor: default; }
.im-empty { padding: 48px 16px; text-align: center; }
.im-empty strong { display: block; font: 600 17px/24px var(--font); }
.im-empty p { margin: 4px 0 0; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.im-end { display: flex; flex-direction: column; }
.im-end-top { display: flex; justify-content: flex-end; min-height: 72px; box-sizing: border-box; padding: 12px 32px; }
.im-end-top .tbtn { text-decoration: none; }
.im-end-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 24px 15vh; text-align: center; }
.im-end-main h1 { margin: 24px 0 0; font: 700 28px/36px var(--font); letter-spacing: -0.3px; }
.im-end-main p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.im-end-main .tbtn { margin-top: 16px; }
.im-orb { display: grid; place-items: center; width: 160px; height: 160px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 20%, rgb(150, 40, 230) 0%, transparent 45%), radial-gradient(circle at 15% 65%, rgb(240, 110, 150) 0%, transparent 35%), radial-gradient(circle at 75% 90%, var(--db-fac8fa, rgb(250, 200, 250)) 0%, transparent 35%), radial-gradient(circle at 100% 40%, rgb(240, 150, 250) 0%, transparent 30%), rgb(195, 25, 245); }
.im-orb svg { width: 72px; height: 72px; }
.im-orb.run { animation: im-pulse 1.4s ease-in-out infinite; }
@keyframes im-pulse { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .im-orb.run { animation: none; } }
.im-help { padding: 0 0 8px; font: 400 15px/22px var(--font); }
.im-help p { margin: 0 0 16px; }
.im-help ol, .im-help ul { margin: 0 0 16px; padding-left: 20px; }
.im-help li { margin-bottom: 8px; }
.im-help h3 { margin: 0 0 8px; font: 600 17px/24px var(--font); }
/* Tablet (Fresha below 1024): round back and close at the top, the action in a bar at the bottom. */
@media (max-width: 1023px) {
.im-wide { display: none; }
.im-narrow { display: grid; margin-left: auto; width: 48px; height: 48px; }
.im-flow .im-top .mf-top-title { display: none; }
.im-flow .im-top .im-back { margin-right: auto; }
.im-flow .im-top .im-back + .im-narrow { margin-left: 0; }
.im-flow .im-wrap, .im-flow .im-wrap.m, .im-flow .im-wrap.l { width: calc(100% - 64px); padding-bottom: 120px; }
.im-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; gap: 12px; padding: 12px 32px calc(12px + env(safe-area-inset-bottom)); background: var(--db-ffffff, #fff); box-shadow: 0 -1px 0 var(--ds-e5e5e5, rgb(229, 229, 229)); }
.im-bar [data-next] { flex: 1; }
.im-bar .round { flex: none; width: 48px; height: 48px; }
}
/* Phone (Fresha): no rings at the top, 20 px margins, every row with its own labels. */
@media (max-width: 767px) {
.im-flow .im-progress, .im-flow .im-top { width: calc(100% - 40px); }
.im-flow .im-top .round { border-color: transparent; }
.im-flow .im-top .im-back { margin-left: -12px; }
.im-flow .im-top .im-narrow { margin-right: -12px; }
.im-flow .im-wrap, .im-flow .im-wrap.m, .im-flow .im-wrap.l { width: calc(100% - 40px); }
.im-bar { padding-left: 20px; padding-right: 20px; }
.im-flow .im-lead { font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.im-map-head { display: none; }
.im-map-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
.im-file + .im-map-head + .im-map-row { margin-top: 32px; }
.im-map-row .im-map-l { display: block; margin-bottom: 4px; font: 600 15px/20px var(--font); }
.im-file-x { right: -6px; }
.im-table th { height: 56px; }
.im-end-main h1 { font: 700 24px/32px var(--font); }
.im-orb { width: 128px; height: 128px; }
.im-orb svg { width: 56px; height: 56px; }
}
.cd-pills { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.cd-pills::-webkit-scrollbar { display: none; }
.cd-pill { flex: none; }
@media (max-width: 1023px) {
.cl-promo-t { width: calc(100% - 170px); }
.cl-promo-art { width: 170px; }
.cl-promo-art i:nth-child(1), .cl-promo-art i:nth-child(3) { display: none; }
.cl-promo-art i:nth-child(2) { left: 50px; }
.cl-promo-art i:nth-child(4) { left: 10px; }
.cl-promo-art i:nth-child(5) { left: 110px; }
.cl-promo.market .cl-promo-t { width: calc(100% - 270px); }
.cl-promo.market .cl-promo-art { right: 40px; width: 230px; }
.cd-tl-ic, .cd-tl:not(:last-child)::before { display: none; }
.cd-tl-card { padding: 12px 12px 16px; }
}
@media (max-width: 767px) {
.cl-promo-t { width: 100%; }
.cd-tl-ic { display: grid; }
.cd-tl:not(:last-child)::before { display: block; }
.cd-tl-card { padding: 16px 20px 20px; }
}
/* Reputación online on a new account (Fresha, measured at 1470): the video guide banner. */
.rp-vid { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 8px 8px 8px 25px; border-radius: 15.24px; background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.rp-vid p { max-width: 717px; margin: 0; font: 400 17px/24px var(--font); letter-spacing: -0.2px; }
.rp-vb { display: flex; gap: 8px; margin-top: 16px; }
.rp-vb .tbtn { height: 36px; padding: 0 16px; gap: 6px; }
.rp-vb .tbtn svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.rp-vb .tbtn.ghost { border-color: transparent; background: none; }
.rp-thumb { position: relative; flex: none; width: 249px; height: 140px; padding: 0; border: 0; border-radius: 10.16px; cursor: pointer; overflow: hidden;
background: linear-gradient(135deg, #1f1a3d 0%, #5b3fd6 55%, #c58cf3 100%); }
.rp-play { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; display: grid; place-items: center; border-radius: 999px; color: #fff;
background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); box-shadow: rgba(13, 13, 13, 0.04) 0 8px 12px, rgba(19, 19, 19, 0.1) 0 0 0 0.5px; }
.rp-play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.rp-thumb small { position: absolute; right: 9px; bottom: 10px; padding: 2px 8px; border-radius: 999px; background: var(--db-131313-40, rgba(19, 19, 19, 0.4)); color: #fff; font: 400 13px/16px var(--font); }
.rp-vid + .rp-tabs { margin-top: 32px; }
@media (max-width: 767px) { .rp-vid { flex-direction: column; align-items: stretch; padding: 20px; } .rp-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; } }
/* New-account figures as Fresha (1470): 17/24 labels, the big score 48/52, the stars under it. */
.rp-vid { margin-top: 32px; padding: 9px 9px 9px 25px; }
.rp-card > p { margin-bottom: 4px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.rp-logo { font-size: 20px; line-height: 20px; }
.rp-bb { margin-top: 18px; }
.rp-bb > div:first-child { display: flex; flex-direction: column; }
.rp-big { font: 700 48px/52px var(--font); }
.rp-bb .rp-stars { margin-top: 4px; gap: 4px; }
.rp-bb .rp-stars svg { width: 16px; height: 16px; }
.rp-bb .rp-stars em { margin: 0; font: 400 15px/20px var(--font); }
.rp-bb small { margin-top: 4px; font: 400 13px/16px var(--font); }
.rp-google > strong { display: block; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.rp-google p { margin: 2px 0 24px; font: 400 15px/20px var(--font); }