/* "Catálogo" pages. Sizes measured on Fresha (1440×900), see docs/fresha/catalogo.md. */
.team-page.ct-page { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.ct-page .page-actions .tbtn.dark i svg { width: 24px; height: 24px; }
.ct-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; padding: 16px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.ct-bar-top .left { display: flex; align-items: center; gap: 8px; }
.ct-search { width: 200px; }
.ct-grid { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 32px; margin-top: 32px; align-items: start; }
.ct-cats { position: sticky; top: 16px; padding: 24px 16px; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; }
.ct-cats-t { margin: 0 0 8px; padding: 0 16px; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.ct-cat { width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 8px; font: 500 15px/20px var(--font); letter-spacing: -0.1px; text-align: left; }
.ct-cat > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-cat:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.ct-cat.on { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.ct-cat .count, .svf-nav .count, .svf-all .count { flex: none; padding: 2px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 600 13px/16px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.ct-cat.add { color: var(--accent); }
.ct-sec { scroll-margin-top: 16px; }
.ct-sec + .ct-sec { margin-top: 32px; }
.ct-sec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 16px; }
.ct-sec-h > .tbtn { margin-top: -6px; }
.ct-sec-t { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.ct-sec-d { margin: 0; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); white-space: pre-line; }
.ct-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ct-card { position: relative; display: flex; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); cursor: grab; outline: none; touch-action: pan-y; user-select: none; }
.ct-grip { position: absolute; left: -28px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ink); opacity: 0; transition: opacity .15s; pointer-events: none; }
.ct-grip svg { width: 20px; height: 20px; }
.ct-card:hover .ct-grip, .ct-card.is-dragging .ct-grip { opacity: 1; }
.ct-card.is-dragging { z-index: 3; cursor: grabbing; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)), 0 8px 24px rgba(19, 19, 19, .12); }
body.is-sorting, body.is-sorting * { cursor: grabbing !important; }
.ct-card:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.ct-card:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.ct-card.is-archived { opacity: .6; }
.ct-bar { width: 8px; flex: none; border-radius: 12px 0 0 12px; }
.ct-in { flex: 1; min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.ct-top { display: flex; align-items: center; gap: 8px; }
.ct-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-name { margin: 0; font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.ct-arch { margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); font: 500 12px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ct-desc, .ct-dur { margin: 0; font-size: 15px; line-height: 20px; letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.ct-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-desc.wrap { white-space: normal; }
.ct-price { flex: none; font: 500 15px/20px var(--font); }
.ct-more { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 999px; }
.ct-more:hover, .ct-more[aria-expanded="true"] { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.ct-more svg { width: 20px; height: 20px; }
.ct-vars { display: flex; flex-direction: column; gap: 8px; }
.ct-var { display: grid; grid-template-columns: 200px 1fr auto 36px; align-items: center; column-gap: 8px; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.ct-var::after { content: ""; }
.ct-vn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-vp { font-weight: 500; color: var(--ink); text-align: right; }
.ct-none { 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)); color: var(--df-767676, rgb(118, 118, 118)); font-size: 15px; line-height: 20px; letter-spacing: -0.1px; }
.ct-archived { margin: 4px 0 0; font-size: 15px; color: var(--df-767676, rgb(118, 118, 118)); }
.ct-archived .link-btn { font-weight: 500; }
.ct-empty { margin-top: 32px; padding: 64px 24px; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); text-align: center; }
.ct-empty p { margin: 4px 0; color: var(--df-767676, rgb(118, 118, 118)); font-size: 15px; }
.ct-empty .ct-empty-t { color: var(--ink); font: 600 20px/28px var(--font); }
.ct-empty-b { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.ct-menu { min-width: 227px; }
.team-dialog.ct-cat-dlg { max-width: 720px; padding: 74px 48px 32px; border-radius: 16px; }
.ct-cat-dlg .ct-dlg-h { position: absolute; top: 20px; right: 36px; margin: 0; }
.ct-cat-dlg .ct-dlg-h .icon-btn { width: 48px; height: 48px; border-radius: 999px; }
.ct-cat-dlg .cl-big { margin: 0 0 32px; }
.ct-cat-dlg .grid2 { gap: 24px 16px; }
.ct-cat-dlg .d-foot { margin-top: 32px; }
.ct-cat-dlg .tt { height: 122px; }
.ct-dlg-h { margin-bottom: 0; }
.ct-color { display: flex; align-items: center; gap: 8px; text-align: left; }
.ct-color i, .ct-dot { width: 16px; height: 16px; flex: none; border-radius: 999px; }
.ct-colors .menu-item { gap: 10px; }
.team-dialog.ct-flt-dlg { max-width: 512px; padding: 30px 48px 32px; border-radius: 16px; }
.ct-flt-dlg .cd-dlg-h { margin-bottom: 0; }
.ct-flt-dlg .cd-dlg-h h2 { padding-top: 0; }
.ct-flt-dlg .cd-dlg-h .icon-btn { margin: -8px -12px 0 0; }
.ct-flt { margin-top: 16px; gap: 16px; }
.ct-flt .ts { height: 48px; }
.ct-flt-dlg .d-foot { margin-top: 32px; gap: 12px; }
.ct-ro { display: flex; flex-direction: column; gap: 12px; }
.ct-ro-cat { padding: 12px 16px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; background: var(--db-ffffff, #fff); }
.ct-ro-h { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.ct-ro-svcs { list-style: none; margin: 12px 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ct-ro-svc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 10px; background: var(--db-ffffff, #fff); font-size: 15px; }
.ct-ro-bar { width: 4px; height: 20px; border-radius: 4px; }

/* Service form */
html:has(.svf-grey), body:has(.svf-grey), .svf-grey, .svf-grey .mf-top { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.svf-nav { background: var(--db-ffffff, #fff); border: 0; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.svf-nav a { font-weight: 500; letter-spacing: -0.1px; }
.svf-nav h3 { margin-top: 0; }
.svf-card { margin-bottom: 32px; padding: 32px 40px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 16px; background: var(--db-ffffff, #fff); display: flex; flex-direction: column; gap: 24px; }
.svf-plain { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.svf-plain > * { align-self: stretch; } .svf-plain > .tbtn { align-self: flex-start; }
.svf-h { margin: 0; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
.svf-h.inline { display: flex; align-items: center; gap: 8px; }
.svf-lead { margin: -24px 0 0; font-size: 15px; line-height: 20px; letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.svf-plain .svf-lead { margin: -16px 0 8px; }
.svf-lead a, .svf-es a { color: var(--accent); text-decoration: none; }
.svf-hrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.svf-hrow .svf-lead { margin: 0; }
.svf-hrow .switch { width: 48px; }
.svf-hrow .switch:checked::after { transform: translateX(24px); }
.svf-badge { padding: 4px 12px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); color: var(--df-767676, rgb(118, 118, 118)); font: 500 13px/16px var(--font); letter-spacing: -0.1px; }
.svf-badge.on { background: var(--db-edfbe9, rgb(237, 251, 233)); box-shadow: inset 0 0 0 1px var(--ds-d2f6c9, rgb(210, 246, 201)); color: var(--df-1f8900, rgb(31, 137, 0)); }
.svf-colsel { position: relative; }
.svf-colsel i { position: absolute; left: 16px; top: 16px; width: 16px; height: 16px; border-radius: 999px; pointer-events: none; }
.svf-colsel i + .ts { padding-left: 44px; }
.svf-area { position: relative; }
.svf-area .tt { display: block; }
.svf-area .tt { height: 202px; padding-bottom: 68px; }
.svf-ai { position: absolute; left: 16px; bottom: 16px; } /* the look is .ai-btn (styles.css) */
.svf-price { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.svf-eur { position: relative; display: block; }
.svf-eur span { position: absolute; left: 17px; top: 14px; color: var(--df-767676, rgb(118, 118, 118)); font: 400 14px/20px var(--font); }
.svf-eur .ti { padding-left: 41px; }
.svf-row { display: flex; gap: 8px; }
.svf-vars { display: flex; flex-direction: column; gap: 8px; }
.svf-var { display: flex; align-items: center; gap: 16px; min-height: 70px; padding: 13px 0 13px 16px; border-left: 4px solid var(--de-c9bdff, rgb(201, 189, 255)); }
.svf-var > div { flex: 1; } .svf-var p { margin: 0; font: 500 17px/24px var(--font); letter-spacing: -0.2px; } .svf-var small { display: block; color: var(--df-767676, rgb(118, 118, 118)); font-size: 15px; line-height: 20px; letter-spacing: -0.1px; }
.svf-vp { font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.svf-card > .tbtn, .svf-row .tbtn { align-self: flex-start; }
.svf-all, .svf-loc { align-items: center; }
.svf-loc { min-height: 81px; padding: 16px 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.svf-all strong, .svf-loc strong { font-weight: 400; }
.svf-loc small { font-size: 15px; line-height: 20px; letter-spacing: -0.1px; margin-top: 0; }
.svf-all span, .svf-loc span { font-size: 15px; line-height: 20px; }
.svf-loc .t-avatar { box-shadow: none; border: 1px solid var(--de-ffffff, #fff); }
.svf-loc:last-child { border-bottom: 0; }
.svf-locpic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); }
.svf-locpic svg { width: 20px; height: 20px; }
.svf-check { align-items: flex-start; }
.svf-check { gap: 12px; }
.svf-ind { margin-left: 36px; }
.svf-days p { display: flex; justify-content: space-between; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font-size: 15px; }
.svf-days p span:last-child { color: var(--df-767676, rgb(118, 118, 118)); }
.svf-w { max-width: 340px; }
.svf-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 497px; text-align: center; }
.svf-hrow ~ .svf-empty { min-height: 300px; }
.svf-ill { width: 56px; height: 56px; margin-bottom: 12px; border-radius: 10px; background: linear-gradient(145deg, var(--db-efeaff, #efeaff), #b9a8ff 70%, #8b74f6); position: relative; }
.svf-ill::after { content: ""; position: absolute; inset: 14px 16px; border-radius: 3px; background: repeating-linear-gradient(var(--db-ffffff, #fff) 0 3px, transparent 3px 8px); opacity: .85; }
.svf-ill.search::after { inset: 12px; border-radius: 999px; background: none; border: 4px solid var(--de-ffffff, #fff); }
.svf-et { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.svf-es { margin: 0 0 20px; max-width: 420px; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.svf-group, .svf-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); cursor: pointer; }
.svf-group:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.svf-group p, .svf-opt p { margin: 0; font: 500 15px/20px var(--font); }
.svf-group small, .svf-opt small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--df-767676, rgb(118, 118, 118)); }
.svf-opt { cursor: default; margin-bottom: 8px; } .svf-opt > div { flex: 1; } .svf-opt > span { font: 500 15px/20px var(--font); }
.svf-lead.ink { font-size: 14px; color: var(--ink); }
.svf-drop { margin-top: 0; height: 260px; }
.svf-drop strong { font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.svf-files { margin: -16px 0 0 !important; font-size: 13px; line-height: 16px; color: var(--df-767676, rgb(118, 118, 118)); }
.svf-combar { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 12px 16px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.svf-half { max-width: 347px; }
.svf-cost { display: flex; gap: 8px; }
.svf-cost .svf-eur { flex: 1; }
.svf-seg { display: flex; flex: none; border-radius: 8px; background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.svf-seg button { width: 48px; height: 48px; border-radius: 8px; font: 600 17px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.svf-seg button.on { background: var(--db-ffffff, #fff); color: var(--ink); box-shadow: 0 1px 3px rgba(19, 19, 19, .12); }
.svf-tax { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.svf-tax p { margin: 0; font: 500 15px/20px var(--font); } .svf-tax small { color: var(--df-767676, rgb(118, 118, 118)); font-size: 13px; }
.team-dialog.svf-gdlg { background: var(--db-ffffff, #fff); overflow-y: auto; }
.svf-gtop { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 32px; background: var(--db-ffffff, #fff); }
.svf-gwrap { width: min(696px, 100% - 32px); margin: 24px auto 96px; display: flex; flex-direction: column; gap: 24px; }
.svf-gwrap .mf-title { margin: 36px 0 52px; }
.svf-gwrap > .tbtn { align-self: flex-start; }
.svf-gh { margin: 24px 0 0; font: 600 24px/32px var(--font); }
.svf-gwrap .svf-lead { margin: -24px 0 0; }
.svf-opts { display: flex; flex-direction: column; gap: 12px; }
.svf-opt.big { margin: 0; min-height: 64px; padding: 20px 24px; }
.svf-opt.big p { font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.svf-opt.big small { font-size: 15px; line-height: 20px; }
.svf-adv { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 36px; color: var(--accent); font: 500 15px/20px var(--font); letter-spacing: -0.1px; }
.svf-adv svg { width: 20px; height: 20px; transition: transform .15s; }
.svf-adv[aria-expanded="true"] svg { transform: rotate(180deg); }
.svf-advbody { display: flex; flex-direction: column; gap: 16px; }
.svf-check strong { display: block; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.svf-check small { display: block; margin: 0; font-size: 13px; line-height: 16px; color: var(--df-767676, rgb(118, 118, 118)); }
.svf-check:not(:has(small)) strong, .svf-check.lite strong { font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.svf-sub { margin-top: -18px; }
.svf-pick { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; font-size: 15px; line-height: 20px; max-width: 340px; }
.svf-pick .link-btn { font-weight: 500; }
.svf-svcs { max-height: 60dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.svf-svch { margin: 12px 0 0; font: 600 15px/20px var(--font); }
@media (max-width: 1100px) { .ct-grid { grid-template-columns: 1fr; } .ct-cats { position: static; } }
@media (max-width: 767px) { .ct-bar-top { flex-wrap: wrap; } .ct-bar-top .left { flex-wrap: wrap; } .ct-var { grid-template-columns: 1fr auto auto; } .ct-var::after { display: none; } .svf-price { grid-template-columns: 1fr; } .svf-card { padding: 24px 20px; } }

/* Gestionar el orden de los elementos (full page) */
body:has(.ro-page) { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.ro-page { height: 100%; overflow-y: auto; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.ro-page .mf-top { position: sticky; top: 0; z-index: 5; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.ro-wrap { width: min(696px, 100% - 32px); margin: 0 auto; padding: 36px 0 96px; }
.ro-wrap .mf-title { margin: 0 0 12px; }
.ro-lead { margin: 0 0 32px; font-size: 17px; line-height: 24px; letter-spacing: -0.2px; color: var(--df-767676, rgb(118, 118, 118)); }
.ro-filter { margin: 8px 0 24px; }
.ro-cats { display: flex; flex-direction: column; gap: 16px; }
.ro-cat { position: relative; 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)); cursor: grab; touch-action: none; user-select: none; outline: none; }
.ro-cat:focus-visible, .ro-svc:focus-visible .ro-card { box-shadow: inset 0 0 0 2px var(--accent); }
.ro-cat-h { display: flex; align-items: center; gap: 8px; }
.ro-cat-h p { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.ro-g { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--ink); }
.ro-g svg { width: 20px; height: 20px; }
.ro-svcs { padding-top: 16px; }
.ro-svcs:empty { padding-top: 0; min-height: 0; }
.ro-svc.is-placeholder { visibility: hidden; }
.ro-svc { position: relative; padding-bottom: 8px; cursor: grab; touch-action: none; outline: none; }
.ro-card { display: flex; height: 64px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.ro-bar { width: 8px; flex: none; border-radius: 12px 0 0 12px; }
.ro-in { flex: 1; display: flex; align-items: center; gap: 12px; padding: 16px; }
.ro-in p { margin: 0; font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.ro-cat.is-dragging, .ro-svc.is-dragging { z-index: 3; cursor: grabbing; }
.ro-svc.is-dragging { padding-bottom: 0; }
.ro-cat.is-dragging { box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)), 0 8px 24px rgba(19, 19, 19, .12); }
.ro-svc.is-dragging .ro-card { box-shadow: 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)), 0 8px 24px rgba(19, 19, 19, .12); }
.svf-card .svf-lead + .svf-empty { min-height: 0; padding: 24px 0; }

/* Tipo de tratamiento: searchable box + grouped list (Fresha: popover 8px under
   the field, same width, ring 229, radius 12, list 437 high, padding 8 20). */
.svf-area.plain .tt { height: 122px; padding-bottom: 16px; }
.svf-combo { position: relative; cursor: text; }
.svf-combo .ti { padding-right: 48px; }
.svf-combo [data-icon] { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--df-767676, rgb(118, 118, 118)); pointer-events: none; }
.svf-combo [data-icon] svg { width: 20px; height: 20px; }
.svf-cbpop { position: absolute; z-index: 60; box-sizing: border-box; overflow: hidden; background: var(--db-ffffff, #fff); border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; box-shadow: 0 2px 8px rgba(19, 19, 19, .08), 0 4px 20px rgba(19, 19, 19, .12); }
.svf-cbscroll { max-height: 437px; overflow: auto; padding: 8px 20px; scrollbar-width: none; }
.svf-cbscroll::-webkit-scrollbar { display: none; }
.svf-cbpop ul { list-style: none; margin: 0; padding: 0; }
.svf-cbh { display: block; padding: 8px 0 4px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; color: var(--ink); }
.svf-cbo { display: flex; align-items: center; min-height: 40px; box-sizing: border-box; margin: 0 -12px; padding: 8px 12px; border-radius: 8px; cursor: pointer; font: 500 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); }
.svf-cbo:hover, .svf-cbo.on { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.svf-cbo:active { background: var(--db-131313-8-h, rgba(19, 19, 19, .08)); }
.svf-cbsep { opacity: 0; padding: 8px 0; }
.svf-cbsep hr { margin: 0; border: 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.svf-cbg:last-child .svf-cbsep { display: none; }

/* Nuevo paquete (Fresha /catalogue/services/package/add): one 696 column. */
.pkf-wrap { width: min(696px, 100% - 32px); }
.pkf-wrap .mf-title { letter-spacing: -0.2px; }
.pkf-wrap .svf-card:last-child { margin-bottom: 0; }
.pkf-wrap .svf-hrow { gap: 12px; }
.pkf-wrap .grid2 { gap: 16px; }
.pkf-err { margin: 0; font: 400 13px/16px var(--font); letter-spacing: -0.1px; color: var(--df-d4163a, rgb(212, 22, 58)); }
.pkf-err.big { margin: 0; font-size: 15px; line-height: 20px; }
.pkf-wrap .ti[aria-invalid="true"], .pkf-wrap .ts[aria-invalid="true"] { border-color: var(--de-d4163a, rgb(212, 22, 58)); box-shadow: none; }
.tf .help a { color: var(--accent); text-decoration: none; }
.svf-eur.off span, .svf-eur .ti:disabled { color: var(--df-acacac, rgb(172, 172, 172)); }
.svf-eur .ti:disabled { background: var(--db-f2f2f2, rgb(242, 242, 242)); -webkit-text-fill-color: rgb(172, 172, 172); opacity: 1; }
.svf-eur .ti[type="number"] { -moz-appearance: textfield; }
.svf-eur .ti::-webkit-inner-spin-button, .svf-eur .ti::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pkf-items { display: flex; flex-direction: column; gap: 24px; }
.pkf-item { position: relative; display: flex; align-items: center; gap: 8px; min-height: 74px; padding: 16px 0 12px 20px; background: var(--db-ffffff, #fff); cursor: grab; }
.pkf-item > i { position: absolute; left: 0; top: 4px; bottom: 0; width: 4px; border-radius: 999px; }
.pkf-grip { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; opacity: 0; transition: opacity .15s; color: var(--ink); }
.pkf-grip svg { width: 28px; height: 28px; }
.pkf-item:hover .pkf-grip, .pkf-item.is-dragging .pkf-grip { opacity: 1; }
.pkf-it { flex: 1; min-width: 0; }
.pkf-it p { margin: 0; font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.pkf-it small { display: block; margin-top: 2px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.pkf-pr { display: flex; flex-direction: column; align-items: flex-end; font: 500 15px/20px var(--font); letter-spacing: -0.1px; white-space: nowrap; }
.pkf-pr b { font-weight: 500; color: var(--ink); }
.pkf-pr span { color: var(--df-767676, rgb(118, 118, 118)); }
.pkf-more { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 999px; color: var(--ink); }
.pkf-more:hover, .pkf-more[aria-expanded="true"] { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.pkf-more svg { width: 20px; height: 20px; }
.pkf-addrow { display: flex; align-items: center; gap: 16px; }
.pkf-addrow .tbtn { margin-right: auto; }
.pkf-tot { margin: 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.team-menu .menu-item[aria-disabled="true"] { opacity: .4; cursor: default; background: none; }

/* "Servicios" picker and "Añadir tiempo extra" (Fresha: 720 wide, 32 from the
   top and bottom, radius 16, header 74, body padding 0 48). */
.team-backdrop:has(.pkp-dlg) { background: var(--db-131313-25, rgba(19, 19, 19, .25)); }
.team-dialog.pkp-dlg { display: flex; flex-direction: column; max-width: 720px; height: calc(100dvh - 64px); max-height: none; padding: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 2px 8px rgba(19, 19, 19, .08), 0 4px 20px rgba(19, 19, 19, .12); }
.pkp-head { position: relative; flex: none; height: 74px; padding: 32px 96px 16px 48px; }
.pkp-small { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; opacity: 0; transition: opacity .2s cubic-bezier(.85, 0, .15, 1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pkp-dlg.scrolled .pkp-small { opacity: 1; }
.pkp-x { position: absolute; top: 20px; right: 36px; width: 48px; height: 48px; }
.pkp-x svg { width: 24px; height: 24px; }
.pkp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 48px 32px; }
.team-dialog .pkp-title { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.pkp-search { position: sticky; top: -16px; z-index: 1; margin: 16px -48px 0; padding: 20px 48px 16px; background: var(--db-ffffff, #fff); }
.pkp-in { 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; background: var(--db-ffffff, #fff); }
.pkp-in:focus-within { border-color: var(--accent); }
.pkp-in [data-icon] { width: 20px; height: 20px; flex: none; color: var(--df-767676, rgb(118, 118, 118)); }
.pkp-in svg { width: 20px; height: 20px; }
.pkp-in input { flex: 1; min-width: 0; height: 46px; padding: 16px; border: 0; outline: 0; background: none; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); }
.pkp-in input::placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.pkp-list { display: flex; flex-direction: column; gap: 12px; }
.pkp-cat { margin: 16px 0 0; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.pkp-cat ~ .pkp-cat { margin-top: 28px; }
.pkp-row { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 96px; padding: 0 17px 0 24px; overflow: hidden; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); text-align: left; cursor: pointer; }
.pkp-row:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.pkp-row > i { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; }
.pkp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pkp-t b { font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.pkp-t small { font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.pkp-p { font: 500 15px/20px var(--font); letter-spacing: -0.1px; white-space: nowrap; }
.pkp-none { margin: 24px 0 0; color: var(--df-767676, rgb(118, 118, 118)); text-align: center; }
.team-dialog.pkx-dlg { height: auto; }
.pkx-body { padding: 0 48px 16px; }
.team-dialog .pkx-body .pkp-title { margin-bottom: 32px; }
.pkx-seg { display: flex; align-items: flex-end; }
.pkx-seg + .pkx-seg { margin-top: 20px; }
.pkx-seg .tf:first-child { flex: 0 1 333px; margin-right: 16px; }
.pkx-seg .tf:nth-child(2) { flex: 0 1 244px; margin-right: 3px; }
.pkx-seg .pkf-more { flex: none; }
.pkx-seg .pkf-more { margin-bottom: 6px; }
.pkx-seg .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pkx-seg .ts:disabled { background-color: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-acacac, rgb(172, 172, 172)); opacity: 1; }
.pkx-addrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.pkx-foot { display: flex; align-items: center; gap: 12px; padding: 16px 48px 32px; }
.pkx-reset { margin-right: auto; font: 500 17px/24px var(--font); letter-spacing: -0.2px; color: var(--accent); }
.pkx-menu { width: 414px; }
.pkx-menu .menu-item { min-height: 84px; padding: 8px 12px; }
.pkx-menu .menu-text { gap: 0; }
@media (max-width: 767px) { .team-dialog.pkp-dlg { height: 100dvh; border-radius: 0; } .pkp-head, .pkp-body, .pkx-body, .pkx-foot { padding-left: 20px; padding-right: 20px; } .pkp-search { margin: 0 -20px; padding: 16px 20px; } .pkx-seg .tf:first-child, .pkx-seg .tf:nth-child(2) { flex: 1 1 0; } .pkx-menu { width: calc(100vw - 32px); } }
.pkf-wrap .svf-hrow .switch { margin-top: 4px; }

/* ---------- Bonos (Fresha /catalogue/packages) ---------- */
.bn-tabs { display: flex; gap: 4px; margin: 32px 0 0; padding: 0; list-style: none; }
.bn-tabs li { height: 36px; display: flex; align-items: center; padding: 0 16px; border-radius: 999px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.bn-tabs li:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.bn-tabs li[aria-selected="true"] { background: var(--ink); color: var(--do-ffffff, #fff); }
.bn-bar { margin-top: 24px; }
.bn-search { width: 256px; }
.bn-bar #order [data-icon] svg { width: 20px; height: 20px; }
.bn-cards { display: flex; flex-direction: column; gap: 8px; }
.bn-sec + .bn-sec { margin-top: 40px; }
.bn-list .ct-sec-h { height: 44px; margin-bottom: 8px; padding-bottom: 0; align-items: center; }
.bn-bar .left { gap: 12px; }
.bn-list .ct-sec-h > .tbtn { margin-top: 0; }
.bn-card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 88px; 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)); cursor: pointer; outline: none; touch-action: pan-y; user-select: none; }
.bn-card:hover .ct-grip, .bn-card.is-dragging .ct-grip { opacity: 1; }
.bn-card:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.bn-card.is-archived .bn-txt, .bn-card.is-archived .bn-ic { opacity: .5; }
.bn-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 8px; color: #fff; }
.bn-ic svg { width: 24px; height: 24px; }
.bn-ic.sm { width: 48px; height: 48px; }
.bn-txt { flex: 1; min-width: 0; }
.bn-name { margin: 0; font: 600 15px/20px var(--font); letter-spacing: -0.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-sub { margin: 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.bn-price { font: 500 15px/20px var(--font); letter-spacing: -0.1px; white-space: nowrap; margin-left: 4px; }
.bn-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 32px; padding: 64px 24px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); text-align: center; }
.bn-empty .svf-es { margin-bottom: 24px; }
.bn-sort .menu-heading { padding: 8px 12px; font: 600 15px/20px var(--font); }
.team-menu.bn-sort { min-width: 347px; }
.bn-table-wrap { margin-top: 32px; overflow-x: auto; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; background: var(--db-ffffff, #fff); }
.bn-table { width: 100%; min-width: 1000px; border-collapse: collapse; }
.bn-table th { height: 73px; padding: 16px; text-align: left; font: 600 15px/20px var(--font); letter-spacing: -0.1px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.bn-table th:first-child { padding-left: 24px; }
.bn-noh { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 64px 24px; text-align: center; }
.bn-noh .svf-es { margin: 0; }
/* Filters drawer rows as Fresha's: 56 high, icons 24, text 500 17/24. */
.bn-drawer .drawer-body { padding: 0 16px; }
.bn-drawer .acc { border: 0; position: relative; }
.bn-drawer .acc + .acc::before { content: ""; position: absolute; top: 0; left: 52px; right: 16px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.bn-drawer .acc-head { padding: 0 16px; border-radius: 12px; font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.bn-drawer .acc-head:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.bn-drawer .acc-head > span[data-icon] svg { width: 24px; height: 24px; }
.bn-drawer .acc-body { padding: 8px 16px 16px 52px; gap: 16px; }
.bn-check span { font: 400 15px/20px var(--font); }
.bn-range { gap: 16px; }

/* A bono's page. */
.bd-wrap { padding: 32px; }
.bd-crumbs { display: flex; align-items: center; gap: 0; }
.bd-crumbs .tbtn { margin-right: 16px; text-decoration: none; }
.bd-crumbs .tbtn svg { width: 20px; height: 20px; }
.bd-c1 { margin-right: 20px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); text-decoration: none; }
.bd-c2 { font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); }
.bd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 16px; }
.bd-head .page-title { margin: 0; }
.bd-card { margin-top: 32px; padding: 32px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.bd-card + .bd-card { margin-top: 24px; }
.bd-card.half { width: calc(50% - 12px); }
.bd-h { margin: 0 0 16px; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bd-grid .full { grid-column: 1 / -1; }
.bd-l { margin: 0; font: 500 15px/20px var(--font); letter-spacing: -0.1px; }
.bd-v { margin: 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); white-space: pre-line; }
.bd-ben { display: flex; align-items: center; gap: 12px; }
.bd-ben + .bd-ben { margin-top: 16px; }
.bd-ben p { margin: 0; font: 500 15px/20px var(--font); letter-spacing: -0.1px; }
.bd-ben small { display: block; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.bw-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 8px; }
.bw-ic svg { width: 24px; height: 24px; }
.bw-ic.svc { background: var(--db-edfbe9, rgb(237, 251, 233)); color: var(--df-1f8900, rgb(31, 137, 0)); }
.bw-ic.prd { background: var(--db-f4edff, rgb(244, 237, 255)); color: var(--df-7b48d5, rgb(123, 72, 213)); }
.bw-ic.dsc { background: var(--db-faebf7, rgb(250, 235, 247)); color: var(--df-b03b96, rgb(176, 59, 150)); }

/* "Añadir nuevo bono". */
.bf-title { margin-bottom: 12px; letter-spacing: -0.2px; }
.bf-lead { margin: 0 0 32px; font: 400 17px/24px var(--font); letter-spacing: -0.2px; color: var(--df-767676, rgb(118, 118, 118)); }
.bf-h { margin: 0; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
.bf-sub { margin: 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.svf-card.bf-card { margin: 16px 0 40px; }
.bf-card .grid2 { gap: 16px; }
.bf-card .svf-check + * { margin-top: 4px; }
.bf-card .svf-half { width: 347px; max-width: 100%; }
.bf-namebox { display: flex; gap: 8px; }
.bf-namebox .ti { flex: 1; min-width: 0; }
.bf-theme { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff); cursor: pointer; }
.bf-theme:hover { border-color: var(--de-767676, rgb(118, 118, 118)); }
.bf-theme i { width: 28px; height: 20px; border-radius: 4px; }
.bf-ta { height: 122px; display: block; }
.bf-empty { display: flex; flex-direction: column; align-items: center; margin: 16px 0 40px; padding: 32px 24px; border-radius: 8px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); text-align: center; }
.bf-empty .svf-ill { margin-bottom: 16px; }
.bf-empty .tbtn { margin-top: 24px; }
.bf-empty .svf-es { margin: 4px 0 0; }
.bf-bens { margin-top: 16px; padding: 32px 40px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.bf-bh { display: grid; grid-template-columns: minmax(0, 1fr) 204px; gap: 8px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.bf-bh + .bf-ben { margin-top: 12px; }
.bf-ben + .bf-bh { margin-top: 24px; }
.bf-ben { display: grid; grid-template-columns: minmax(0, 1fr) 160px 36px; gap: 8px; align-items: center; }
.bf-ben + .bf-ben { margin-top: 12px; }
.bf-bn { display: flex; align-items: center; gap: 12px; min-width: 0; font: 500 15px/20px var(--font); letter-spacing: -0.1px; }
.bf-bn > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-step { display: flex; align-items: center; height: 48px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff); }
.bf-step button { width: 42px; height: 46px; display: grid; place-items: center; flex: none; color: var(--ink); }
.bf-step button:disabled { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.bf-step button svg { width: 20px; height: 20px; }
.bf-step input { width: 74px; height: 46px; border: 0; outline: 0; text-align: center; font: 600 15px/20px var(--font); color: var(--ink); background: none; -moz-appearance: textfield; }
.bf-step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bf-val { font: 500 15px/20px var(--font); }
.bf-opts { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; }
.bf-opts:hover, .bf-opts[aria-expanded="true"] { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.bf-opts svg { width: 20px; height: 20px; }
.tbtn.bf-addb { margin: 16px 0 40px; }
.bf-exp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* "Tema del bono". */
.pkp-small.on { opacity: 1; }
.team-dialog.bt-dlg { height: auto; }
.mt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px 9px; padding: 16px 48px 0; }
.mt-tile { padding: 4px; border: 0; border-radius: 12px; background: var(--db-ffffff, #fff); cursor: pointer; }
.mt-tile i { display: block; height: 129px; border-radius: 8px; }
.mt-tile.on { box-shadow: inset 0 0 0 2px var(--accent); }
.mt-tile:hover:not(.on) { box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
.bt-foot { display: flex; justify-content: flex-end; padding: 24px 48px 32px; }
/* "Añadir beneficio" wizard pages. */
.bw-page { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--db-ffffff, #fff); animation: bw-in .3s cubic-bezier(.2, .8, .2, 1); }
.bw-page.grey { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
@keyframes bw-in { from { transform: translateY(120px); opacity: .6; } to { transform: none; opacity: 1; } }
.bw-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; height: 72px; padding: 0 32px; background: inherit; }
.bw-page.grey .bw-top { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.bw-page:not(.grey) .bw-top { background: var(--db-ffffff, #fff); }
.bw-back { width: 48px; height: 48px; margin-right: 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); }
.bw-back svg { width: 24px; height: 24px; }
.bw-tt { flex: 1; min-width: 0; margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; opacity: 0; transition: opacity .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-top.scrolled .bw-tt { opacity: 1; }
.bw-top { transition: box-shadow .15s; }
.bw-top.scrolled { box-shadow: rgba(19, 19, 19, .06) 0 4px 2px -2px; }
.bw-wrap { width: min(696px, 100% - 32px); margin: 0 auto; padding: 36px 0 96px; }
.mf-title.bw-h { margin: 0 0 32px; letter-spacing: -0.2px; }
.bw-g { margin: 32px 0 16px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.bw-h + .bw-g { margin-top: 0; }
.bw-type { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 88px; 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)); text-align: left; cursor: pointer; }
.bw-type + .bw-type { margin-top: 12px; }
.bw-type:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.bw-type b { display: block; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.bw-type small { display: block; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.bw-search { margin: 36px 0 24px; }
.bw-cat { display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: 16px 16px 17px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.bw-cat .count { padding: 2px 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)); }
.bw-svc { display: flex; align-items: center; gap: 12px; margin: 0 -16px; padding: 16px; min-height: 77px; border-radius: 12px; cursor: pointer; }
.bw-svc:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.bw-st { flex: 1; min-width: 0; }
.bw-st b { display: block; font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.bw-st small { display: block; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.bw-sp { font: 500 15px/20px var(--font); white-space: nowrap; }
/* Group pages (Fresha): explanation 12px under the title, checkbox rows for all / each category, items indented 24px. */
.bw-sub { margin: -20px 0 0; font: 400 17px/24px var(--font); letter-spacing: -0.2px; color: var(--df-767676, rgb(118, 118, 118)); }
.bw-cat.ck { gap: 12px; cursor: pointer; }
.bw-svc.in { padding-left: 40px; }
/* "No se han encontrado productos": illustration 88px under the search, title 16px under it. */
.bw-none { display: flex; flex-direction: column; align-items: center; margin-top: 88px; text-align: center; }
.bw-none .svf-ill { margin-bottom: 16px; }
.t-radio { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: none; margin: 0; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); cursor: pointer; transition: border-width .1s; }
.t-radio:checked { border: 7px solid var(--accent); }
.bw-g2 { margin: 40px 0 16px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.bw-picks { display: flex; flex-direction: column; gap: 16px; }
.bw-picks .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bw-pick { width: 100%; }
.bw-ck { margin-top: 16px; }
.bw-ck span { font: 400 15px/20px var(--font); }
.bw-g2 + .bw-ck { margin-top: 0; }
/* Discount page (Fresha): the four pickers 24px under their heading with Editar on the right,
   checkbox text 2px lower, the min-order field and the in-store note. */
.bw-g2 + .bw-picks { margin-top: 24px; }
.bw-picks .svf-pick { max-width: none; }
.bw-ck { align-items: flex-start; }
.bw-ck span { padding-top: 2px; }
.bw-min { margin: 12px 0 0 36px; }
.bw-note { display: flex; gap: 8px; margin-top: 24px; padding: 16px 20px 16px 12px; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); box-shadow: inset 0 0 0 1px var(--ds-e1deff, rgb(225, 222, 255)); }
.bw-note [data-icon] { flex: none; width: 24px; height: 24px; color: var(--accent); }
.bw-note svg { width: 24px; height: 24px; }
.bw-note p { margin: 0; padding: 2px 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }

/* Selection windows behind each "Editar" (Fresha: 720 wide, rows with 24px checkboxes,
   "all"/group rows 17/24 600, items indented 24px, bono thumbnails 64, footer 16/48/32). */
.team-dialog.pkp-dlg.ck-dlg { height: auto; max-height: calc(100dvh - 64px); }
.ck-dlg .pkp-body { padding-bottom: 0; }
.ck-list { display: flex; flex-direction: column; margin: 0 -16px; padding: 16px 0; }
.ck-row { display: flex; align-items: center; gap: 12px; padding: 16px 16px 17px; border-radius: 12px; cursor: pointer; }
.ck-row:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.ck-row.hd span:not(.count) { font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.ck-row .count { padding: 2px 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)); }
.ck-row.in { padding-left: 40px; }
.ck-row.th { padding-bottom: 16px; }
.ck-row.th.in { padding-left: 56px; }
.ck-dlg.thumbs .ck-list { gap: 8px; padding-top: 12px; }
.ck-th { flex: none; width: 64px; height: 64px; border-radius: 8px; }
.ck-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ck-t b { font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.ck-t small { font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.ck-p { font: 500 15px/20px var(--font); white-space: nowrap; }
.ck-none { display: flex; flex-direction: column; align-items: center; padding: 64px 0 64px; text-align: center; }
.ck-none .svf-ill { margin-bottom: 16px; }
.ck-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 48px 32px; border-top: 1px solid transparent; }
.ck-foot p { margin: 0; font: 400 15px/20px var(--font); }
.ck-dlg.scrolled .ck-foot { box-shadow: 0 -4px 2px -2px rgba(19, 19, 19, .06); }
.bw-suf { position: relative; display: block; }
.bw-suf .ti { padding-right: 41px; }
.bw-suf span { position: absolute; right: 17px; top: 14px; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }

/* ---------- Membresías / Productos presentation screens ---------- */
.ld-page { position: relative; overflow: hidden; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.ld-glow { position: absolute; right: -280px; top: -240px; width: 1060px; height: 890px; pointer-events: none; opacity: .7; filter: blur(52px) hue-rotate(-5deg);
  background: radial-gradient(38% 34% at 62% 72%, #ff6dfd 0%, transparent 70%), radial-gradient(46% 42% at 70% 46%, #ac65fe 0%, #6d51f4 55%, transparent 75%), radial-gradient(30% 36% at 78% 70%, #c8a6f6 0%, transparent 72%); }
.ld-stage { position: relative; width: min(925px, 100% - 48px); min-height: 100%; margin: 0 auto; display: flex; align-items: center; }
.ld-text { width: 508px; max-width: 100%; margin-left: 12px; padding: 80px 0 48px; }
.ld-badge { margin: 0 0 8px; font: 500 13px/16px var(--font); letter-spacing: .52px; text-transform: uppercase; color: var(--df-1f8900, rgb(31, 137, 0)); }
.ld-title { margin: 0; font: 700 40px/44px var(--font); letter-spacing: -0.2px; }
.ld-lead { margin: 16px 0 24px; font: 400 17px/24px var(--font); letter-spacing: -0.2px; }
.ld-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ld-points li { display: flex; gap: 12px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.ld-points li > [data-icon] { width: 20px; height: 20px; flex: none; margin-top: 0; }
.ld-points li > [data-icon] svg { width: 20px; height: 20px; }
.ld-points a { color: var(--accent); text-decoration: none; }
.ld-actions { display: flex; gap: 4px; margin-top: 56px; }
.ld-art { position: absolute; left: 575px; top: 50%; width: 380px; height: 420px; margin-top: -194px; pointer-events: none; }
.ld-mcard { position: absolute; width: 276px; height: 172px; padding: 20px; border-radius: 14.4px; color: #fff; box-shadow: 0 30px 50px -16px rgba(20, 4, 60, .55); overflow: hidden; }
.ld-mcard .t { margin: 0; font: 600 20.4px/28.8px var(--font); }
.ld-mcard .s { margin: 0; font: 400 15px/20px var(--font); opacity: .9; }
.ld-mcard .p { position: absolute; right: 20px; bottom: 44px; margin: 0; display: flex; align-items: baseline; gap: 6px; }
.ld-mcard .p b { font: 600 24px/33.6px var(--font); }
.ld-mcard .p span { font: 500 15.6px/19.2px var(--font); opacity: .9; }
.ld-mcard .f { position: absolute; right: 20px; bottom: 20px; margin: 0; font: 500 15px/20px var(--font); opacity: .9; }
.ld-mcard.c2 .p, .ld-mcard.c3 .p { bottom: 20px; }
.ld-mcard.c1 { left: 34px; top: 66px; transform: rotate(-15deg); background: radial-gradient(90% 120% at 100% 0%, #d36bf2 0%, transparent 60%), linear-gradient(135deg, #4b2df0, #8b3ff5 55%, #c06cf5); }
.ld-mcard.c2 { left: 61px; top: 115px; background: radial-gradient(90% 120% at 0% 100%, #f04a7a 0%, transparent 60%), linear-gradient(135deg, #ff4f2e, #ff8a1f 55%, #ffc23b); }
.ld-mcard.c3 { left: 67px; top: 180px; transform: rotate(15deg); background: radial-gradient(90% 120% at 100% 100%, #6c63e8 0%, transparent 60%), linear-gradient(135deg, #2bb59e, #3a9fc9 55%, #5a6ce0); }
.ld-art.prd { height: 520px; margin-top: -244px; }
.ld-phone { position: absolute; left: 116px; top: 10px; width: 230px; height: 454px; padding: 16px 14px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: 0 0 0 6px rgba(255, 255, 255, .55), 0 24px 48px -12px rgba(40, 20, 90, .25); }
.ld-ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font: 600 15px/20px var(--font); }
.ld-ph [data-icon] svg { width: 16px; height: 16px; }
.ld-pg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.ld-pt .pr { margin: 6px 0 0; font: 600 11px/14px var(--font); }
.ld-pt .nm { margin: 0; font: 400 11px/14px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ld-pi { position: relative; height: 96px; border-radius: 6px; display: grid; place-items: center; }
.ld-pi span { width: 26px; height: 58px; border-radius: 6px 6px 4px 4px; background: var(--db-ffffff-70, rgba(255, 255, 255, .7)); box-shadow: inset 0 -16px 0 rgba(0, 0, 0, .06); }
.ld-pi.green { background: var(--db-cfe9de, #cfe9de); } .ld-pi.green span { background: #8ccdb5; }
.ld-pi.cream { background: var(--db-fbf1cf, #fbf1cf); } .ld-pi.cream span { background: #e8c35b; width: 22px; }
.ld-pi.grey { background: var(--db-e9e6e3, #e9e6e3); } .ld-pi.grey span { background: #a99d92; }
.ld-pi.sand { background: var(--db-f3e7d8, #f3e7d8); } .ld-pi.sand span { background: #d8b98f; width: 20px; }
.ld-pi.pink { background: var(--db-f7e1e3, #f7e1e3); } .ld-pi.pink span { background: #e9a7ad; }
.ld-pi.blue { background: var(--db-dcebf6, #dcebf6); } .ld-pi.blue span { background: #9ec5e6; }
.ld-float { position: absolute; left: 34px; top: 279px; width: 180px; height: 230px; padding: 14px; border-radius: 14px; background: var(--db-ffffff, #fff); box-shadow: 0 20px 40px -12px rgba(40, 20, 90, .3); }
.ld-float .ld-pi { height: 140px; background: var(--db-f6dede, #f6dede); }
.ld-pi.polish span { width: 30px; height: 64px; border-radius: 10px 10px 8px 8px; background: #d6453d; box-shadow: 0 -22px 0 -8px var(--ds-2f2f2f, #2f2f2f); }
.ld-float .pr { margin: 10px 0 0; font: 600 13px/16px var(--font); }
.ld-fr { display: flex; justify-content: space-between; align-items: center; }
.ld-fr .nm { margin: 0; font: 400 12px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ld-stock { padding: 1px 6px; border-radius: 4px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); font: 500 10px/14px var(--font); }
.ld-art.pkg { height: 300px; margin-top: -150px; }
.ld-bono { position: absolute; left: 60px; top: 60px; width: 280px; height: 175px; box-sizing: border-box; padding: 20px; border-radius: 16px; color: #fff; background: url(/promo-art/purple-veil.svg) center / cover no-repeat; box-shadow: 0 30px 50px -16px rgba(60, 30, 140, .4); }
.ld-bono .t { margin: 0; font: 600 20px/28px var(--font); }
.ld-bono .s { margin: 0; font: 400 14px/20px var(--font); opacity: .9; }
.ld-bono ul { margin: 16px 0 0; padding: 0; list-style: none; display: none; }
.ld-bono .p { margin: 32px 0 0; text-align: right; font: 600 24px/32px var(--font); }
.ld-bono .f { margin: 0; text-align: right; font: 400 13px/16px var(--font); opacity: .85; }
@media (max-width: 1099px) { .ld-art { display: none; } .ld-glow { opacity: .4; } }

/* ---------- Importación de productos CSV ---------- */
html:has(.pi-page), body:has(.pi-page) { height: auto; min-height: 100%; overflow: visible auto; background: var(--db-ffffff, #fff); }
.pi-top { position: sticky; top: 0; z-index: 5; height: 88px; padding: 12px 32px 0; background: var(--db-ffffff, #fff); }
.pi-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pi-steps span { height: 4px; border-radius: 999px; background: var(--db-131313-5, rgba(19, 19, 19, .05)); }
.pi-steps span.on { background: var(--accent); }
.pi-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pi-tt { flex: 1; margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.pi-wrap { width: min(696px, 100% - 32px); margin: 0 auto; padding: 2px 0 96px; }
.pi-eyebrow { margin: 0 0 14px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.mf-title.pi-h { margin: 0 0 12px; letter-spacing: -0.2px; }
.pi-lead { margin: 0 0 32px; font: 400 17px/24px var(--font); letter-spacing: -0.2px; color: var(--df-767676, rgb(118, 118, 118)); }
.pi-lead a, .pi-help a { color: var(--accent); text-decoration: none; }
.pi-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 320px; padding: 8px; border: 1px dashed var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)) content-box; cursor: pointer; }
.pi-drop.over { background-color: var(--db-f0f0ff, rgb(240, 240, 255)); }
.pi-ic { width: 32px; height: 32px; color: var(--ink); }
.pi-ic svg { width: 32px; height: 32px; }
.pi-drop strong { margin: 12px 0 24px; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.pi-help { margin: 8px 0 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.bn-drawer .drawer-head { padding: 32px 32px 32px; }
.bn-drawer .drawer-body { display: block; }
.team-menu.bn-m238 { width: 238px; min-width: 0; }
.team-menu.bn-m198 { width: 198px; min-width: 0; }
.bn-table th:nth-child(1) { width: 320px; } .bn-table th:nth-child(2) { width: 180px; } .bn-table th:nth-child(3) { width: 100px; }
.bn-table th:nth-child(4) { width: 120px; } .bn-table th:nth-child(5) { width: 140px; } .bn-table th:nth-child(6), .bn-table th:nth-child(7) { width: 120px; }
.bd-page .bn-table th:nth-child(1) { width: 350px; } .bd-page .bn-table th:nth-child(2) { width: 196px; } .bd-page .bn-table th:nth-child(3) { width: 131px; }
.bd-page .bn-table th:nth-child(4) { width: 153px; } .bd-page .bn-table th:nth-child(5), .bd-page .bn-table th:nth-child(6) { width: 131px; }
.bn-table { table-layout: fixed; min-width: 1100px; }
.bd-page .bn-table { min-width: 1092px; }
/* "Gestionar el orden" of Bonos: pills, 16px category cards, 88px bono cards. */
.ro-tabs { margin: 40px 0 48px; padding: 8px 0; }
.ro-bonos .ro-cat { padding: 16px; }
.ro-bonos .ro-cat-h p { font: 600 17px/24px var(--font); }
.ro-bonos .ro-cat-h .count { padding: 2px 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)); }
.ro-bonos .ro-cat-h .ro-g { width: 20px; height: 20px; margin-right: 4px; }
.ro-bonos .ro-svcs { padding-top: 16px; }
.ro-bonos .ro-card { height: 88px; }
.ro-bonos .ro-in { gap: 0; padding: 0 24px; }
.ro-bonos .ro-in .ro-g { width: 20px; height: 20px; margin-right: 16px; }
.ro-bonos .ro-in .bn-ic { margin-right: 12px; }
.ro-bonos .ro-in p { font: 600 15px/20px var(--font); letter-spacing: -0.1px; }

/* ---------- "Añadir un nuevo producto" (white page, 628 + 324 columns) ---------- */
html:has(.pf-page), body:has(.pf-page) { height: auto; min-height: 100%; overflow: visible auto; background: var(--db-ffffff, #fff); }
.pf-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; height: 84px; padding: 0 24px; background: var(--db-ffffff, #fff); transition: box-shadow .2s; }
.pf-top.scrolled { box-shadow: 0 4px 2px -2px rgba(19, 19, 19, .06); }
.pf-x { width: 48px; height: 48px; }
.pf-x svg { width: 24px; height: 24px; }
.pf-tt { flex: 1; margin: 0; text-align: center; font: 600 24px/32px var(--font); letter-spacing: -0.2px; opacity: 0; transition: opacity .2s; }
.pf-top.scrolled .pf-tt { opacity: 1; }
.tbtn.pf-save { min-width: 160px; justify-content: center; }
.pf-title { margin: 0; text-align: center; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.pf-cols { display: grid; grid-template-columns: 628px 324px; gap: 24px; width: 976px; max-width: calc(100% - 32px); margin: 56px auto 0; padding-bottom: 48px; align-items: start; }
.pf-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pf-card { border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; background: var(--db-ffffff, #fff); }
.pf-ch { padding: 16px 24px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.pf-ch h2 { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.pf-ch p { margin: 2px 0 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); }
.pf-cb { display: flex; flex-direction: column; gap: 24px; padding: 16px 24px 32px; }
.pf-g { gap: 16px; }
.pf-link { display: block; width: calc(100% + 20px); margin: -10px -10px -10px; padding: 10px; border-radius: 8px; text-align: left; font: 400 14px/20px var(--font); color: var(--accent); cursor: pointer; }
.pf-link:hover { background: rgba(105, 80, 243, .06); }
.pf-pre, .tf > .pf-pre { display: flex; align-items: center; gap: 0; height: 48px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff); }
.pf-pre:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pf-pre span { flex: none; padding-left: 16px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pf-pre .ti { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 0; box-shadow: none; background: none; -moz-appearance: textfield; }
.pf-pre .ti::-webkit-inner-spin-button { -webkit-appearance: none; }
.pf-sec { margin-top: 25px; }
.pf-l { margin: 0; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.pf-d { margin: 2px 0 16px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.pf-d a { color: var(--accent); text-decoration: none; }
.pf-tg, .pf-sw { display: flex; align-items: center; gap: 16px; font: 400 15px/24px var(--font); cursor: pointer; }
.pf-sec2 > .pf-sw, .pf-box .pf-sw { gap: 12px; } /* Fresha: stock switches sit 12px from their text */
.pf-page .switch { width: 48px; }
.pf-page .switch:checked::after { transform: translateX(24px); }
.pf-sec2 { margin-top: 26px; display: flex; flex-direction: column; gap: 24px; }
.pf-sec2 .pf-box + .pf-box { margin-top: 0; }
.pf-sec2 .pf-l { margin-bottom: -8px; }
.pf-tax { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 16px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 8px; background: var(--db-f2f2f2, rgb(242, 242, 242)); font: 400 15px/20px var(--font); }
.pf-tax .link-btn { font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.link-btn.pf-big { align-self: flex-start; font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
.pf-sku + .pf-sku { margin-top: 8px; }
.pf-box { padding: 16px 16px 32px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.pf-box + .pf-box { margin-top: 24px; }
.pf-sec .pf-box:first-of-type { margin-top: 0; }
.pf-box.low { padding: 16px 24px 32px; }
.pf-loc { display: flex; align-items: center; gap: 12px; }
.pf-loc p { margin: 0; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.pf-loc small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pf-locic { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); }
.pf-locic svg { width: 32px; height: 32px; }
.pf-in { margin: 32px 8px 0; }
.pf-g2 { gap: 16px; margin: 16px 0 24px; }
.pf-photos .pf-cb { padding: 16px 24px 32px; }
.pf-drop { height: 274px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 8px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); font: 400 15px/20px var(--font); cursor: pointer; }
.pf-drop svg { width: 20px; height: 20px; }
/* Chooser dialogs (marca, categoría, proveedor). */
.team-dialog.pc-dlg { height: 530px; }
.pc-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0 48px 32px; }
.pc-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pc-none .svf-ill { margin-bottom: 16px; }
.pc-none .svf-es { margin: 4px 0 24px; }
.pc-search { margin: 16px 0; }
.pc-list { display: flex; flex-direction: column; }
.pc-row { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; border-radius: 8px; font: 500 15px/20px var(--font); text-align: left; cursor: pointer; }
.pc-row:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.pc-row svg { width: 20px; height: 20px; color: var(--accent); }
.pc-field { margin-top: 32px; }
.pc-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: auto; padding-top: 16px; }
.pf-skurow { display: flex; gap: 8px; align-items: center; }
.pf-skurow + .pf-skurow { margin-top: 8px; }
.pf-skurow .ti { flex: 1; }
.pf-skudel { width: 48px; height: 48px; flex: none; }
.pf-skudel svg { width: 20px; height: 20px; }
.pf-pre:has(+ .pkf-err) { border-color: var(--de-d4163a, rgb(212, 22, 58)); }

/* ---------- Lista de productos ---------- */
.pl-title { display: flex; align-items: center; gap: 8px; }
.pl-title .count { padding: 2px 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)); }
.pl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; padding: 16px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.pl-bar .left { display: flex; gap: 12px; }
.pl-search { width: 210px; }
.pl-table { margin-top: 16px; }
.pl-head, .pl-row { display: grid; grid-template-columns: 44px 400px 155px 155px 130px 140px; align-items: center; }
.pl-head { height: 73px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.pl-head.has-sel { grid-template-columns: 44px 1fr auto; height: 57px; padding-right: 8px; }
.pl-hc { display: flex; align-items: center; height: 100%; padding-left: 16px; cursor: pointer; }
.pl-th { margin: 0; padding: 16px; height: auto; border-radius: 0; white-space: normal; }
.pl-row { height: 80px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); cursor: pointer; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.pl-row:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.pl-row > span { padding: 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row > span.sm { font-size: 14px; }
.pl-name { display: flex; align-items: center; gap: 16px; padding: 0 16px; min-width: 0; }
.pl-img { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 8px; color: var(--ink); }
.pl-img svg { width: 32px; height: 32px; }
.pl-pager { margin: 16px 0 0; padding: 16px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); text-align: center; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pl-pager b { font-weight: 600; }
.team-menu.pl-menu { width: 236px; }
.team-menu.pl-sortm { width: 288px; }
/* Product drawer: 330 side + 480 grey main. */
.pd { position: absolute; top: 0; right: 0; bottom: 0; width: 811px; max-width: 100%; display: grid; grid-template-columns: 330px minmax(0, 480px); background: var(--db-ffffff, #fff); animation: drawer-in .2s ease-out; }
.pd-side { overflow-y: auto; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.pd-top { display: flex; flex-direction: column; align-items: center; padding: 32px 24px 24px; text-align: center; }
.pd-pic { width: 248px; height: 248px; display: grid; place-items: center; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 4px; color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.pd-pic svg { width: 150px; height: 150px; stroke-width: .8; }
.pd-name { margin: 12px 0 8px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.pd-badge { padding: 4px 12px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); font: 500 13px/16px var(--font); }
.pd-top .tbtn { margin-top: 24px; }
.pd-side hr { margin: 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.pd-tabs { list-style: none; margin: 0; padding: 40px 16px; display: flex; flex-direction: column; }
.pd-tabs button { width: 100%; height: 44px; padding: 0 16px; border-radius: 8px; text-align: left; font: 500 15px/20px var(--font); color: var(--ink); }
.pd-tabs button:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.pd-tabs button.is-active { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.pd-main { overflow-y: auto; padding: 32px 32px 32px; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.pd-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.pd-h h2 { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.pd-h .tbtn svg { width: 20px; height: 20px; }
.pd-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)); }
.pd-card + .pd-card { margin-top: 16px; }
.pd-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.pd-card .count, .pd-loc .count { padding: 2px 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)); }
.pd-card hr { margin: -8px -24px 16px; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.pd-r { display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.pd-r + .pd-r { margin-top: 16px; }
.pd-r > span:first-child { max-width: 184px; font-weight: 500; }
.pd-r > span:last-child { color: var(--df-767676, rgb(118, 118, 118)); text-align: right; }
.pd-r.ink > span:first-child { font-weight: 600; }
.pd-r.ink > span:last-child { color: var(--ink); }
.pd-loc { display: flex; align-items: center; gap: 12px; margin: 0 -16px; padding: 12px 16px; border-radius: 12px; font: 600 15px/20px var(--font); }
.pd-loc p { flex: 1; margin: 0; }
.pd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 254px; padding: 32px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; text-align: center; }
.pd-empty .svf-ill { margin-bottom: 16px; }
.pd-empty .svf-es { margin: 4px 0 0; }
.team-dialog.pd-deldlg { max-width: 512px; height: auto; }
.pd-del { padding: 0 48px; }
.pd-del p { margin: 32px 0 0; font: 400 17px/24px var(--font); letter-spacing: -0.2px; }
.pd-delf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 48px 32px; }
.pd-r.ink { margin-top: 24px !important; }
.pd-card:has(.pd-loc) { padding-bottom: 16px; }

/* ---------- Gestión de inventario ---------- */
.iv-empty { display: flex; flex-direction: column; align-items: center; margin-top: 32px; padding: 64px 24px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; text-align: center; }
.iv-empty .svf-ill { margin-bottom: 16px; }
.iv-empty .svf-es { margin: 4px 0 0; }
.iv-empty .svf-es a { color: var(--accent); text-decoration: none; }
.iv-empty .tbtn { margin-top: 24px; }
.iv-table { margin-top: 0; }
.iv-head, .iv-row { display: grid; grid-template-columns: 304px 200px 160px 180px 180px; align-items: center; }
.iv-table.sup .iv-head, .iv-table.sup .iv-row { grid-template-columns: 304px 260px 220px 240px; }
.iv-head { height: 53px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.iv-row { height: 56px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); color: var(--ink); text-decoration: none; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.iv-row:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.iv-row > span { padding: 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; font: 500 13px/16px var(--font); font-style: normal; }
.iv-badge.warn { background: var(--db-fff7db, rgb(255, 247, 219)); color: var(--df-b7570b, rgb(183, 87, 11)); }
.iv-badge.bad { background: var(--db-feeceb, rgb(254, 236, 235)); color: var(--df-d4163a, rgb(212, 22, 58)); }
.iv-badge.ok { background: var(--db-edfbe9, rgb(237, 251, 233)); color: var(--df-1f8900, rgb(31, 137, 0)); }
.iv-badge.blue { background: var(--db-ebf3ff, rgb(235, 243, 255)); color: var(--df-2d76ec, rgb(45, 118, 236)); }
.iv-badge.grey { background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-767676, rgb(118, 118, 118)); }
.team-menu.iv-m245 { width: 245px; }
/* Nuevo inventario */
.pi-steps.two { grid-template-columns: 1fr 1fr; }
.sk-h1 { margin-bottom: 32px; }
.sk-pick { display: block; width: 100%; 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)); text-align: left; cursor: pointer; }
.sk-pick + .sk-pick { margin-top: 16px; }
.sk-pick:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.sk-loc { display: flex; align-items: center; gap: 12px; }
.sk-loc > div { flex: 1; min-width: 0; }
.sk-loc p { margin: 0; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.sk-loc small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pf-locic.sk-ic { width: 56px; height: 56px; }
.pf-locic.sk-ic svg { width: 28px; height: 28px; }
.sk-chev svg { width: 24px; height: 24px; }
.pi-bar .bw-back { margin-right: 8px; }
.sk-chosen { padding: 20px 24px; border-radius: 12px; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.sk-h2 { margin: 40px 0 24px; }
.sk-tf { margin-top: 24px; }
/* Contar productos */
html:has(.sk-page), body:has(.sk-page) { background: var(--db-ffffff, #fff); }
.sk-page { min-height: 100vh; }
.sk-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; height: 73px; padding: 0 32px; background: var(--db-ffffff, #fff); border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sk-top.rv { height: 72px; border: 0; box-shadow: 0 4px 2px -2px rgba(19, 19, 19, .06); }
.sk-tt { flex: 1; margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.sk-scan { display: flex; align-items: center; gap: 12px; font: 400 15px/20px var(--font); cursor: pointer; }
.sk-scan .switch { width: 48px; }
.sk-scan .switch:checked::after { transform: translateX(24px); }
.sk-info { width: 24px; height: 24px; margin-right: 16px; }
.sk-info svg { width: 24px; height: 24px; }
.sk-top .tbtn [data-icon] svg { width: 24px; height: 24px; }
.sk-cols { display: grid; grid-template-columns: minmax(0, 1fr) 444px; min-height: calc(100vh - 73px); }
.sk-main { padding: 32px 32px 64px; }
.sk-main .pl-bar { margin-top: 0; }
.sk-search { width: 256px; }
.sk-list { margin-top: 16px; }
.sk-prod { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sk-prod > div { flex: 1; }
.sk-prod p { margin: 0; font: 500 15px/20px var(--font); }
.sk-prod small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sk-n { width: 120px; text-align: right; }
.sk-empty { display: flex; flex-direction: column; align-items: center; padding: 64px 24px; text-align: center; }
.sk-empty .svf-ill { margin-bottom: 16px; }
.sk-empty .svf-es { margin: 4px 0 0; }
.sk-side { padding: 32px 33px; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.sk-side h2 { margin: 0; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
.sk-when { margin: 4px 0 16px; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sk-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)); }
.sk-card + .sk-card { margin-top: 16px; }
.sk-card .sk-loc p { font-weight: 400; }
.sk-card .sk-loc small { font-size: 13px; line-height: 16px; }
.sk-card h3 { margin: 0 0 12px; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.sk-kv { display: flex; justify-content: space-between; margin: 12px 0 0; font: 400 15px/20px var(--font); }
.sk-kv.head { margin-top: 32px; font-weight: 500; color: var(--df-767676, rgb(118, 118, 118)); }
.sk-act { min-height: 396px; }
.sk-actempty { display: flex; flex-direction: column; align-items: center; margin-top: 72px; text-align: center; }
.sk-actempty .svf-ill { margin-bottom: 16px; }
.sk-actempty p { max-width: 283px; margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* Revisar el inventario */
.rv-t { flex: 1; min-width: 0; }
.rv-t small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rv-t p { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.rv-wrap { width: min(960px, 100% - 32px); margin: 0 auto; padding: 2px 0 96px; }
.mf-title.rv-h { margin: 0 0 20px; letter-spacing: -0.2px; }
.rv-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 32px; font: 400 17px/24px var(--font); letter-spacing: -0.2px; }
.rv-meta [data-icon] svg { width: 24px; height: 24px; }
.rv-meta > span:nth-child(3) { margin-left: 16px; }
.rv-bar { padding: 16px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.rv-row1 { display: flex; justify-content: space-between; gap: 12px; }
.rv-search { width: 301px; }
.rv-pills { display: flex; gap: 8px; margin-top: 16px; }
.rv-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); font: 500 15px/20px var(--font); cursor: pointer; }
.rv-pill .count { padding: 2px 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)); }
.rv-pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rv-head, .rv-r { display: grid; grid-template-columns: 295px 147px 158px 147px 147px 63px; align-items: center; }
.rv-head { height: 53px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 600 15px/20px var(--font); }
.rv-head > span { display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.rv-head > span:not(:first-child) { justify-content: flex-end; }
.rv-head i svg { width: 16px; height: 16px; }
.rv-r { height: 56px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 400 15px/20px var(--font); }
.rv-r > span { padding: 0 16px; }
.rv-r > span:not(:first-child) { text-align: right; }
.rv-r .pos { color: var(--df-1f8900, rgb(31, 137, 0)); } .rv-r .neg { color: var(--df-d4163a, rgb(212, 22, 58)); }
/* Proveedor */
html:has(.sp-page), body:has(.sp-page) { height: auto; min-height: 100%; overflow: visible auto; background: var(--db-ffffff, #fff); }
/* Only the page scrolls: a scrollable body (with the global overscroll-behavior: none) would swallow the mouse wheel. */
body:has(.pi-page), body:has(.pf-page), body:has(.sp-page) { overflow: visible; }
.sp-top { background: var(--db-ffffff, #fff); }
.sp-wrap { width: min(696px, 100% - 32px); margin: 0 auto; padding: 36px 0 96px; display: flex; flex-direction: column; gap: 24px; }
.mf-title.sp-h1 { margin: 0 0 8px; letter-spacing: -0.2px; }
.sp-hr { width: 100%; margin: 16px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sp-phone { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 8px; }
.sp-same span { font: 400 15px/20px var(--font); }
/* Inventarios presentation art */
.ld-blue .ld-glow { filter: blur(52px) hue-rotate(-38deg); }
.ld-sr { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--de-f2f2f2, rgb(242, 242, 242)); }
.ld-sr .ld-pi { width: 54px; height: 72px; flex: none; }
.ld-sr .ld-pi span { width: 16px; height: 40px; }
.ld-sr .nm2 { margin: 0 0 4px; font: 600 11px/14px var(--font); }
.ld-sb { padding: 2px 6px; border-radius: 4px; font: 500 10px/14px var(--font); }
.ld-sb.blue { background: var(--db-ebeeff, rgb(235, 238, 255)); color: var(--accent); } .ld-sb.amber { background: var(--db-fff5d2, rgb(255, 245, 210)); color: var(--df-a06e00, rgb(160, 110, 0)); } .ld-sb.red { background: var(--db-feeceb, rgb(254, 236, 235)); color: var(--df-d4163a, rgb(212, 22, 58)); }
.ld-ft { margin: 0 0 10px; font: 600 12px/16px var(--font); }
.ld-pi.lilac { background: var(--db-f1e8ef, #f1e8ef); } .ld-pi.lilac span { background: #c9a6c0; }
.ld-float .ld-pi.lilac { height: 120px; }
.ld-step { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; font: 600 16px/20px var(--font); }
.ld-step i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font-style: normal; font-size: 14px; }
.sk-card.sk-act { margin-top: 20px; }

/* "Cambiar el impuesto sobre las ventas" (Fresha: 512 wide, header 32/48/16, a select per centre, Aplicar on the right). */
.team-dialog.tax-dlg { max-width: 512px; padding: 0; border-radius: 16px; }
.tax-head { display: flex; align-items: flex-start; gap: 16px; padding: 32px 48px 16px; }
.tax-head > div { flex: 1; min-width: 0; margin-top: -2px; }
.team-dialog .tax-head h2 { margin: 0; padding: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.tax-head p { margin: 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.tax-head .icon-btn { flex: none; width: 48px; height: 48px; margin: -12px -12px 0 0; }
.tax-body { display: flex; flex-direction: column; gap: 24px; padding: 16px 48px; }
.tax-body .tf { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.tax-body .tf label { font: 600 15px/20px var(--font); color: var(--ink); }
.tax-dlg .d-foot { margin: 0; border-top: 1px solid transparent; padding: 16px 48px 32px; gap: 12px; justify-content: flex-end; }
.tax-dlg .d-foot .tbtn { font: 600 17px/24px var(--font); }

/* Categoría in the bono / membership form: Fresha's own list (radius 12, items 40 high, 15/20 500)
   as wide as the field minus its chevron, "Crear nueva categoría" in purple. */
.ts.bf-cat { width: 100%; text-align: left; font: 400 15px/20px var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts.bf-cat.placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.team-menu.bf-catm { min-width: 0; border-radius: 12px; }
.bf-catm .menu-item { height: 40px; padding: 8px 12px; border-radius: 8px; font: 500 15px/20px var(--font); }
.bf-catm .menu-item:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.bf-catm .menu-item > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf-catm .menu-item.bf-catnew { color: var(--accent); }

/* "Añadir categoría" from the form (Fresha: 720 wide, title 20/28 at 30, fields 24 apart, 0/255 description). */
.team-dialog.nc-dlg { max-width: 720px; padding: 30px 48px 32px; border-radius: 16px; display: flex; flex-direction: column; gap: 24px; }
.nc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.team-dialog .nc-head h2 { margin: 0; padding: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.nc-head .icon-btn { flex: none; width: 48px; height: 48px; margin: -10px -12px -10px 0; border-radius: 999px; }
.nc-dlg .tf { margin: 0; gap: 4px; }
.nc-dlg .tt { height: 122px; }
.nc-err { margin: 0; font: 400 13px/16px var(--font); color: var(--df-d4163a, rgb(212, 22, 58)); }
.nc-dlg .d-foot { margin-top: 9px; gap: 8px; }

/* Servicio › Recursos (Fresha): one row per centre with its requirement chips and "Acciones". */
.rq-search { width: 256px; max-width: 100%; height: 36px; margin-top: -8px; }
.rq-locs { display: flex; flex-direction: column; margin-top: -8px; }
.rq-loc { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.rq-loc:last-child { border-bottom: 0; }
.rq-loc > div { flex: 1; min-width: 0; }
.rq-loc b { display: block; font: 600 15px/20px var(--font); }
.rq-loc small { display: block; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rq-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); font: 500 13px/16px var(--font); }
.rq-chip svg { width: 14px; height: 14px; }
.rq-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, var(--db-ffffff, #fff)); color: color-mix(in oklab, var(--c) 78%, var(--df-000000, #000)); }
.rq-ic.grey { background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--ink); }
.rq-ic svg { width: 22px; height: 22px; }
.rq-page { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--db-ffffff, #fff); font-family: var(--font); color: var(--ink); }
.rq-top { position: sticky; top: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 32px; background: var(--db-ffffff, #fff); }
.rq-wrap { width: min(696px, 100% - 32px); margin: 24px auto 96px; display: flex; flex-direction: column; gap: 16px; }
.rq-wrap h1 { margin: 0; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.rq-lead { margin: -4px 0 16px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rq-item { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 20px; box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; }
.rq-item > span:nth-child(2) { flex: 1; }
.rq-item b { display: block; font: 600 15px/20px var(--font); }
.rq-item small { display: block; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rq-list { display: flex; flex-direction: column; gap: 12px; }
.rq-foot { display: flex; justify-content: space-between; align-items: center; }
.rq-foot small { font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rq-picks { display: flex; flex-direction: column; gap: 16px; margin-left: 36px; }
.rq-pick { display: flex; align-items: center; gap: 12px; font: 400 17px/24px var(--font); cursor: pointer; }
@media (max-width: 767px) { .rq-wrap h1 { font-size: 28px; line-height: 36px; } .rq-top { padding: 12px 16px; } }
/* Phones (Fresha's "Menú de servicios" at 402 px): only the search (48px tall, radius 15)
   and a round 48px filter button; the categories become one line of pills that slides
   sideways (the chosen one black with a white count); the cards lose their ring and keep
   the category's colour as a thin bar on the left. */
@media (max-width: 767px) {
  .ct-bar-top { margin-top: 24px; padding: 0; flex-wrap: nowrap; background: none; box-shadow: none; }
  .ct-bar-top .left { flex: 1; flex-wrap: nowrap; gap: 12px; }
  .ct-bar-top #loc, .ct-bar-top #order { display: none; }
  .ct-search { flex: 1; width: auto; height: 48px; border-radius: 15.24px; }
  .ct-search input { height: 46px; font-size: 17px; }
  .ct-bar-top #flt { width: 48px; height: 48px; padding: 0; flex: none; justify-content: center; border-radius: 999px; }
  .ct-bar-top #flt > span:not([data-icon]) { display: none; }
  .ct-bar-top #flt svg { width: 24px; height: 24px; }
  .ct-grid { display: block; margin-top: 40px; }
  .ct-cats { position: static; flex-direction: row; gap: 4px; margin: 0 -20px 32px; padding: 0 20px; overflow-x: auto; border-radius: 0; background: none; box-shadow: none; scrollbar-width: none; }
  .ct-cats::-webkit-scrollbar { display: none; }
  .ct-cats-t, .ct-cat.add { display: none; }
  .ct-cat { width: auto; flex: none; height: 36px; padding: 0 16px; gap: 8px; border-radius: 999px; white-space: nowrap; font: 600 15px/20px var(--font); }
  .ct-cat.on { background: var(--ink); color: var(--do-ffffff, #fff); }
  .ct-cat.on .count { box-shadow: none; padding: 0; background: none; color: #fff; }
  .ct-sec-h > .tbtn { width: 36px; padding: 0; justify-content: center; border: 0; background: none; font-size: 0; }
  .ct-sec-h > .tbtn > * { display: none; }
  .ct-sec-h > .tbtn::after { content: ""; width: 24px; height: 24px; background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 23.33A2.33 2.33 0 1 1 16 28a2.33 2.33 0 0 1 0-4.67m0-9.66a2.33 2.33 0 1 1 0 4.66 2.33 2.33 0 0 1 0-4.66M16 4a2.33 2.33 0 1 1 0 4.67A2.33 2.33 0 0 1 16 4"/></svg>') center / 24px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 23.33A2.33 2.33 0 1 1 16 28a2.33 2.33 0 0 1 0-4.67m0-9.66a2.33 2.33 0 1 1 0 4.66 2.33 2.33 0 0 1 0-4.66M16 4a2.33 2.33 0 1 1 0 4.67A2.33 2.33 0 0 1 16 4"/></svg>') center / 24px no-repeat; }
  .ct-cards { gap: 24px; }
  .ct-card { box-shadow: none; background: none; border-radius: 0; }
  .ct-card:hover { background: none; }
  .ct-bar { width: 4px; border-radius: 2px; }
  .ct-in { padding: 12px 0 12px 16px; gap: 8px; }
  .ct-grip { display: none; }
}
/* Phones: the inventory and supplier tables slide sideways inside the page (as Fresha's
   tables on phones); the bar keeps the search and a round filter button on one line. */
@media (max-width: 767px) {
  .iv-table { margin: 0 -20px; padding: 0 20px; overflow-x: auto; }
  .iv-head, .iv-row { width: max-content; }
  .pl-bar { flex-wrap: nowrap; padding: 0; margin-top: 24px; background: none; box-shadow: none; }
  .pl-bar .left { flex: 1; flex-wrap: nowrap; gap: 12px; }
  .pl-bar .pl-search { flex: 1; width: auto; }
  .pl-bar #flt { width: 36px; padding: 0; justify-content: center; flex: none; }
  .pl-bar #flt > span:not([data-icon]) { display: none; }
  .pl-bar > #sort { display: none; }
}
/* Phones (Fresha's Bonos at 402 px): underlined tabs, each bono a plain row (40px icon,
   name, benefits, price and its ⋮). */
@media (max-width: 767px) {
  .bn-tabs { gap: 24px; margin: 16px -20px 0; padding: 0 20px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .bn-tabs li { height: 52px; padding: 0; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
  .bn-tabs li:hover { background: none; }
  .bn-tabs li[aria-selected="true"] { background: none; color: var(--ink); border-color: var(--ink); }
  .bn-card { min-height: 0; padding: 12px 0; gap: 12px; border-radius: 0; box-shadow: none; background: none; }
  .bn-ic, .bn-ic.sm { width: 40px; height: 40px; }
  .bn-ic svg { width: 20px; height: 20px; }
  .bn-card .ct-grip { display: none; }
}
/* Phones (Fresha's Inventarios): no head; each stocktake a stacked row (name 600, centre,
   status badge) with a line under it. */
@media (max-width: 767px) {
  .iv-table:not(.sup) { margin: 16px 0 0; padding: 0; overflow: visible; }
  .iv-table:not(.sup) .iv-head { display: none; }
  .iv-table:not(.sup) .iv-row { width: auto; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 0; }
  .iv-table:not(.sup) .iv-row > span { padding: 0; }
  .iv-table:not(.sup) .iv-row > span:first-child { font-weight: 600; }
  .iv-table:not(.sup) .iv-row > span:nth-child(3) { margin-top: 6px; }
  .iv-table:not(.sup) .iv-row > span:nth-child(n+4) { display: none; }
  .iv-table:not(.sup) .iv-row:hover { background: none; }
}
@media (max-width: 767px) { .svf-row { flex-wrap: wrap; } }

/* Fresha's «Editar variante»: 1024 × 772 window, rounded 30 px; «Información básica» and
   «Ajustes» on the left (lilac when chosen), the fields on the right, the buttons bottom right. */
.team-dialog.vf-dlg { width: min(1024px, calc(100vw - 32px)); height: min(772px, calc(100vh - 32px)); max-width: none; padding: 0; border-radius: 30px; display: flex; flex-direction: column; overflow: hidden; }
.vf-h { flex: none; height: 88px; padding: 0 35px 0 49px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.vf-h p { margin: 0; font: 600 20px/28px var(--font); }
.vf-b { flex: 1; min-height: 0; display: flex; }
.vf-nav { flex: none; width: 296px; box-sizing: border-box; padding: 19px 20px; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; gap: 0; }
.vf-nav button { height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; text-align: left; font: 500 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.vf-nav button:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.vf-nav button.on { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.vf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vf-scroll { flex: 1; overflow: auto; padding: 19px 31px 24px 33px; }
.vf-scroll h2 { margin: 0 0 24px; font: 600 24px/32px var(--font); }
.vf-scroll section { display: flex; flex-direction: column; gap: 24px; }
.vf-scroll section h2 { margin-bottom: 0; }
.vf-scroll .tf label, .ao-body .tf label { display: flex; justify-content: space-between; gap: 12px; }
.vf-n { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.vf-area .tt { height: 120px; padding-bottom: 60px; }
.vf-area .svf-ai { left: 16px; bottom: 14px; }
.vf-extra { align-self: flex-start; }
.vf-foot { flex: none; padding: 16px 55px 30px; display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 767px) {
  .team-dialog.vf-dlg { position: fixed; inset: 0; width: auto; height: auto; max-height: none; margin: 0; border-radius: 0; transform: none; }
  .vf-h { height: 72px; padding: 0 8px 0 20px; }
  .vf-b { flex-direction: column; }
  .vf-nav { width: auto; padding: 12px 20px; flex-direction: row; gap: 8px; border-right: 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); overflow-x: auto; }
  .vf-nav button { flex: none; border-radius: 999px; }
  .vf-scroll { padding: 24px 20px; }
  .vf-foot { padding: 16px 20px; }
  .vf-foot .tbtn { flex: 1; }
}

/* Fresha's add-on option window and the group's «Al menos» / «Como máximo». */
.team-dialog.ao-dlg { width: min(720px, calc(100vw - 32px)); max-width: none; border-radius: 30px; }
.ao-body { gap: 24px !important; }
.ao-body .help { margin-top: 4px; }
.ao-adv { align-self: flex-start; height: 40px; margin-top: -9px; color: var(--ink); font: 500 17px/24px var(--font); }
.ao-advb { display: flex; flex-direction: column; gap: 24px; margin-top: -8px; }
.ao-advb[hidden] { display: none; }
.ao-half { max-width: calc(50% - 8px); }
.ao-lim { margin: -20px 0 0 36px; }
.ao-lim[hidden] { display: none; }
.ao-limbox { display: flex; align-items: center; gap: 8px; width: 321px; max-width: 100%; height: 48px; box-sizing: border-box; padding: 0 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15px; background: var(--db-ffffff, #fff); font: 400 15px/20px var(--font); cursor: text; }
.ao-limbox:focus-within { border-color: var(--accent); }
.ao-limbox span { flex: none; color: var(--ink); }
.ao-limbox input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: inherit; }
@media (max-width: 767px) { .ao-half { max-width: none; } .ao-body .grid2 { grid-template-columns: 1fr; } }
.vf-h .icon-btn { width: 48px; height: 48px; }