/* "Equipo" pages. Sizes measured on Fresha (1440×900), see docs/fresha/equipo.md. */
html, body { height: 100%; }
body.modal-open { overflow: hidden; }
.team-app { --t-grey: rgb(118, 118, 118); --t-border: rgb(211, 211, 211); --t-row: rgb(229, 229, 229); --t-soft: rgb(249, 249, 249); --t-lav: rgb(240, 240, 255); }
.team-main { grid-area: main; min-width: 0; min-height: 0; display: flex; overflow: hidden; }

/* Secondary panel. Folding as in Fresha: the panel narrows 208 → 24 px, its
   content fades and slides 15% left, and the round button rides its edge. */
.team-main { position: relative; }
.subnav { width: 208px; flex: none; padding: 24px 8px 0; border-right: 1px solid var(--line); overflow: hidden;
  transition: width .5s cubic-bezier(.85, 0, .15, 1), padding .5s cubic-bezier(.85, 0, .15, 1); }
.subnav-in { width: 192px; transition: opacity .2s cubic-bezier(.85, 0, .15, 1) .2s, transform .5s cubic-bezier(.85, 0, .15, 1); }
.subnav h2 { margin: 0 0 8px; padding: 0 16px; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap; }
.subnav-item { display: flex; align-items: center; min-height: 44px; padding: 12px 16px; border-radius: 8px; font: 500 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); text-decoration: none; }
.subnav-item:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.subnav-item.is-active { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.subnav-sep { padding: 0 12px 24px; }
.subnav-sep hr { margin: 8px 0 0; border: 0; border-top: 1px solid var(--line); }
.subnav h2 ~ h2 { margin-top: 0; }
.subnav-toggle {
  position: absolute; top: 18px; left: 190px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); color: var(--ink);
  transition: left .5s cubic-bezier(.85, 0, .15, 1);
}
.subnav-toggle:hover { background: var(--db-f4f4f4-h, #f4f4f4); }
.subnav-toggle svg { width: 20px; height: 20px; }
.subnav-closed .subnav { width: 24px; padding: 24px 0 0; }
.subnav-closed .subnav-in { opacity: 0; transform: translateX(-15%); pointer-events: none; }
.subnav-closed .subnav-toggle { left: 6px; }
.subnav-closed .subnav-toggle svg { transform: rotate(180deg); }
.subnav-still .subnav, .subnav-still .subnav-in, .subnav-still .subnav-toggle { transition: none !important; }
/* Fresha hides the section panel under 1024 px (tablets): the rail's menus open it instead. */
@media (max-width: 1023px) { .subnav, .subnav-toggle { display: none; } }

.team-page { flex: 1; min-width: 0; overflow-y: auto; padding: 32px 32px 64px; }
.team-page.narrow > * { max-width: 1024px; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) { .team-page { padding: 20px 16px 96px; } }

/* Page header */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 48px; }
.page-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.2px; }
.page-title .count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); font-size: 13px; line-height: 16px; font-weight: 600; color: var(--df-767676, rgb(118, 118, 118)); }
.page-actions { display: flex; gap: 8px; }
.tbtn {
  height: 48px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); color: var(--ink);
  font: 500 15px/20px var(--font); letter-spacing: -0.1px; white-space: nowrap; cursor: pointer; text-decoration: none;
}
.tbtn:hover { background: var(--db-f4f4f4-h, #f4f4f4); }
.tbtn svg { width: 20px; height: 20px; }
.tbtn i svg { width: 16px; height: 16px; }
.tbtn.sm { height: 36px; padding: 0 15px; }
.tbtn.dark { background: var(--ink); border-color: var(--ink); color: var(--do-ffffff, #fff); }
.tbtn.dark:hover { background: var(--db-2b2b2b-h, #2b2b2b); }
.tbtn.ghost { border-color: transparent; background: none; }
.tbtn.ghost:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.tbtn:disabled { opacity: .4; cursor: default; }
.tbtn[aria-expanded="true"] i svg { transform: rotate(180deg); }
.round { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); }
.round svg { width: 20px; height: 20px; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent); font: 600 15px/20px var(--font); cursor: pointer; }

/* Toolbar */
.t-toolbar { margin-top: 32px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.t-toolbar .left, .t-toolbar .right { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Filters in use (Fresha): "Filtros" ringed in purple and a row of purple pills under the search. */
.t-toolbar:has(.flt-chips) { flex-wrap: wrap; row-gap: 16px; }
.tbtn.flt-on { border-color: rgb(105, 80, 243); box-shadow: inset 0 0 0 1px rgb(105, 80, 243); }
.flt-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; }
.flt-chip { height: 36px; padding: 0 7px 0 15px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgb(105, 80, 243); box-shadow: inset 0 0 0 1px rgb(105, 80, 243); border-radius: 999px; background: var(--db-ffffff, #fff); font: 500 15px/20px var(--font); color: var(--ink); white-space: nowrap; }
.flt-chip button { width: 20px; height: 20px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
.flt-chip button svg { width: 20px; height: 20px; }
.tbtn.flt-clear { border-color: transparent; background: none; }
.t-search { position: relative; display: flex; align-items: center; width: 211px; height: 36px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); }
.t-search svg { width: 20px; height: 20px; margin-left: 12px; flex: none; color: var(--ink); }
.t-search input { width: 100%; height: 34px; padding: 0 16px 0 8px; border: 0; border-radius: 999px; background: none; font: 400 15px/20px var(--font); color: var(--ink); outline: none; }
.t-search:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* Members table */
.t-table { width: 100%; margin-top: 0; border-collapse: collapse; table-layout: fixed; }
.t-table th { height: 57px; padding: 0 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)); }
.t-table td { height: 80px; padding: 1px 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); vertical-align: middle; }
.t-table tbody tr:hover td { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.t-table .c-check { width: 44px; padding: 0 0 0 16px; }
.t-table .c-name { width: 340px; }
.t-table .c-contact { width: 340px; }
.t-table .c-actions { width: 152px; text-align: right; }
.t-check { width: 24px; height: 24px; margin: 0; appearance: none; -webkit-appearance: none; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 4px; background: var(--db-ffffff, #fff); cursor: pointer; display: block; }
.t-check:checked { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.5 3 3 6-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; }
.who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.t-avatar { width: 48px; height: 48px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--db-ebf8fe, rgb(235, 248, 254)); color: var(--df-0075a8, rgb(0, 117, 168)); font: 600 16px/24px var(--font); box-shadow: 0 0 0 2px var(--ds-c3e9fb, #c3e9fb); overflow: hidden; }
.t-avatar.sm { width: 40px; height: 40px; font-size: 14px; }
.who-name { font: 600 15px/20px var(--font); letter-spacing: -0.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-sub { display: flex; align-items: center; gap: 4px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.who-sub svg { width: 16px; height: 16px; }
.contact { display: flex; flex-direction: column; font: 500 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); overflow: hidden; }
.contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-cell { font: 400 15px/20px var(--font); }
.t-empty { padding: 48px 16px; text-align: center; color: var(--df-767676, rgb(118, 118, 118)); font-size: 15px; }
@media (max-width: 899px) {
  .t-table .c-contact, .t-table .c-role, .t-table .c-check { display: none; }
  .t-search { width: 100%; }
  .t-toolbar { flex-wrap: wrap; }
}

/* Menus */
.team-menu { min-width: 200px; padding: 8px 20px; }
.team-menu.tm-add { min-width: 240px; }
.team-menu .menu-item { margin: 0 -12px; width: calc(100% + 24px); white-space: nowrap; }
.team-menu .menu-item [data-icon] svg { width: 20px; height: 20px; }
.team-menu .menu-item.is-danger { color: var(--danger); }
.team-menu .menu-heading { margin: 12px 0 4px; font: 600 15px/20px var(--font); }
.team-menu .menu-heading:first-child { margin-top: 4px; }
/* Fresha, 512 to 767 px: the menu still floats, with the phone's rows. */
@media (min-width: 512px) and (max-width: 767px) {
  .popover.team-menu { padding: 8px 20px; }
  .popover.team-menu .menu-item { min-height: 48px; height: auto; padding: 12px; gap: 8px; border-radius: 15.24px; font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
  .popover.team-menu .menu-item [data-icon] svg { width: 24px; height: 24px; }
}
.account-head { display: flex; flex-direction: column; padding: 8px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.account-head span { color: var(--df-767676, rgb(118, 118, 118)); font-size: 14px; }

/* Toast */
.toast.is-error { background: var(--danger); }

/* Dialogs */
.team-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: var(--db-000000-24, rgba(0, 0, 0, .24)); }
.team-dialog { position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: 0 8px 32px rgba(0, 0, 0, .12); }
.team-dialog.wide { max-width: 680px; padding: 40px; }
.team-dialog .d-close { position: absolute; top: 24px; right: 24px; }
.team-dialog h2 { margin: 0; padding-right: 40px; font: 600 20px/28px var(--font); }
.team-dialog.wide h2 { font-size: 28px; line-height: 36px; padding-top: 24px; }
.team-dialog .d-sub { margin: 4px 0 0; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.team-dialog .d-body { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.team-dialog .d-foot { margin-top: 32px; display: flex; justify-content: flex-end; gap: 8px; }
.team-dialog .d-foot.start { justify-content: flex-start; }
.team-dialog .d-foot.full > * { flex: 1; }
.team-dialog .d-foot .tbtn { height: 48px; }
.team-dialog .d-note { font-size: 13px; color: var(--df-767676, rgb(118, 118, 118)); }

/* Form controls */
.tf { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tf > label, .tf > .lbl { display: flex; justify-content: space-between; gap: 8px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.tf .opt { font-weight: 400; color: var(--df-767676, rgb(118, 118, 118)); }
.tf .count { font-weight: 400; color: var(--df-767676, rgb(118, 118, 118)); font-variant-numeric: tabular-nums; }
.tf .help { margin: 0; font-size: 13px; line-height: 16px; color: var(--df-767676, rgb(118, 118, 118)); }
.tf .err { margin: 0; font-size: 13px; line-height: 18px; color: var(--danger); }
.ti, .ts, .tt {
  width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff);
  font: 400 15px/20px var(--font); color: var(--ink); outline: none;
}
.ti::placeholder, .tt::placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); } /* Fresha's placeholder grey */
.ts { padding-right: 44px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--db-ffffff, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%230d0d0d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.ts:invalid, .ts.placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.ts option { color: var(--ink); }
.tt { height: 120px; padding: 12px 16px; resize: none; }
.ti:hover, .ts:hover, .tt:hover { border-color: var(--de-a5a5a5, #a5a5a5); }
.ti:focus, .ts:focus, .tt:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ti[aria-invalid="true"], .ts[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.ts:disabled { background-color: var(--db-f2f2f2, #f2f2f2); color: var(--df-a5a5a5, #a5a5a5); cursor: default; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid2 .full { grid-column: 1 / -1; }
.phone { display: flex; gap: 8px; }
.phone .ts { width: 108px; flex: none; }
.dob { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
@media (max-width: 599px) { .grid2 { grid-template-columns: 1fr; } }
.tcheck { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 20px; }
.tcheck .t-check { flex: none; }
.tcheck strong { display: block; font-weight: 500; }
.tcheck small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--df-767676, rgb(118, 118, 118)); }
.switch { position: relative; width: 44px; height: 24px; flex: none; appearance: none; -webkit-appearance: none; margin: 0; border-radius: 999px; background: var(--db-d3d3d3, #d3d3d3); cursor: pointer; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: var(--db-ffffff, #fff); transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 500 12px/16px var(--font); }
.badge.on { background: var(--db-e3f8e8, #e3f8e8); color: var(--df-0b7a34, #0b7a34); }
.badge.off { background: var(--db-f2f2f2, #f2f2f2); color: var(--df-767676, rgb(118, 118, 118)); }
.badge.lav { background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); }
.badge.num { min-width: 24px; justify-content: center; background: var(--db-f2f2f2, #f2f2f2); color: var(--df-767676, rgb(118, 118, 118)); }

/* Drawer (Filtros) */
.drawer-wrap { position: fixed; inset: 0; z-index: 40; background: var(--db-000000-24, rgba(0, 0, 0, .24)); }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; display: flex; flex-direction: column; background: var(--db-ffffff, #fff); animation: drawer-in .2s ease-out; }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer-x { position: absolute; top: 16px; right: calc(100% + 16px); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; background: var(--db-ffffff, #fff); }
@media (max-width: 559px) { .drawer-x { right: 16px; z-index: 2; } }
.drawer-head { padding: 24px 32px 8px; }
.drawer-head h2 { margin: 0; font: 600 28px/36px var(--font); }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 32px; }
.drawer-foot { display: flex; gap: 12px; padding: 16px 32px 24px; border-top: 1px solid var(--line); }
.drawer-foot .tbtn { flex: 1; }
.acc { border-bottom: 1px solid var(--line); }
.acc-head { width: 100%; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 8px; border: 0; background: none; font: 500 17px/24px var(--font); color: var(--ink); cursor: pointer; border-radius: 8px; }
.acc-head:hover { background: var(--t-soft, var(--db-f9f9f9-h, #f9f9f9)); }
.acc-head > svg, .acc-head > span[data-icon] svg { width: 20px; height: 20px; }
.acc-head .chev { margin-left: auto; transition: transform .15s; }
.acc-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Chosen options of the section: purple count and its own "Borrar" (Fresha). */
.acc-n { min-width: 20px; height: 20px; padding: 0 6px; margin-left: -6px; border-radius: 999px; background: rgb(105, 80, 243); color: #fff; font: 600 13px/16px var(--font); display: inline-flex; align-items: center; justify-content: center; }
.acc-clear { margin-left: auto; font: 500 15px/20px var(--font); color: var(--ink); }
.acc-clear:hover { text-decoration: underline; }
.acc-clear:not([hidden]) + .chev { margin-left: 0; }
.acc-n[hidden], .acc-clear[hidden] { display: none; }
.acc-body { padding: 4px 8px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.acc-body[hidden] { display: none; }
.opt-row { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 36px; padding: 0; border: 0; background: none; font: 400 16px/22px var(--font); color: var(--ink); cursor: pointer; text-align: left; }
.opt-row svg { width: 20px; height: 20px; }
.loc-opt { display: flex; align-items: center; gap: 12px; }
.loc-pic { width: 40px; height: 40px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); font-weight: 700; }
.loc-opt small { display: block; color: var(--df-767676, rgb(118, 118, 118)); font-size: 13px; line-height: 18px; }

/* Cambiar orden (full screen) */
.team-dialog.fullscreen { max-width: none; width: 100vw; height: 100dvh; max-height: none; border-radius: 0; padding: 0; }
.team-backdrop:has(.fullscreen) { padding: 0; }
.reorder-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 16px; height: 80px; padding: 0 32px; background: var(--db-ffffff, #fff); border-bottom: 1px solid var(--line); }
.reorder-head h2 { flex: 1; text-align: center; font-size: 17px; line-height: 24px; padding: 0; }
.reorder-body { max-width: 640px; margin: 0 auto; padding: 40px 16px 64px; }
.reorder-body h3 { margin: 0; font: 600 28px/36px var(--font); }
.ro-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ro-item { display: flex; align-items: center; gap: 16px; height: 72px; padding: 0 20px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; background: var(--db-ffffff, #fff); cursor: grab; }
.ro-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ro-item.is-dragging { opacity: .5; }

/* ---------- Añadir / Editar miembro (full page, no frame) ---------- */
.mf { min-height: 100dvh; background: var(--db-ffffff, #fff); }
.mf-top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 8px; height: 72px; padding: 0 32px; background: var(--db-ffffff, #fff); }
.mf-wrap { width: min(1184px, 100% - 64px); margin: 0 auto; padding: 36px 0 96px; }
.mf-title { margin: 0 0 32px; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.mf-cols { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 96px; align-items: start; }
.mf-nav { position: sticky; top: 108px; padding: 24px 16px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 16px; }
.mf-nav h3 { margin: 0 0 8px; padding: 0 16px; font: 600 17px/24px var(--font); }
.mf-nav hr { margin: 16px 16px 24px; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.mf-nav a { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; border-radius: 8px; font-size: 15px; color: var(--ink); text-decoration: none; }
.mf-nav a:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.mf-nav a.is-active { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.mf-sec h2 { margin: 0; font: 600 22px/28px var(--font); }
.mf-sec .lead { margin: 4px 0 0; font-size: 15px; line-height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.mf-sec .lead a, .mf-sec .more { color: var(--accent); text-decoration: none; }
.mf-sec h2 + .lead + * { margin-top: 24px; }
.mf-sub { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.mf-avatar { position: relative; width: 190px; height: 190px; margin: 24px 0 22px; border-radius: 999px; display: grid; place-items: center; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); font: 600 64px/1 var(--font); }
.mf-avatar svg { width: 72px; height: 72px; stroke-width: 1.4; }
.mf-avatar .edit { position: absolute; right: 8px; bottom: 16px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 999px; background: var(--db-ffffff, #fff); color: var(--ink); }
.mf-avatar .edit svg { width: 16px; height: 16px; stroke-width: 1.75; }
.mf-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mf-head-row h2 { display: flex; align-items: center; gap: 8px; }
.mf-list { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.mf-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; }
.mf-item strong { display: block; font-weight: 600; }
.mf-item small { display: block; color: var(--df-767676, rgb(118, 118, 118)); font-size: 14px; }
.mf-adv { margin-top: 12px; }
.mf-adv-btn { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--db-f2f2f2, #f2f2f2); font: 500 14px/20px var(--font); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.mf-adv-btn svg { width: 16px; height: 16px; }
.mf-adv-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mf-adv-body { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.mf-divider { margin: 40px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.mf-card { margin-top: 16px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; }
.mf-card > div { flex: 1; }
.mf-card small { display: block; color: var(--df-767676, rgb(118, 118, 118)); font-size: 14px; }
.mf-info { margin-top: 16px; padding: 16px; display: flex; gap: 12px; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); font-size: 14px; line-height: 20px; }
.mf-info svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.mf-empty { margin-top: 24px; padding: 32px; border: 1px dashed var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 12px; text-align: center; color: var(--df-767676, rgb(118, 118, 118)); font-size: 15px; }
.mf-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.mf-sel-w { max-width: 320px; }
@media (max-width: 899px) {
  .mf-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mf-nav { position: static; }
  .mf-title { font-size: 28px; line-height: 36px; }
  .mf-top { padding: 0 16px; height: 64px; }
  .mf-wrap { width: calc(100% - 32px); padding: 0 0 96px; }
}

/* ---------- Turnos programados ---------- */
.team-page.wide { padding: 32px 32px 64px; }
.sh-toolbar { margin-top: 32px; }
.pill-grp { display: inline-flex; }
.pill-grp .tbtn { border-radius: 0; margin-left: -1px; }
.pill-grp .tbtn:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
.pill-grp .tbtn:last-child { border-radius: 0 999px 999px 0; }
.pill-grp .tbtn.ico { width: 40px; padding: 0; }
.sh-scroll { margin-top: 0; overflow-x: auto; }
.sh-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.sh-table th { height: 56px; padding: 0 4px; font-weight: 400; text-align: center; vertical-align: middle; }
.sh-table th.c-member { width: 300px; min-width: 300px; text-align: center; font: 600 15px/20px var(--font); }
.sh-table th .d1 { display: block; font: 600 15px/20px var(--font); }
.sh-table th .d2 { display: block; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sh-table td { width: 150px; min-width: 150px; padding: 4px; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); vertical-align: top; }
.sh-table tbody tr:first-child td { border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sh-table td.c-member { width: 300px; min-width: 300px; padding: 1px 16px; border-left: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); vertical-align: middle; }
.sh-table tbody tr:first-child td.c-member { border-top-left-radius: 12px; }
.sh-table tbody tr:first-child td:last-child { border-top-right-radius: 12px; }
.sh-table tbody tr:last-child td.c-member { border-bottom-left-radius: 12px; }
.sh-table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.sh-member { display: flex; align-items: center; gap: 12px; min-height: 76px; }
.sh-member .who-name { flex: 1; }
.sh-member .pen { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; }
.sh-member .pen:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, 0.06)); }
.sh-member .pen svg { width: 18px; height: 18px; }
.sh-cell { display: flex; flex-direction: column; gap: 4px; }
.chip { width: 100%; height: 40px; padding: 12px 16px; border: 0; border-radius: 8px; background: var(--db-f0f0ff, rgb(240, 240, 255)); font: 400 13px/16px var(--font); color: var(--ink); cursor: pointer; white-space: nowrap; }
.chip:hover { background: var(--db-e3e3ff-h, rgb(227, 227, 255)); }
.chip.off { padding: 12px 8px; background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-767676, rgb(118, 118, 118)); font-size: 12px; }
.chip.off:hover { background: var(--db-e9e9e9-h, #e9e9e9); }
.sh-foot { margin-top: 24px; font-size: 15px; line-height: 22px; color: var(--df-767676, rgb(118, 118, 118)); }
.sh-foot a, .sh-foot button { color: var(--accent); text-decoration: none; }
.day-rows { display: flex; flex-direction: column; gap: 12px; }
.day-row { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 12px; align-items: end; }
.day-row .icon-btn svg { width: 20px; height: 20px; }
.day-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; color: var(--df-767676, rgb(118, 118, 118)); font-size: 14px; }
.d-foot.split { justify-content: space-between; }
.round-danger { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #f1b5c0; border-radius: 999px; background: var(--db-ffffff, #fff); color: var(--danger); }
.round-danger svg { width: 20px; height: 20px; }
/* Establecer turnos recurrentes */
.rs-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 32px; }
.rs-card { padding: 24px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; }
.rs-card + .rs-card { margin-top: 16px; }
.rs-loc { display: flex; gap: 12px; align-items: center; }
.rs-loc small { display: block; color: var(--df-767676, rgb(118, 118, 118)); font-size: 14px; }
.rs-info { margin-top: 16px; padding: 16px; display: flex; gap: 12px; border-radius: 12px; background: var(--db-f2f2f2, rgb(242, 242, 242)); font-size: 14px; line-height: 20px; }
.rs-info svg { width: 20px; height: 20px; flex: none; }
.rs-week h2 { margin: 0; font: 600 20px/28px var(--font); }
.rs-week .tot { color: var(--df-767676, rgb(118, 118, 118)); font-size: 14px; }
.rs-day { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.rs-day-name { display: flex; gap: 12px; align-items: flex-start; }
.rs-day-name small { display: block; color: var(--df-767676, rgb(118, 118, 118)); font-size: 13px; }
.rs-shifts { display: flex; flex-direction: column; gap: 8px; }
.rs-shift { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 36px 36px; gap: 12px; align-items: center; }
.rs-shift .icon-btn { width: 36px; height: 36px; }
.rs-shift .icon-btn svg { width: 20px; height: 20px; }
.rs-shift .icon-btn.del { color: var(--danger); }
.rs-off { padding-top: 2px; color: var(--df-767676, rgb(118, 118, 118)); font-size: 15px; }
@media (max-width: 899px) { .rs-cols { grid-template-columns: 1fr; } .rs-day { grid-template-columns: 1fr; } }

/* ---------- Fichajes digitales ---------- */
.page-lead { margin: 0; font: 400 17px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.tbtn.ico { width: 36px; padding: 0; }
.tbtn.lg { font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.ts-search { width: 256px; }
.ts-empty { margin-top: 24px; padding: 64px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; }
.ts-empty-ico { color: var(--accent); }
.ts-empty-ico svg { width: 56px; height: 56px; stroke-width: 1.4; }
.ts-empty h2, .ts-none h3 { margin: 16px 0 0; font: 600 20px/28px var(--font); }
.ts-empty p, .ts-none p { margin: 4px 0 0; max-width: 512px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ts-empty .tbtn { margin-top: 24px; }
.ts-sort-menu .menu-item [data-icon] svg { color: var(--accent); }
/* Seleccionar miembro del equipo */
.ts-drawer { padding: 0; }
.ts-step { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.ts-body { flex: 1; min-height: 0; overflow-y: auto; padding: 32px; }
.ts-drawer h2 { margin: 0; font: 600 28px/36px var(--font); }
.ts-find { margin-top: 36px; display: flex; align-items: center; height: 48px; border: 1px solid var(--de-bfbfbf, rgb(191, 191, 191)); border-radius: 8px; }
.ts-find svg { width: 20px; height: 20px; margin-left: 16px; flex: none; }
.ts-find input { flex: 1; min-width: 0; height: 46px; padding: 0 16px 0 12px; border: 0; background: none; font: 400 15px/20px var(--font); outline: none; }
.ts-find:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ts-none { margin-top: 96px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ts-none .tbtn { margin-top: 16px; }
.ts-pick-h { margin: 32px 0 0; font: 600 17px/24px var(--font); }
.ts-pick { margin-top: 3px; display: flex; flex-direction: column; }
.ts-pick-row { display: flex; align-items: center; gap: 12px; height: 81px; padding: 0; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; }
.ts-pick-row:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
/* «Seleccionar miembro del equipo», as Fresha (6 Nov): side panel on a computer, a centred box on a
   tablet, a full page with a top bar on a phone. Only this step: the next ones keep the panel. */
@keyframes ts-pick-in { from { transform: translate(-50%, calc(-50% + 120px)); opacity: 0; } }
@media (min-width: 560px) and (max-width: 1023px) {
  .drawer.ts-drawer:not(.ts-detail) { top: 50%; left: 50%; right: auto; bottom: auto; width: 512px; height: 653px; max-height: 100%; border-radius: 24px; overflow: hidden; padding-top: 72px; transform: translate(-50%, -50%); animation: ts-pick-in .2s ease-out; }
  .drawer.ts-drawer:has(#add-q) { height: 601px; }
  .ts-drawer:has(#add-q)::before { content: ""; position: absolute; inset: 0 0 auto; height: 72px; border-bottom: 1px solid var(--de-ebebeb, rgb(235, 235, 235)); }
  .ts-drawer:not(.ts-detail) .drawer-x { top: 12px; right: 24px; z-index: 2; }
  .ts-drawer:not(.ts-detail) .ts-body { padding: 8px 48px 16px; }
  .ts-drawer:has(#add-q) .ts-body { padding-top: 32px; }
  .ts-drawer:not(.ts-detail) .ts-sub { display: none; }
}
@media (max-width: 559px) {
  .drawer.ts-drawer:not(.ts-detail) { padding-top: 59px; }
  .ts-drawer:not(.ts-detail)::before { content: ""; position: absolute; inset: 0 0 auto; height: 59px; box-shadow: 0 1px 4px rgba(0, 0, 0, .1); z-index: 1; }
  .ts-drawer:not(.ts-detail) .drawer-x { top: 6px; right: 12px; }
  .ts-drawer:not(.ts-detail) .ts-body { padding: 16px 20px; }
}
/* Rango de fechas */
.ts-range { position: fixed; z-index: 30; width: 658px; max-width: calc(100vw - 16px); padding: 0; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: 0 2px 8px rgba(19, 19, 19, .08), 0 8px 24px rgba(19, 19, 19, .08); }
.ts-range-body { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 20px; }
.ts-range .grid2 { gap: 24px; }
.ts-range-foot { margin-top: 20px; padding: 16px 20px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.cal { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cal-nav { position: absolute; top: 0; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.cal-nav:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.cal-nav svg { width: 20px; height: 20px; }
.cal-nav.prev { left: 0; }
.cal-nav.next { right: 0; }
.cal-t { margin: 0; height: 48px; display: flex; align-items: center; justify-content: center; font: 600 17px/24px var(--font); }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 0; }
.cal-g abbr { height: 36px; display: grid; place-items: center; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); text-decoration: none; }
.cal-d { height: 44px; padding: 0; border: 0; background: none; font: 500 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.cal-d span { width: 40px; height: 40px; margin: 0 auto; display: grid; place-items: center; border-radius: 999px; }
.cal-d:hover span { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.cal-d.is-in { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.cal-d.is-from:not(.is-to) { background: linear-gradient(90deg, transparent 50%, var(--db-f0f0ff, rgb(240, 240, 255)) 50%); }
.cal-d.is-to:not(.is-from) { background: linear-gradient(90deg, var(--db-f0f0ff, rgb(240, 240, 255)) 50%, transparent 50%); }
.cal-d.is-edge span { background: var(--accent); color: #fff; }
@media (max-width: 699px) { .cal { grid-template-columns: 1fr; } .cal-m + .cal-m { display: none; } }
/* Filtros */
.team-dialog.ts-filters { max-width: 720px; padding: 48px; }
/* Presentation */
.team-page.ts-page-promo { padding: 0; background: var(--db-f5f5f5, rgb(245, 245, 245)); position: relative; overflow-x: hidden; }
.ts-promo { min-height: 100%; display: grid; grid-template-columns: 521px minmax(0, 404px); justify-content: center; align-items: center; padding: 48px 0; position: relative; }
.ts-promo::before { content: ""; position: absolute; top: -160px; right: -160px; width: 640px; height: 640px; border-radius: 999px; background: radial-gradient(closest-side, rgba(158, 236, 214, .85), rgba(196, 244, 228, .5) 55%, rgba(245, 245, 245, 0)); pointer-events: none; }
.ts-copy { position: relative; padding-left: 12px; }
.ts-promo .eyebrow { margin: 0; font: 500 13px/16px var(--font); letter-spacing: .52px; color: var(--df-1f8900, rgb(31, 137, 0)); text-transform: uppercase; }
.ts-promo h1 { margin: 8px 0 0; font: 700 40px/44px var(--font); letter-spacing: -0.2px; }
.ts-promo .desc { margin: 16px 0 0; font: 400 17px/24px var(--font); letter-spacing: -0.2px; }
.ts-promo ul { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.ts-promo li { display: flex; gap: 12px; align-items: flex-start; }
.ts-promo li svg { width: 20px; height: 20px; flex: none; }
.ts-acts { margin-top: 40px; display: flex; gap: 4px; }
.ts-art { position: relative; height: 560px; }
.ts-art b { font-weight: 600; }
.ts-art small { display: block; color: var(--df-767676, rgb(118, 118, 118)); font-size: 11px; line-height: 14px; }
.ts-sheet { position: absolute; left: 70px; top: 30px; width: 230px; padding: 16px; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), 0 12px 32px rgba(0, 0, 0, .06); font-size: 12px; }
.ts-tag { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--db-d6d6ff, rgb(214, 214, 255)); color: var(--accent); font-size: 10px; font-weight: 600; }
.ts-sheet .t1 { margin: 12px 0 0; font: 600 14px/18px var(--font); }
.ts-sheet .t2 { margin: 0; color: var(--df-767676, rgb(118, 118, 118)); font-size: 11px; }
.ts-person { margin: 14px 0 6px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ts-art-step { display: flex; gap: 8px; padding: 10px 0; border-top: 1px dashed var(--de-e5e5e5, rgb(229, 229, 229)); font-size: 12px; }
.ts-art-step svg { width: 14px; height: 14px; color: var(--df-767676, rgb(118, 118, 118)); }
.ts-member { position: absolute; left: 230px; top: 60px; width: 230px; padding: 16px; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: 0 0 0 6px rgba(255, 255, 255, .6), 0 12px 32px rgba(0, 0, 0, .08); font-size: 12px; }
.ts-member-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; }
.ts-member .star { color: #f5a623; }
.ts-art-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.ts-art-line > div { flex: 1; }
.ts-art-line em { font-style: normal; font-weight: 600; font-size: 11px; }
.ts-art-line .ok, .ts-art-line .ic { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 999px; }
.ts-art-line .ok { background: var(--db-d6f5cf, rgb(214, 245, 207)); color: var(--df-1f8900, rgb(31, 137, 0)); }
.ts-art-line .ic { border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); }
.ts-art-line svg { width: 14px; height: 14px; }
.ts-note { position: absolute; left: 110px; top: 400px; width: 320px; display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 12px; background: var(--db-d6d6ff, rgb(214, 214, 255)); box-shadow: 0 12px 32px rgba(105, 80, 243, .15); }
.ts-note svg { width: 28px; height: 28px; color: rgb(60, 40, 160); }
.ts-note b { font-size: 15px; font-weight: 500; color: var(--df-281e6e, rgb(40, 30, 110)); }
.ts-note strong { font-weight: 700; }
.ts-note small { color: var(--df-3c3278, rgb(60, 50, 120)); }
@media (max-width: 1099px) { .ts-promo { grid-template-columns: minmax(0, 521px); padding: 32px 16px; } .ts-art { display: none; } }

/* ---------- Procesos de pago ---------- */
.pr-tabs { margin-top: 24px; display: flex; gap: 24px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.pr-tab { height: 52px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); cursor: pointer; }
.pr-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.pr-filters { margin-top: 24px; display: flex; gap: 8px; align-items: center; }
.pr-sum { margin-top: 24px; display: grid; grid-template-columns: repeat(4, 152px) minmax(0, 1fr); gap: 16px; }
.pr-card { padding: 24px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
.pr-card p { margin: 0; font: 500 15px/20px var(--font); }
.pr-card strong { display: block; margin-top: 8px; font: 600 24px/32px var(--font); }
.pr-card.pay { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pr-list { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.pr-row { display: grid; grid-template-columns: 240px repeat(5, minmax(0, 1fr)); align-items: center; min-height: 106px; padding: 0 24px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; background: var(--db-ffffff, #fff); }
.pr-who { display: flex; align-items: center; gap: 16px; }
.pr-who .link-btn { font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 2px; }
.pr-who .link-btn svg { width: 14px; height: 14px; }
.pr-col { padding-left: 24px; border-left: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.pr-col p { margin: 0; font-size: 14px; color: var(--df-767676, rgb(118, 118, 118)); }
.pr-col strong { font-weight: 400; font-size: 15px; }
.pr-col.due strong { font-weight: 700; }
/* Onboarding highlight (highlight.js), as Fresha's: purple card, 18px arrow. */
.hl { position: absolute; z-index: 30; display: flex; flex-direction: column; gap: 24px; max-width: calc(100% - 32px); padding: 20px; border-radius: 12px; background: var(--accent); color: #fff; box-shadow: 0 4px 20px rgba(20, 20, 20, .12), 0 2px 8px rgba(20, 20, 20, .08); }
.hl-arrow { position: absolute; top: -8px; width: 18px; height: 18px; border-radius: 2px; background: var(--accent); transform: translateX(-50%) rotate(45deg); }
.hl-title { position: relative; margin: 0; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.hl-foot { display: flex; justify-content: flex-end; }
/* Informes: Fresha's "Novedad" hangs from the card's left edge, rounder, OK on the left. */
.hl.start { border-radius: 20px; }
.hl.start .hl-foot { justify-content: flex-start; }
@media (max-width: 1099px) { .pr-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pr-row { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; } .pr-col { border: 0; padding: 0; } }

/* ---------- Ajustes del workspace › Equipo ---------- */
.team-page.setup-page { padding: 32px 32px 64px; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.setup-wrap { max-width: 1024px; margin: 0 auto; }
/* At 1470 Fresha's column is 1024 px inside the 32 px sides (content 696 px): seen on a new account. */
@media (min-width: 1440px) { .setup-wrap { max-width: 1088px; } }
.setup-crumbs { display: flex; align-items: center; gap: 16px; }
.setup-crumbs .tbtn svg { width: 20px; height: 20px; }
.setup-crumbs .crumb { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); text-decoration: none; }
.setup-crumbs .crumb.is-here { color: var(--ink); }
.setup-crumbs .dot { margin: 0 -8px; color: var(--df-767676, rgb(118, 118, 118)); }
.setup-cols { margin-top: 32px; display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 32px; align-items: start; }
.setup-nav { padding: 24px 16px; border-radius: 12px; background: var(--db-ffffff, #fff); display: flex; flex-direction: column; }
.setup-nav-title { margin: 0 16px 16px; font: 600 20px/28px var(--font); }
.setup-nav-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 12px 16px; border-radius: 8px; font: 500 15px/20px var(--font); color: var(--ink); text-decoration: none; }
.setup-nav-item:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.setup-nav-item.is-active { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.setup-nav-item.ext { color: var(--df-767676, rgb(118, 118, 118)); }
.setup-nav-item.ext svg { width: 20px; height: 20px; }
.setup-nav hr { width: calc(100% - 32px); margin: 8px 16px; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.setup-nav hr.ext { margin: 6px 16px 8px; }
.setup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.setup-head h1 { margin: 0; font: 600 24px/32px var(--font); }
.setup-head > div:first-child { flex: 1; max-width: 600px; }
.setup-head > :last-child:not(:first-child) { margin-left: auto; }
.setup-head p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.setup-head p a { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.setup-head .tbtn svg { width: 20px; height: 20px; }
.setup-card { margin-top: 24px; padding: 40px; border-radius: 12px; background: var(--db-ffffff, #fff); }
.setup-card-head { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.setup-card-head h2 { margin: 0; font: 600 20px/28px var(--font); }
.setup-sum { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.setup-sum li { display: flex; align-items: flex-start; gap: 8px; font: 400 15px/20px var(--font); }
.setup-sum svg { width: 20px; height: 20px; flex: none; }
.setup-sum b { font-weight: 600; }
@media (max-width: 899px) { .setup-head { flex-direction: column; } }
/* Below 1024 px Fresha drops the section's side menu and adds the page to the crumbs. */
.setup-crumbs .crumb-page { display: none; }
@media (max-width: 1023px) {
  .setup-cols { grid-template-columns: 1fr; }
  .setup-nav { display: none; }
  .setup-crumbs .crumb-page { display: inline; }
  .setup-crumbs .crumb.is-here:not(.crumb-page):has(~ .crumb-page) { color: var(--df-767676, rgb(118, 118, 118)); }
}

/* Ajustes del fichaje digital (full-screen form) */
.sf { min-height: 100dvh; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.sf-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; height: 72px; padding: 0 32px; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.sf-top-title { flex: 1; margin: 0; font: 600 20px/28px var(--font); opacity: 0; transition: opacity .15s; }
.sf-top.scrolled .sf-top-title, .mf-top.scrolled .mf-top-title { opacity: 1; }
.mf-top-title { flex: 1; margin: 0; font: 600 20px/28px var(--font); opacity: 0; transition: opacity .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-top, .sf-top { transition: box-shadow .15s; }
.mf-top.scrolled, .sf-top.scrolled { box-shadow: 0 4px 2px -2px rgba(19, 19, 19, .06); }
.sf-wrap { width: min(696px, 100% - 32px); margin: 0 auto; padding: 36px 0 96px; }
.sf-wrap h1 { margin: 0; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.sf-form { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.sf-card { padding: 32px 40px; border-radius: 16px; background: var(--db-ffffff, #fff); }
.sf-card h2 { margin: 0; font: 600 24px/32px var(--font); }
.sf-card h3 { margin: 0; font: 600 17px/24px var(--font); }
.sf-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sf-title { display: flex; align-items: center; gap: 8px; }
.sf-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 500 13px/16px var(--font); color: var(--ink); }
.sf-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)); }
.sf-lead { margin: 0; max-width: 556px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sf-lead a { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.sf-switch { padding-top: 4px; cursor: pointer; }
.switch.fr { width: 48px; height: 24px; background: var(--db-131313-17, rgba(19, 19, 19, .17)); }
.switch.fr:hover { background: var(--db-131313-25-h, rgba(19, 19, 19, .25)); }
.switch.fr::after { top: 3px; left: 3px; width: 26px; height: 18px; }
.switch.fr:checked { background: var(--accent); }
.switch.fr:checked::after { transform: translateX(16px); }
.sf-dist { margin-top: 24px; }
.sf-group { padding-top: 24px; display: flex; flex-direction: column; gap: 24px; }
.sf-check { gap: 12px; }
.sf-check > span > span { display: block; font: 400 15px/20px var(--font); }
.sf-check small { margin-top: 0; font: 400 13px/16px var(--font); }
.sf-info { display: flex; gap: 12px; padding: 16px 20px 16px 12px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); font: 400 15px/20px var(--font); }
.sf-info svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
@media (max-width: 599px) { .sf-card { padding: 24px; } .sf-top { padding: 0 16px; } .sf-wrap h1 { font-size: 28px; line-height: 36px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ts-toolbar .left { gap: 12px; }
.drawer-x svg { width: 20px; height: 20px; }
/* Full-screen forms scroll the whole window (the calendar's base styles lock it). */
html:has(.mf), html:has(.sf), html:has(.mf-page), body:has(.mf), body:has(.sf), body:has(.mf-page) { height: auto; min-height: 100%; overflow: visible auto; }
body:has(.mf), body:has(.sf), body:has(.mf-page) { overflow: visible; }
.sf-lead.wide { max-width: none; }
.sf-check > span { padding: 2px 0; }
.team-page:has(> .t-table) { padding-bottom: 134px; }

/* Fichaje digital de <nombre> */
.t-avatar.lg { width: 64px; height: 64px; font-size: 20px; line-height: 28px; box-shadow: none; border: 1px solid var(--de-ffffff, #fff); }
.ts-pick-row .who-name { font: 600 15px/20px var(--font); }
.ts-sub { margin: 8px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); white-space: pre; }
.ts-fields { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.ts-date { text-align: left; color: var(--ink); }
.ts .is-bad, .ts.is-bad { border-color: var(--de-d4163a, rgb(212, 22, 58)); }
.ts-fields .err { margin: 4px 0 0; font: 400 13px/16px var(--font); color: var(--df-d4163a, rgb(212, 22, 58)); }
.ts-fields .tf { gap: 4px; }
.ts-fields .tf > label { margin-bottom: 0; }
.ts-break-h { margin: 0; display: flex; align-items: center; gap: 4px; font: 400 15px/20px var(--font); white-space: nowrap; overflow: hidden; }
.ts-break-h b { font-weight: 600; }
.ts-break-h .g { color: var(--df-767676, rgb(118, 118, 118)); white-space: pre; }
.ts-break-row { margin-top: 4px; display: grid; grid-template-columns: 146px 1fr 146px 48px; align-items: center; gap: 8px; }
.ts-break-row .a { text-align: center; font: 400 15px/20px var(--font); }
.ts-break-row .ts { padding-right: 36px; background-position: right 12px center; }
.ts-dots { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; font-size: 20px; line-height: 1; }
.ts-dots:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
.ts-hr { margin: 24px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.ts-tot { display: flex; justify-content: space-between; gap: 16px; font: 400 15px/20px var(--font); }
.ts-tot + .ts-tot { margin-top: 12px; }
.ts-tot p { margin: 0; }
.ts-tot.strong { font: 600 17px/24px var(--font); }
.ts-foot { display: flex; gap: 8px; padding: 16px 32px 32px; }
.ts-foot .tbtn { flex: 1; }
.ts-back { position: absolute; top: 24px; left: 24px; width: 36px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; cursor: pointer; z-index: 1; }
.ts-back svg { width: 20px; height: 20px; }
.ts-back + .ts-body { padding-top: 76px; }
.ts-types { margin-top: 24px; margin-left: -16px; margin-right: -16px; display: flex; flex-direction: column; }
.ts-type { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; }
.ts-type:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.ts-type .emo { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--db-131313-5, rgba(19, 19, 19, .05)); font-size: 24px; line-height: 24px; }
.ts-type b { display: block; font: 600 17px/24px var(--font); }
.ts-type small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ts-datepop { position: fixed; z-index: 60; padding: 16px; }
.cal-one { position: relative; }
.cal-d:disabled { color: var(--df-bfbfbf, rgb(191, 191, 191)); cursor: default; }
.cal-d:disabled:hover span { background: none; }
.ts-table td { height: 72px; }
.popover.team-menu { z-index: 70; }

/* Fichajes digitales: list with records */
.ts-table { margin-top: 0; }
.ts-table th { height: 73px; padding: 0 16px; vertical-align: middle; }
.ts-table th.c-who { width: 287px; } .ts-table th.c-date { width: 143px; } .ts-table th.c-in { width: 164px; }
.ts-table th.c-br { width: 123px; } .ts-table th.c-hours { width: 164px; } .ts-table th.c-state { width: 143px; }
.ts-table td { height: 80px; padding: 1px 16px; font: 400 15px/20px var(--font); cursor: pointer; }
.ts-table td b { font-weight: 600; }
.ts-th { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: 600 15px/20px var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.ts-sort-ico svg { width: 16px; height: 16px; stroke-width: 2.2; }
.t-avatar.ts-av { width: 56px; height: 56px; font-size: 20px; line-height: 28px; box-shadow: none; border: 1px solid var(--de-ffffff, #fff); }
.t-avatar.ts-av.lav { width: 64px; height: 64px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); border-color: var(--de-f0f0ff, rgb(240, 240, 255)); }
.ts-who-name { margin: 0; font: 500 15px/20px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-who-loc { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-badge.lav { background: var(--db-f0f0ff, rgb(240, 240, 255)); box-shadow: inset 0 0 0 1px var(--ds-dbddff, rgb(219, 221, 255)); color: var(--accent); }
.tbtn.danger { background: rgb(212, 22, 58); border-color: var(--de-d4163a, rgb(212, 22, 58)); color: #fff; }
.tbtn.danger:hover { background: rgb(186, 16, 48); }
/* Detail drawer */
.drawer.ts-detail { width: 612px; }
.drawer.ts-detail.ts-wide .ts-detail-cols { display: block; }
.ts-detail-cols { flex: 1; min-height: 0; display: flex; }
.ts-detail-cols .ts-body { flex: 1; }
.ts-rail { width: 131px; flex: none; padding: 20px 8px; display: flex; flex-direction: column; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.ts-rail-tab { width: 115px; height: 75px; padding: 12px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; border: 0; border-radius: 8px; background: none; font: 500 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); cursor: pointer; position: relative; }
.ts-rail-tab svg { width: 24px; height: 24px; color: var(--ink); }
.ts-rail-tab:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.ts-rail-tab.is-active { color: var(--accent); }
.ts-rail-tab.is-active svg { color: var(--accent); }
.ts-rail-tab.is-active::before { content: ""; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent); }
.ts-dhead { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ts-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 12px; border-radius: 999px; font: 500 15px/20px var(--font); color: #fff; }
.ts-chip.on { background: rgb(31, 137, 0); }
.ts-chip.lav { background: var(--accent); }
.ts-chip svg { width: 20px; height: 20px; }
.ts-dacts { display: flex; align-items: center; gap: 8px; }
.ts-dtitle { margin-top: 24px !important; }
.ts-dmember { margin-top: 36px; display: flex; align-items: center; gap: 16px; }
.ts-dmember .n { margin: 0; font: 500 17px/24px var(--font); }
.ts-dmember .l { margin: 2px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ts-line { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 32px; position: relative; }
.ts-line::before { content: ""; position: absolute; left: 11px; top: 28px; bottom: 28px; border-left: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); }
.ts-line li { display: flex; align-items: flex-start; gap: 8px; position: relative; }
.ts-line .ic { width: 24px; height: 24px; flex: none; display: grid; place-items: center; background: var(--db-ffffff, #fff); color: var(--accent); }
.ts-line .ic svg { width: 20px; height: 20px; }
.ts-line .ic.emo { font-size: 20px; color: inherit; }
.ts-line li > div { flex: 1; }
.ts-line b { display: block; font: 500 17px/24px var(--font); }
.ts-line small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ts-line em { font-style: normal; font: 500 17px/24px var(--font); text-align: right; }
.ts-line li.muted b { color: var(--ink); }
.ts-line li.muted .ic { color: var(--df-acacac, rgb(172, 172, 172)); }
.ts-line li.addb { padding-left: 32px; }
.ts-line li.addb::before { display: none; }
/* Actividad */
.ts-atitle { margin-top: 0; }
.ts-log { list-style: none; margin: 40px 0 0; padding: 0 0 0 24px; display: flex; flex-direction: column; gap: 24px; position: relative; }
.ts-log::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; border-left: 1px dashed var(--de-d3d3d3, rgb(211, 211, 211)); }
.ts-log li { position: relative; }
.ts-log li::before { content: ""; position: absolute; left: -21px; top: 22px; width: 8px; height: 8px; border-radius: 999px; background: var(--db-d3d3d3, rgb(211, 211, 211)); }
.ts-log-card { position: relative; padding: 16px 20px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; }
.ts-log-card .pen { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 999px; }
.ts-log-card .pen svg { width: 18px; height: 18px; }
.ts-log-card p { margin: 0; font: 400 15px/20px var(--font); }
.ts-log-card .t { font: 600 17px/24px var(--font); padding-right: 48px; }
.ts-log-card .w { color: var(--df-767676, rgb(118, 118, 118)); }
.ts-log-card .b { margin-top: 14px; }
.ts-log-card .g { margin-top: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.ts-log-card .g + .g { margin-top: 20px; }
/* Edit view */
.ts-backrow { padding: 24px 32px 0; }
.ts-backrow .tbtn svg { width: 20px; height: 20px; }
.ts-body.has-back { padding-top: 24px; }
.ts-back + .ts-body.has-back { padding-top: 76px; }
.ts-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tbtn.dark:disabled { background: var(--db-bfbfbf, rgb(191, 191, 191)); border-color: var(--de-bfbfbf, rgb(191, 191, 191)); opacity: 1; }
/* Dialogs */
.team-dialog.ts-dlg { max-width: 512px; padding: 48px 48px 32px; }
.ts-dlg-title { font: 600 28px/36px var(--font) !important; padding-right: 32px; }
.ts-dlg-text { margin: 8px 0 0; font: 400 15px/20px var(--font); color: var(--ink); }
.ts-dlg-info { margin-top: 24px; display: flex; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); font: 400 15px/20px var(--font); }
.ts-dlg-info svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.ts-dlg .d-foot { margin-top: 48px; gap: 8px; }
@media (max-width: 899px) { .ts-table th.c-br, .ts-table td:nth-child(4), .ts-table th.c-state, .ts-table td:nth-child(6) { display: none; } .drawer.ts-detail { width: 100%; } .ts-rail { display: none; } }
.ts-line { align-items: stretch; }
.ts-line li { width: 100%; }
.ts-chip span[data-icon] { display: inline-grid; width: 20px; height: 20px; }
.ts-body h2#dr-title, .ts-body > h2 { margin: 0; font: 600 28px/36px var(--font); }
.ts-dots { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.ts-dots svg { width: 24px; height: 24px; }
.ts-dhead { height: 36px; margin-top: 8px; }
.ts-dhead .ts-dots { margin-right: -6px; }
.ts-detail .ts-dtitle + .ts-sub { margin-top: 4px; }
.ts-detail .ts-line + .ts-hr { margin: 32px 0 24px; }
.ts-detail .ts-dtitle { margin-top: 24px !important; }
.ts-table .who { gap: 12px; }
/* "Color del calendario", as in Fresha: 8 per row across half the form, 32px circles */
.mf-colors { width: min(388px, 100%); display: grid; grid-template-columns: repeat(8, 35px); justify-content: space-between; row-gap: 16px; padding-top: 8px; }
.mf-color { position: relative; width: 35px; height: 32px; cursor: pointer; }
.mf-color input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf-color span { display: block; width: 32px; height: 32px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 999px; }
.mf-color input:checked + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.mf-color input:focus-visible + span { box-shadow: 0 0 0 2px var(--ds-ffffff, #fff), 0 0 0 4px rgba(105, 80, 243, .4); }
.mf-half { width: min(388px, 100%); }
.mf-half .help { margin-top: 0; }
/* Fresha's form rhythm: label 4px above its field, rows 24px apart, columns 16px apart */
.tf { gap: 4px; }
.grid2 { gap: 24px 16px; }
.phone .ts { width: 105px; }
.mf-sec h2 { font: 600 24px/32px var(--font); }
.mf-daterow { display: grid; grid-template-columns: minmax(0, 1fr) 119px; gap: 16px; }
.mf-date .ts { text-align: left; color: var(--ink); }
.mf-date .ts.placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.grid2 .mf-notes { margin-top: 0; }
.mf-datepop { padding: 16px; }
/* "Archivar miembro del equipo" (Fresha: 512 wide, 720 with appointments to reassign) */
.team-dialog.arch-dlg { max-width: 512px; padding: 30px 48px 32px; }
.team-dialog.arch-dlg.arch-wide { max-width: 720px; }
.team-dialog.arch-dlg .d-close { top: 20px; right: 20px; }
.arch-text { margin: 32px 0 0; font: 400 15px/20px var(--font); color: var(--ink); }
.arch-link { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.arch-field { margin-top: 24px; }
.team-dialog .d-foot.arch-foot { margin-top: 48px; }
.arch-dlg.arch-wide .d-foot.arch-foot { margin-top: 32px; }
/* Invitation state under the name (Fresha: 16px icon, 4px gap) */
.who-sub.inv-pending, .who-sub.inv-expired { gap: 4px; }
/* Fresha paints the clock in the same orange as the text. */
.who-sub.inv-pending { color: var(--df-b7570b, rgb(183, 87, 11)); }
.who-sub.inv-pending > span:last-child { color: var(--df-b7570b, rgb(183, 87, 11)); }
.who-sub [data-icon] svg { width: 16px; height: 16px; }
/* "Cambiar orden", as in Fresha: 960 wide, 90px cards, 6-dot drag handle */
.reorder-head { position: absolute; left: 0; right: 0; top: 0; height: 72px; padding: 0 32px; gap: 24px; border-bottom: 0; background: none; }
.reorder-head h2 { text-align: left; font: 600 20px/28px var(--font) !important; opacity: 0; }
.reorder-body { max-width: 992px; padding: 58px 16px 64px; }
.reorder-body h3 { font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.reorder-body .d-sub { margin: 12px 0 0; font-size: 17px; line-height: 24px; color: var(--df-767676, rgb(118, 118, 118)); }
.ro-list { margin-top: 32px; gap: 16px; }
.ro-item { height: 90px; padding: 16px 24px; gap: 0; border-color: var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; }
.ro-grip { width: 32px; flex: none; display: flex; padding-right: 16px; color: var(--ink); }
.ro-grip svg { width: 16px; height: 16px; }
.ro-item .t-avatar { margin-right: 12px; }
.ro-item .who-name { font: 600 15px/20px var(--font); }
.reorder-head .icon-btn { width: 48px; height: 48px; }
/* Dragging (sortable.js) */
.ro-item { position: relative; touch-action: none; user-select: none; }
.ro-item.is-dragging { z-index: 2; opacity: 1; cursor: grabbing; }
body.is-sorting, body.is-sorting * { cursor: grabbing !important; }
/* Narrower than 1024px, as in Fresha: plain rows with a grey line */
@media (max-width: 1023px) {
  .reorder-body { padding: 108px 32px 64px; max-width: none; }
  .ro-list { gap: 1px; }
  .ro-item { height: 88px; padding: 16px 0; border: 0; border-radius: 0; }
  .ro-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--db-e5e5e5, rgb(229, 229, 229)); }
}
.team-menu .menu-sep + .menu-heading { margin-top: 16px; }
.team-menu .menu-sep { margin: 8px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
/* A count at the end of a menu row (Fresha: 20 high pill, 13/16 600 purple on lavender). */
.team-menu .menu-item > span:first-child:not([data-icon]) { flex: 1; }
.menu-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); font: 600 13px/16px var(--font); }
/* Button loader (shell.js busy()), as in Fresha: label hidden, three 8px dots, "beat" 0.8s */
.tbtn, .is-busy { position: relative; }
.is-busy { pointer-events: none; color: transparent !important; }
.is-busy > :not(.btn-loader) { visibility: hidden; }
.btn-loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 6px; }
.btn-loader span { width: 8px; height: 8px; border-radius: 999px; background: var(--busy-ink, currentColor); opacity: 0; animation: btn-beat .8s ease-in-out infinite; }
.btn-loader span:nth-child(2) { animation-delay: .15s; }
.btn-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes btn-beat { 0% { opacity: 0; } 45% { opacity: 1; } 90%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .btn-loader span { animation-duration: 1.6s; } }
.tbtn.lg i svg, .tbtn.lg > span[data-icon] svg { width: 24px; height: 24px; }
/* Fresha, 768 to 1023 px: the page's head buttons are the small ones (36 high, 15/20 500, 20 px icons, 16 px sides);
   from 1024 they are 48 with 17/24 600. Measured 7 Nov 2026 in Clientes and Catálogo. */
@media (min-width: 768px) and (max-width: 1023px) {
  :is(.page-actions, .page-head .acts, .mk-head .acts, .sl-head .acts) > .tbtn.lg { height: 36px; padding: 0 15px; gap: 5px; font: 500 15px/20px var(--font); letter-spacing: -0.1px; }
  :is(.page-actions, .page-head .acts, .mk-head .acts, .sl-head .acts) > .tbtn.lg :is(i, span[data-icon]) svg { width: 20px; height: 20px; }
}
.page-actions { gap: 12px; }

/* "Añadir dirección" / "Editar la dirección" (Fresha: 720 wide, a 48px header
   row, suggestions while typing, the chosen address split in a card). */
.team-dialog.addr-dlg { max-width: 720px; padding: 20px 48px 32px; }
.addr-head { display: flex; align-items: center; gap: 4px; height: 48px; margin: 0 -12px; }
.addr-head .icon-btn { width: 48px; height: 48px; flex: none; }
.team-dialog .addr-head h2 { flex: 1; padding: 0 0 0 12px; font: 600 20px/28px var(--font); }
.addr-head #a-back + h2 { padding-left: 0; }
.addr-dlg .d-body { margin-top: 22px; gap: 24px; }
.addr-dlg .addr-body { min-height: 368px; }
.addr-dlg .d-foot { margin-top: 32px; }
.addr-dlg .d-foot.full .tbtn { flex: 1; }
.addr-foot .tbtn { flex: 1; }
.addr-foot .tbtn.icon { flex: none; width: 48px; padding: 0; justify-content: center; }
.addr-dlg select:disabled { background-color: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-808080, rgb(128, 128, 128)); border-color: rgba(118, 118, 118, .3); }
.addr-combo { position: relative; }
.addr-combo .t-search { width: 100%; height: 48px; border-radius: 8px; }
.addr-combo .t-search:has(input[aria-invalid="true"]) { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.addr-sug { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 5; max-height: 457px; overflow-y: auto; margin: 0; padding: 8px; list-style: none;
  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); }
.addr-sug li { height: 40px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.addr-sug li span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 15px/20px var(--font); color: var(--ink); }
.addr-sug li:hover, .addr-sug li[aria-selected="true"] { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.addr-card { position: relative; padding: 20px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; }
.addr-card.lg { padding: 24px; }
.addr-card p { margin: 0; padding-right: 64px; font: 400 15px/20px var(--font); color: var(--ink); }
.addr-card .addr-name { font-weight: 600; }
.addr-edit { position: absolute; top: 12px; right: 20px; padding: 0; border: 0; background: none; font: 500 17px/24px var(--font); color: var(--df-6950f3, rgb(105, 80, 243)); cursor: pointer; }
.addr-card.lg .addr-edit { top: 16px; right: 24px; }
.addr-dlg .d-foot .tbtn { font: 600 17px/24px var(--font); }
.addr-combo .t-search svg { margin-left: 16px; color: var(--df-767676, rgb(118, 118, 118)); }
.addr-combo .t-search input { height: 46px; padding: 0 16px; }
@media (max-width: 599px) { .team-dialog.addr-dlg { padding: 16px 24px 24px; } }

/* "Trabaja en" (Fresha): one location is a plain card; several get checkboxes,
   "Todos los centros" and a ⋮ menu to choose the "Principal". */
#loc-list { margin-top: 12px; }
.loc-row { display: flex; align-items: center; gap: 16px; padding: 24px 24px 24px 0; cursor: pointer; position: relative; }
.loc-row.solo { padding: 12px 0 0; cursor: default; }
.loc-row:not(.solo):hover, .loc-all:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.loc-row .loc-pic { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--de-f0f0ff, rgb(240, 240, 255)); }
.loc-row .loc-pic svg { width: 32px; height: 32px; }
.loc-text { flex: 1; min-width: 0; }
.loc-text strong { display: block; font: 600 17px/24px var(--font); color: var(--ink); }
.loc-text small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sf-badge.lav { flex: none; }
.loc-more { width: 48px; height: 48px; margin: -12px -12px -12px 0; flex: none; }
.loc-rows .loc-row + .loc-row::before { content: ""; position: absolute; top: 0; left: 40px; right: 0; border-top: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); }
.loc-all { display: flex; align-items: center; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); cursor: pointer; font: 600 17px/24px var(--font); }
.loc-all .badge.num { margin-left: -8px; height: 20px; min-width: 20px; padding: 0 6px; font: 600 13px/16px var(--font); }
.t-check:indeterminate { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8h9' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat; }
.loc-err { margin: 4px 0 0; font: 400 13px/16px var(--font); color: var(--danger); }
.team-menu.loc-menu { width: 320px; }
.team-menu .menu-item:has(.menu-text) { height: auto; white-space: normal; align-items: flex-start; }
.menu-text { display: flex; flex-direction: column; }
.menu-text small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }

/* "Rol de permisos" picker (Fresha): as wide as its longest line, 52px rows
   with the description below, a tick on the current role. */
.ts-btn { text-align: left; }
.team-menu.role-menu { width: max-content; max-width: calc(100vw - 16px); max-height: 385px; overflow-y: auto; }
.team-menu.role-menu .menu-item { height: auto; min-height: 52px; white-space: normal; align-items: center; }
.role-menu .menu-text { flex: 1; min-width: 0; }
.role-menu .menu-text > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-check { flex: none; margin-left: 8px; }
.menu-check svg { width: 20px; height: 20px; display: block; }
.team-menu .menu-item.menu-link { min-height: 40px; color: var(--accent); font: 500 17px/24px var(--font); }

/* Grey info box under the member's timesheet settings (Fresha CalloutBanner). */
.ws-callout { display: flex; gap: 8px; margin-top: 24px; padding: 16px 20px 16px 12px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.ws-callout-i { flex: none; width: 24px; height: 24px; color: var(--ink); }
.ws-callout-i svg { width: 24px; height: 24px; display: block; }
.ws-callout > span:last-child { padding: 2px 0; font: 400 15px/20px var(--font); color: var(--ink); }
.ws-callout a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.ws-callout a:hover { color: rgb(84, 64, 194); }
.ws-h3 { margin: 24px 0; font: 600 17px/24px var(--font); }

/* Promo card (Fresha: grey card, text block of 48px padding, then the art). */
.mf-promo { position: relative; overflow: hidden; border-radius: 16px; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.promo-text { position: relative; z-index: 1; padding: 48px; }
.promo-text .badge.lav { height: 28px; padding: 0 16px; font: 500 15px/20px var(--font); box-shadow: inset 0 0 0 1px var(--ds-dbddff, rgb(219, 221, 255)); }
.mf-promo h2 { margin: 28px 0 0; font: 700 40px/44px var(--font); max-width: 554px; }
.promo-lead { margin: 24px 0 0; max-width: 554px; font: 400 17px/24px var(--font); color: var(--ink); }
.mf-promo ul { list-style: none; margin: 24px 0 32px; padding: 0; display: flex; flex-direction: column; gap: 8px; font: 400 15px/20px var(--font); }
.mf-promo li { display: flex; gap: 8px; align-items: center; }
.mf-promo li svg { width: 20px; height: 20px; flex: none; }
.mf-promo .acts { display: flex; gap: 12px; }
.promo-art { position: relative; height: 351px; }
.promo-glow { position: absolute; right: -40px; bottom: -60px; width: 420px; height: 480px; opacity: .7; filter: blur(54px); pointer-events: none;
  background: radial-gradient(closest-side at 60% 45%, #ac65fe, transparent), radial-gradient(closest-side at 40% 75%, #6d51f4, transparent), radial-gradient(closest-side at 80% 85%, #ff6dfd, transparent); }
.phone-mock { position: absolute; top: 18px; width: 268px; height: 420px; padding: 9px; border-radius: 46px; background: var(--db-0d0d0d, #0d0d0d); box-shadow: 0 0 0 2px var(--ds-e5e5e5, #e5e5e5), 0 20px 40px rgba(19, 19, 19, .12); }
.phone-mock.back { left: calc(50% - 244px); }
.phone-mock.front { left: calc(50% - 4px); top: 22px; }
.pm-screen { height: 100%; border-radius: 38px; background: var(--db-ffffff, #fff); padding: 52px 22px 0; overflow: hidden; font-family: var(--font); color: var(--ink); }
.pm-screen.center { display: flex; flex-direction: column; align-items: center; padding-top: 58px; }
.pm-back svg { width: 18px; height: 18px; display: block; }
.pm-title { margin: 22px 0 0; display: flex; align-items: center; gap: 6px; font: 700 17px/22px var(--font); }
.pm-title .badge.num { height: 18px; min-width: 18px; padding: 0 5px; font-size: 10px; }
.pm-search { margin: 14px 0 16px; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--de-d3d3d3, #d3d3d3); border-radius: 999px; font-size: 10px; color: var(--df-a5a5a5, #a5a5a5); }
.pm-search svg { width: 12px; height: 12px; display: block; color: var(--ink); }
.pm-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.pm-row b { display: block; font: 600 11px/14px var(--font); }
.pm-row small { display: block; font-size: 10px; line-height: 13px; color: var(--df-767676, rgb(118, 118, 118)); }
.pm-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); }
.pm-av.big { width: 120px; height: 120px; font-size: 36px; box-shadow: 0 0 0 4px var(--ds-ffffff, #fff), 0 0 0 5px var(--ds-e5e5e5, #e5e5e5); }
.pm-name { margin: 18px 0 0; font: 700 18px/24px var(--font); }
.pm-job { margin: 2px 0 16px; font-size: 12px; color: var(--df-767676, rgb(118, 118, 118)); }
.pm-card { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--de-e5e5e5, #e5e5e5); border-radius: 12px; font-size: 11px; }
.pm-card b { font: 700 13px/16px var(--font); color: var(--accent); }
@media (max-width: 599px) { .promo-text { padding: 32px 24px; } .mf-promo h2 { font-size: 32px; line-height: 40px; } .promo-art { transform: scale(.8); transform-origin: top center; height: 290px; } }

/* "Cambios sin guardar" (Fresha: 512 wide, header 32/48/16, text 17/24, buttons on the right). */
.team-dialog.leave-dlg { max-width: 512px; padding: 0; }
.leave-head { display: flex; align-items: center; gap: 4px; padding: 32px 48px 16px; }
.team-dialog .leave-head h2 { flex: 1; padding: 0; font: 600 20px/28px var(--font); }
.leave-head .icon-btn { width: 48px; height: 48px; margin: -10px -12px -10px 0; flex: none; }
.leave-text { margin: 0; min-height: 128px; padding: 16px 48px 0; font: 400 17px/24px var(--font); color: var(--ink); }
.leave-dlg .d-foot { margin: 0; padding: 16px 48px 32px; gap: 12px; }
.leave-dlg .d-foot .tbtn { font: 600 17px/24px var(--font); }

/* Procesos de pago › Método de pago preferido (Fresha). */
.pay-card { margin-top: 16px; padding: 22px 24px; display: flex; align-items: center; gap: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); }
.pay-card > div { flex: 1; min-width: 0; }
.pay-card strong, .pay-card small { display: block; font: 500 15px/20px var(--font); }
.pay-card small { color: var(--df-767676, rgb(118, 118, 118)); }
.pay-change { padding: 0; border: 0; background: none; font: 500 17px/24px var(--font); color: var(--accent); cursor: pointer; }
.pay-change:hover { color: rgb(84, 64, 194); }
.pay-ico { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 8px; background: var(--db-ffffff, #fff); color: var(--ink); }
.pay-ico svg { width: 28px; height: 28px; display: block; }
.pay-ico.big { width: 64px; height: 64px; }
.pay-ico.big svg { width: 32px; height: 32px; }
.pay-av { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--de-f0f0ff, rgb(240, 240, 255)); background: var(--db-ebf8fe, rgb(235, 248, 254)); color: var(--df-0075a8, rgb(0, 117, 168)); font: 600 20px/1 var(--font); }
.pay-av.big { width: 64px; height: 64px; font-size: 22px; }
.team-dialog.pay-dlg { max-width: 512px; padding: 20px 48px 32px; }
.pm-head { display: flex; justify-content: flex-end; margin-right: -12px; }
.pm-head .icon-btn { width: 48px; height: 48px; }
.team-dialog .pm-title-big { margin-top: 6px; padding: 0; font: 600 28px/36px var(--font); }
.pm-sub { margin: 8px 0 0; font: 400 15px/20px var(--font); color: var(--ink); }
.pay-opts { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.pay-opt { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pay-opt > span:last-child { margin-left: 4px; }
.pay-opt strong { display: block; font: 600 15px/20px var(--font); }
.pay-opt small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pay-opt input { flex: none; width: 24px; height: 24px; margin: 0; appearance: none; -webkit-appearance: none; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 50%; background: var(--db-ffffff, #fff); cursor: pointer; }
.pay-opt input:checked { border: 7px solid var(--accent); }
.pay-dlg .d-foot { margin-top: 16px; padding-top: 16px; gap: 12px; }
.pay-dlg .d-foot .tbtn { font: 600 17px/24px var(--font); }
/* Fresha's tooltip (shell.js data-tip): black, 13/16 500 white, padding 8, radius 8. */
.tip { position: fixed; z-index: 100; max-width: 280px; padding: 8px; border-radius: 8px; background: var(--db-0d0d0d, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); font: 500 13px/16px var(--font); pointer-events: none; white-space: pre-line; }
/* Team photos fill their circle. */
.t-avatar img, .mf-avatar > img, .avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.mf-avatar { overflow: visible; }
.mf-avatar > img { border-radius: 999px; }
/* Email and phone taken from the member's own account (Fresha): grey, with a note under. */
.ti:disabled { background-color: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-acacac, rgb(172, 172, 172)); -webkit-text-fill-color: rgb(172, 172, 172); cursor: default; }
.phone .ts:disabled { background-color: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-acacac, rgb(172, 172, 172)); }
.tf-locked { margin: -4px 0 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }

/* "Ajustes del workspace" (/setup), measured on Fresha at 1440×900. */
.team-page.ws-page { padding: 32px 32px 128px; }
/* The bottom bar only exists on phones (styles.css shows it there). */
.team-app > .bottom-nav { display: none; }
.ws-h1 { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.ws-sub { margin: 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.ws-bar { position: sticky; top: -32px; z-index: 5; padding: 16px 0; background: var(--db-f5f5f5, rgb(245, 245, 245)); box-shadow: rgba(19, 19, 19, .06) 0 4px 2px -2px; }
.ws-pills { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 4px; }
.ws-pill { position: relative; z-index: 1; height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border: 0; border-radius: 999px; background: none; font: 600 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); cursor: pointer; white-space: nowrap; transition: color .2s; }
.ws-pill.on { color: #fff; }
.ws-ind { position: absolute; left: 0; top: 0; height: 36px; border-radius: 999px; background: var(--ink); transition: transform .3s, width .1s; }
.ws-ind.still { transition: none; }
.ws-sec { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.ws-sec + .ws-sec { margin-top: 64px; }
.ws-h2 { margin: 0; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
/* Fresha's 12-column grid: a card spans 6 from 768 px and 4 from 1024 px (of the window). */
.ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px; }
@media (min-width: 1024px) { .ws-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-card { position: relative; padding: 24px; display: flex; flex-direction: column; gap: 16px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); transition: background-color .1s cubic-bezier(0, .55, .45, 1); }
.ws-card-ver { justify-content: space-between; }
@media (hover: hover) and (pointer: fine) { .ws-card:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); } }
.ws-card:active { background: var(--db-ededed-h, rgb(237, 237, 237)); }
.ws-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ws-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ws-ic { display: flex; color: var(--df-6950f3, rgb(105, 80, 243)); }
.ws-ic svg { width: 24px; height: 24px; }
.ws-t { margin: 0 0 4px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.ws-d { margin: 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.ws-ver { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.ws-ver svg { width: 20px; height: 20px; }
.ws-m, .m-back, .m-title { display: none; }
/* Phones (Fresha): back arrow with the title in the top bar, no pills, and each
   section as one white list of rows (chevron for settings, ↗ for the rest). */
@media (max-width: 767px) {
  .m-app { --topbar-h: 56px; }
  .m-app .topbar { padding: 0 20px; gap: 16px; border-bottom: 0; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
  .m-app .brand, .m-app .topbar-actions { display: none; }
  .m-back { display: inline-grid; width: 24px; height: 24px; margin-left: 0; border-radius: 0; }
  .m-back svg { width: 24px; height: 24px; }
  .m-title { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 20px/28px var(--font); letter-spacing: -0.2px; opacity: 0; transition: opacity .15s; }
  .m-title.on { opacity: 1; }
  .team-page.ws-page { padding: 0 20px 24px; }
  .ws-h1 { font-size: 24px; line-height: 32px; }
  .ws-sub { margin-top: 4px; }
  .ws-bar { display: none; }
  .ws-sec { margin-top: 24px; gap: 16px; }
  .ws-sec + .ws-sec { margin-top: 40px; }
  .ws-h2 { font-size: 20px; line-height: 28px; }
  .ws-grid { display: flex; flex-direction: column; gap: 0; padding: 12px 8px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
  .ws-card, .ws-card-ver { height: 48px; padding: 12px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; border-radius: 8px; background: none; box-shadow: none; }
  .ws-card:not(.ws-card-ver) { padding: 8px 12px; gap: 8px; }
  .ws-card:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
  .ws-txt { flex: 1; min-width: 0; }
  .ws-t, .ws-card-ver .ws-t { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
  .ws-d, .ws-ver { display: none; }
  .ws-m { display: flex; flex: none; }
  .ws-ic { color: var(--ink); }
  .ws-m svg { width: 24px; height: 24px; }
  .ws-card-ver .ws-m svg { width: 16px; height: 16px; }
}

/* Fresha's small confirm window ("Eliminar segmento personalizado", "Eliminar centro"): 512 wide, title 28/36, text 15/20, two 204 buttons. */
.team-backdrop:has(.sg-deldlg) { background: var(--db-131313-25, rgba(19, 19, 19, .25)); }
.team-dialog.sg-deldlg { display: flex; flex-direction: column; width: calc(100% - 32px); max-width: 512px; height: auto; padding: 0; overflow: hidden; border-radius: 30.48px; box-shadow: 0 2px 8px rgba(19, 19, 19, .08), 0 4px 20px rgba(19, 19, 19, .12); }
.sg-deldlg .pkp-head { position: relative; flex: none; height: 74px; padding: 30px 96px 16px 48px; }
.sg-deldlg .pkp-small { margin: 0; font: 600 20px/28px var(--font); opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-deldlg .pkp-x { position: absolute; top: 20px; right: 36px; width: 48px; height: 48px; }
.sg-deldlg .pkp-x svg { width: 24px; height: 24px; }
.sg-del { padding: 0 48px; }
.team-dialog .sg-del h2 { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.sg-del p { margin: 16px 0 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.sg-del p.sg-del-n { margin-top: 32px; }
/* «¿Quieres descartar el borrador de la venta?» (Fresha): 512 × 331, 32 between the title and the text. */
.co-dropdlg .sg-del p { margin-top: 32px; }
.sg-del-n strong { font-weight: 700; }
.sg-del-n a { color: var(--accent); text-decoration: none; }
.sg-del-n a:hover { text-decoration: underline; }
.sg-delf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 33px 48px 32px; }
.sg-delf .tbtn { font: 600 17px/24px var(--font); }

/* "Configuración del negocio › Datos del negocio" (Fresha). */
.bd-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.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)); overflow-wrap: anywhere; }
.bd-add { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.bd-add:hover { text-decoration: underline; }
.bd-hr { margin: 24px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.bd-h2 { margin: 0; font: 600 20px/28px var(--font); }
.bd-card .bd-hr + .bd-h2 + .bd-grid { margin-top: 24px; }
/* "Editar datos del negocio" (full page, cards 696 wide 32/40 padding, 40 apart). */
.bf-form { margin-top: 32px; display: flex; flex-direction: column; gap: 40px; }
.bf-card { padding: 32px 40px; border-radius: 16px; background: var(--db-ffffff, #fff); }
.bf-card h2 { margin: 0; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
.bf-lead { margin: 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.bf-lead a { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.bf-field { margin-top: 24px; display: flex; flex-direction: column; gap: 4px; }
.bf-field label { font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.bf-input { height: 48px; display: flex; align-items: center; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff); }
.bf-input:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.bf-input.bad { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.bf-input input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: 0; border-radius: 8px; background: none; font: 400 15px/20px var(--font); color: var(--ink); outline: none; }
.bf-input input::placeholder { color: var(--df-767676, rgb(118, 118, 118)); }
.bf-icon > [data-icon] { display: flex; margin-left: 16px; }
.bf-icon > [data-icon] svg { width: 20px; height: 20px; }
.bf-icon input { padding-left: 8px; }
.bf-err { margin: 0; font: 400 13px/16px var(--font); color: var(--danger); }
.bf-info { margin-top: 24px; padding: 16px 20px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.bf-info b { font-weight: 600; }
.bf-radios { margin: 24px 0 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 16px; }
.bf-radio { display: flex; gap: 12px; cursor: pointer; }
.bf-radio input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--df-6950f3, rgb(105, 80, 243)); cursor: pointer; }
.bf-radio > span { display: flex; flex-direction: column; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.bf-radio small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.bf-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bf-lang input { cursor: pointer; }
.bf-edit { flex: none; height: 100%; padding: 0 16px; border: 0; background: none; font: 500 15px/20px var(--font); color: var(--df-6950f3, rgb(105, 80, 243)); cursor: pointer; }
@media (max-width: 599px) { .bd-grid, .bf-langs { grid-template-columns: 1fr; } .bf-card { padding: 24px; } }
/* "Cambiar idioma": 1024 wide, 4 columns of 220, the chosen one ringed in purple. */
.team-dialog.lg-dlg { width: calc(100% - 32px); max-width: 1024px; max-height: calc(100dvh - 64px); height: auto; padding: 0 48px 48px; overflow: auto; border-radius: 16px; }
.lg-head { position: sticky; top: 0; z-index: 1; height: 0; }
.lg-x { position: absolute; top: 20px; right: -28px; width: 48px; height: 48px; }
.lg-x svg { width: 24px; height: 24px; }
.team-dialog .lg-title { margin: 75px 0 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.lg-sub { margin: 32px 0 0; font: 600 17px/24px var(--font); }
.lg-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.lg-opt { height: 64px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 0; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); text-align: left; cursor: pointer; }
.lg-opt:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.lg-opt.on { box-shadow: inset 0 0 0 2px rgb(105, 80, 243); }
.lg-opt span { font: 600 15px/20px var(--font); color: var(--ink); }
.lg-opt small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* "Centros" (Fresha: 696 cards, picture 266 wide, 12 apart). */
.lo-actions { display: flex; gap: 8px; flex: none; }
.lo-search { margin-top: 28px; width: 256px; }
.lo-list { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.lo-card { display: grid; grid-template-columns: 266px minmax(0, 1fr); column-gap: 20px; min-height: 232px; border-radius: 12px; background: var(--db-ffffff, #fff); overflow: hidden; }
.lo-pic { display: grid; place-items: center; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--df-6950f3, rgb(105, 80, 243)); }
.lo-pic svg { width: 56px; height: 56px; }
.lo-info { padding: 32px 32px 32px 0; display: flex; flex-direction: column; align-items: flex-start; }
.lo-name { margin-bottom: 4px; font: 600 20px/28px var(--font); color: var(--ink); text-decoration: none; }
.lo-name:hover { text-decoration: underline; }
.lo-sub { margin: 0; font: 400 17px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.lo-sub + .lo-sub { margin-top: 4px; }
.lo-acts { margin-top: 24px; }
.lo-empty { margin: 24px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
@media (max-width: 599px) { .lo-card { grid-template-columns: 1fr; } .lo-pic { height: 160px; } .lo-info { padding: 20px; } .lo-search { width: 100%; } }
/* "Orden de centros" (full page). */
.lo-oh { margin: 0; }
.lo-olead { margin: 8px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.lo-olist { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lo-orow { height: 72px; padding: 12px 24px 12px 12px; display: flex; align-items: center; gap: 16px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); cursor: grab; }
.lo-opic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--df-6950f3, rgb(105, 80, 243)); }
.lo-opic svg { width: 24px; height: 24px; }
.lo-oname { flex: 1; font: 600 15px/20px var(--font); }
/* "Ajustes de establecimiento" of a location (Fresha /setup/location/:id). */
.lp-head { margin-top: 32px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lp-head h1 { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.lp-head p { margin: 4px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.lp-dot { margin: 0 4px; }
.lp-actions { display: flex; gap: 16px; flex: none; }
.lp-actions .tbtn svg { width: 20px; height: 20px; }
.setup-cols.lp-cols { margin-top: 36px; }
.lp-item svg { width: 20px; height: 20px; }
.lp-card + .lp-card, .lp-card + .lp-info, .lp-info + .lp-card { margin-top: 24px; }
.bd-full { grid-column: 1 / -1; }
.lp-text, .lp-lead { margin: 8px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.lp-lead a { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.lp-lead + .bd-grid { margin-top: 24px; }
.lp-info { margin-top: 24px; }
.lp-mapbox { position: relative; margin-top: 24px; height: 320px; border-radius: 12px; background: var(--db-f2f2f2, rgb(242, 242, 242)); overflow: hidden; display: grid; place-items: center; }
.lp-map { position: absolute; inset: 0; }
.lp-pin { position: relative; z-index: 500; padding: 6px 10px; border-radius: 8px; background: var(--db-ffffff, #fff); box-shadow: 0 2px 8px rgba(19, 19, 19, .16); font: 500 13px/16px var(--font); pointer-events: none; transform: translateY(-20px); }
.lp-pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--db-ffffff, #fff); transform: rotate(45deg); }
.lp-mapedit { height: 360px; }
.lp-hours { margin: 24px 0 0; display: flex; flex-direction: column; gap: 16px; }
.lp-hours > div { display: flex; flex-direction: column; }
.lp-hours dt { font: 500 15px/20px var(--font); }
.lp-hours dd { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.lp-note { margin-top: 24px; }
/* Its forms. */
.lp-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lp-opt { font-weight: 400; color: var(--df-767676, rgb(118, 118, 118)); }
.lp-count { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.lp-help { margin: 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.lp-phone select { flex: none; height: 100%; padding: 0 8px 0 16px; border: 0; border-right: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px 0 0 8px; background: none; font: 400 15px/20px var(--font); color: var(--ink); }
.lp-sub { margin: 8px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.lp-cats { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.lp-cat { position: relative; min-height: 64px; padding: 16px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); font: 600 15px/20px var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.lp-cat:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.lp-cat.on { box-shadow: inset 0 0 0 2px rgb(105, 80, 243); background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.lp-n { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: rgb(105, 80, 243); color: #fff; font: 600 13px/16px var(--font); }
.lp-main { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--db-ffffff, #fff); font: 600 12px/16px var(--font); color: var(--df-6950f3, rgb(105, 80, 243)); }
.lp-grid { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.lp-wide { grid-column: 1 / -1; }
.lp-area { width: 100%; min-height: 96px; padding: 12px 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; font: 400 15px/20px var(--font); resize: vertical; }
.lp-area:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lp-week { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.lp-day { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.lp-open { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.lp-open > span { display: flex; flex-direction: column; font: 400 15px/20px var(--font); }
.lp-open small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.lp-ranges { display: flex; flex-direction: column; gap: 8px; }
.lp-range { display: flex; align-items: center; gap: 8px; }
.lp-time, .lp-sel { height: 48px; padding: 0 12px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff); font: 400 15px/20px var(--font); color: var(--ink); }
.bf-input .lp-sel { width: 100%; height: 100%; border: 0; }
.lp-time { width: 112px; }
.lp-range .icon-btn svg { width: 20px; height: 20px; }
.lp-val { margin-top: 16px; }
.lp-valrow { display: flex; gap: 8px; align-items: center; }
.lp-pct { flex: 1; }
.lp-pct span { padding: 0 16px; color: var(--df-767676, rgb(118, 118, 118)); }
.lp-addval { margin-top: 16px; }
.lp-items { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-h3 { margin: 24px 0 0; font: 600 17px/24px var(--font); }
.lp-biz { margin: 12px 0 0; font: 400 15px/20px var(--font); }
@media (max-width: 767px) { .lp-head { flex-direction: column; } .lp-grid, .lp-items { grid-template-columns: 1fr; } .lp-day { grid-template-columns: 1fr; } }
#lp-main > .lp-card:first-child { margin-top: 0; }
.setup-nav-item.ext > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* "Añadir un nuevo centro" (4 steps with a progress bar on top). */
.nw-bar { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0 16px; height: 4px; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.nw-bar span { border-radius: 999px; background: var(--db-e5e5e5, rgb(229, 229, 229)); }
.nw-bar span.on { background: rgb(105, 80, 243); }
.nw .sf-top { top: 4px; }
.nw-back svg { width: 20px; height: 20px; }
.nw-kicker { margin: 0 0 8px; font: 500 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.nw-none { margin-top: 16px; }
.nw-addr { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 400 15px/20px var(--font); }
.nw-addr p { margin: 0; }
.nw-results { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.nw-results button { width: 100%; padding: 12px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 8px; background: none; font: 400 15px/20px var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.nw-results button:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.nw-results svg { width: 20px; height: 20px; flex: none; }
.nw-nohit { padding: 12px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.nw-days { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-chip { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); font: 600 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.nw-chip.on { background: rgb(105, 80, 243); box-shadow: none; color: #fff; }
.setup-nav-sub { margin: 24px 16px 8px; /* Fresha: the line, its 8 px, then 24 px between groups */ font: 600 17px/24px var(--font); }
/* "Gestión de citas": summaries, lists and Fresha's full-screen sheet (X on top, a long Guardar). */
.sc-lines { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font: 400 15px/20px var(--font); }
/* Fresha: each line with its green check in a circle (20 px), 8 px from the text. */
.sc-lines li { position: relative; padding-left: 28px; min-height: 20px; }
.sc-lines li::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: rgb(31, 137, 0);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill-rule="evenodd" d="M16 5a11 11 0 1 0 0 22 11 11 0 0 0 0-22M3 16a13 13 0 1 1 26 0 13 13 0 0 1-26 0m19.22-3.69a1 1 0 0 1-.03 1.41l-7.34 7a1 1 0 0 1-1.38 0l-3.66-3.5a1 1 0 0 1 1.38-1.44l2.97 2.84 6.65-6.34a1 1 0 0 1 1.41.03"/></svg>') center / 20px no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill-rule="evenodd" d="M16 5a11 11 0 1 0 0 22 11 11 0 0 0 0-22M3 16a13 13 0 1 1 26 0 13 13 0 0 1-26 0m19.22-3.69a1 1 0 0 1-.03 1.41l-7.34 7a1 1 0 0 1-1.38 0l-3.66-3.5a1 1 0 0 1 1.38-1.44l2.97 2.84 6.65-6.34a1 1 0 0 1 1.41.03"/></svg>') center / 20px no-repeat; }
.sc-link { margin-top: 16px; }
.sc-info { margin: 16px 0 0; white-space: pre-wrap; font: 400 15px/20px var(--font); }
.sc-list { display: flex; flex-direction: column; gap: 8px; }
.sc-row { min-height: 72px; padding: 12px 16px; display: flex; align-items: center; gap: 16px; border-radius: 12px; background: var(--db-ffffff, #fff); }
.sc-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sc-rt b { font: 600 15px/20px var(--font); }
.sc-rt small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sc-emoji { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--db-f2f2f2, rgb(242, 242, 242)); font-size: 24px; }
.sc-rico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--c) 18%, var(--db-ffffff, #fff)); color: var(--c); }
.sc-rico svg { width: 24px; height: 24px; }
.sc-st { border-left: 4px solid var(--c); }
.sc-st > [data-icon] svg { width: 20px; height: 20px; }
.sc-lock { color: var(--df-767676, rgb(118, 118, 118)); }
.sc-lock svg { width: 20px; height: 20px; }
.sc-empty { padding: 48px 24px; border-radius: 12px; background: var(--db-ffffff, #fff); text-align: center; font: 400 15px/20px var(--font); }
.sc-empty b { display: block; font: 600 17px/24px var(--font); }
.sc-empty p { margin: 8px auto 0; max-width: 420px; color: var(--df-767676, rgb(118, 118, 118)); }
.sc-emico { display: inline-grid; margin-bottom: 12px; }
.sc-emico svg { width: 40px; height: 40px; }
/* Tasas impositivas, empty (Fresha at 1470): a 360 px white card, 104 px above and below; the 64 px picture, 16 px, then the 512 px text. */
.tx-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; padding: 104px 24px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; text-align: center; }
.tx-art { display: block; width: 64px; height: 64px; }
.tx-empty > div { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 512px; }
.tx-empty b { font: 600 20px/28px var(--font); letter-spacing: -.2px; color: var(--ink); }
.tx-empty p { margin: 0; font: 400 15px/20px var(--font); letter-spacing: -.1px; color: var(--df-767676, rgb(118, 118, 118)); }
@media (max-width: 767px) { .tx-empty { background: none; box-shadow: none; } }
/* The list of taxes (Fresha at 1470): 88 px cards, 12 px apart; the 48 px grey square with the 24 px sign. */
.tx-list { gap: 12px; margin-top: 24px; }
.sc-row.tx-rate { background: var(--db-ffffff, #fff); }
.sc-row.tx-rate:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.tx-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--db-131313-5, rgba(19, 19, 19, .05)); color: var(--ink); }
.tx-ic svg { width: 24px; height: 24px; }
.sc-row.tx-rate .sc-rt small { font: 400 15px/20px var(--font); letter-spacing: -.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.tx-head [data-more] { white-space: nowrap; }
.tx-head #opts, .tx-rate [data-acts] { gap: 6px; }
@media (min-width: 768px) and (max-width: 899px) { .setup-head.tx-head { flex-direction: row; } }
/* Añadir / Editar impuesto (Fresha at 1470): the card's fields 16 px apart, «Opciones» as plain text beside «Cerrar». */
.tx-form .sc-in #sc-form.sc-card { display: flex; flex-direction: column; gap: 16px; }
.tx-form .sc-in #sc-form.sc-card > .bf-field { margin: 0; }
.tx-form #sc-form > .bf-field { display: block; margin: 0; padding: 0; }
.tx-form .lp-lab { display: block; min-height: 0; margin: 0 0 4px; padding: 0; }
@media (min-width: 1024px) { .tx-form .sc-top, .tx-sheet .sc-top { padding-right: 47px; } }
.tx-form label { display: block; font: 600 15px/20px var(--font); }
.tx-form .bf-input, .tx-form .bf-input.lp-pct { display: flex; align-items: center; height: 48px; box-sizing: border-box; border-radius: 15px; }
.tx-form .bf-input input { flex: 1; min-width: 0; height: 46px; font: 400 15px/20px var(--font); }
.tx-form .lp-pct .sl-pre { flex: none; padding: 0 0 0 16px; border: 0; background: none; color: var(--df-767676, rgb(118, 118, 118)); }
.tx-form .lp-pct input { padding-left: 11px; }
.tx-form .sc-tbtns .tx-opt { border: 0; background: none; box-shadow: none; }
.tx-form .sc-tbtns .tx-opt:hover { background: var(--db-131313-5-h, rgba(19, 19, 19, .05)); }
.tx-opt svg { display: none; }
@media (max-width: 767px) {
  .sc-cardform.tx-form .sc-tbtns .tx-opt { position: fixed; top: 18px; right: 64px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
  .tx-form .sc-in { width: calc(100% - 40px); }
  .tx-form .sc-tbtns #sc-save { left: 20px; right: 20px; }
  .sc-cardform.tx-form .av-x { width: 36px; height: 36px; box-shadow: none; }
  .tx-opt span { display: none; }
  .tx-opt svg { display: block; width: 20px; height: 20px; }
}
/* Tablets and phones (Fresha): no card, the fields straight on the page, a hairline over the button. */
@media (max-width: 1023px) {
  .sc-cardform.tx-form .sc-in #sc-form.sc-card { margin-top: 32px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .tx-form .sc-tbtns::before { border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .tx-form .av-x { width: 48px; height: 48px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
}
/* Impuestos predeterminados (Fresha at 1470). One centre: the fields with a hint under each, then a grey note. */
.tx-sheet #sc-form { display: flex; flex-direction: column; gap: 24px; }
.tx-sheet .sc-lead { margin-top: 12px; font: 400 17px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.tx-sheet .sc-tbtns .tbtn { height: 48px; padding: 0 20px; font: 600 17px/24px var(--font); }
.tx-f .bf-field { margin: 0; }
.tx-f label { font: 600 15px/20px var(--font); }
.tx-hint { margin: 4px 0 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.tx-info { display: flex; gap: 8px; padding: 16px 20px 16px 12px; border-radius: 15px; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.tx-info [data-icon] { flex: none; display: grid; width: 24px; height: 24px; }
.tx-info svg { width: 24px; height: 24px; }
.tx-info p { margin: 0; font: 400 15px/22px var(--font); }
/* Several centres: 1184 px wide; the 68 px grey bar with the 320 px search; a table that scrolls sideways under a soft edge. */
.tx-bulk .sc-in { width: min(1184px, 100% - 64px); }
.tx-bulk #sc-form { display: block; }
.tx-more, .tx-bulk .av-x { display: none; }
.tx-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; box-sizing: border-box; padding: 16px; border-radius: 20px; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.tx-search { width: 320px; max-width: 100%; }
.tx-picked { display: flex; align-items: center; gap: 12px; font: 500 15px/20px var(--font); }
.tx-picked[hidden] { display: none; }
.tx-picked .icon-btn { width: 24px; height: 24px; margin-right: 12px; color: var(--ink); }
.tx-picked .icon-btn svg { width: 20px; height: 20px; }
#sc-form:has(> .tx-wrap) { position: relative; }
.tx-wrap { margin-top: 24px; overflow-x: auto; }
#sc-form.tx-more-right::after { content: ""; position: absolute; top: 92px; right: 0; bottom: 0; width: 32px; pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(19, 19, 19, .08)); }
.tx-table { width: 1374px; border-collapse: collapse; table-layout: fixed; }
.tx-table th { height: 73px; box-sizing: border-box; padding: 0 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); text-align: left; font: 600 15px/20px var(--font); color: var(--ink); }
.tx-table .t-check { border-radius: 8px; }
.tx-table th:nth-child(1) { width: 44px; padding: 0 0 0 16px; }
.tx-table th:nth-child(2) { width: 250px; }
.tx-table th:nth-child(n + 3) { width: 270px; }
.tx-table td { height: 80px; box-sizing: border-box; padding: 1px 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); vertical-align: middle; }
.tx-table td.tx-c { padding: 1px 0 1px 16px; }
.tx-n { cursor: pointer; }
.tx-n b { font: 600 15px/20px var(--font); }
.tx-table td.tx-n { display: table-cell; }
.tx-n > * { vertical-align: middle; }
.tx-pic { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-right: 12px; overflow: hidden; border-radius: 15px; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.tx-pic img { width: 100%; height: 100%; object-fit: cover; }
.tx-pic svg { width: 24px; height: 24px; }
.tx-s label { display: none; }
.tx-s .bf-field { margin: 0; }
.tx-s .bf-input:has(select:disabled) { background: var(--db-f2f2f2, rgb(242, 242, 242)); border-color: var(--de-e5e5e5, rgb(229, 229, 229)); }
.tx-s select:disabled { color: var(--df-acacac, rgb(172, 172, 172)); background-color: transparent; }
.t-check:indeterminate { border-color: var(--accent); background: var(--accent) linear-gradient(var(--db-ffffff, #fff), var(--db-ffffff, #fff)) center / 12px 2px no-repeat; }
.t-check:disabled { border-color: var(--de-e5e5e5, rgb(229, 229, 229)); background: var(--db-f2f2f2, rgb(242, 242, 242)); cursor: default; }
/* The bulk window (720 px, 30 px corners). */
.team-dialog.tx-dialog { max-width: 720px; padding: 30px 48px 32px; border-radius: 30px; }
.tx-dh { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 44px; }
.tx-dh h2 { margin: 0; font: 600 28px/36px var(--font); }
.tx-dh .icon-btn { position: absolute; top: 20px; right: 36px; width: 48px; height: 48px; }
.tx-df { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.tx-df label { font: 400 14px/20px var(--font); }
.tx-db { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 1023px) {
  .tx-bulk .av-x { display: grid; }
  .tx-bulk .sc-in { width: calc(100% - 64px); }
  .tx-sheet .sc-tbtns #sc-save { height: 48px; }
}
/* Phones: no table: each centre with its four fields, split by a hairline; ⋮ and X on top. */
@media (max-width: 767px) {
  .sec-app .sc-row.tx-rate { min-height: 80px; padding: 16px 0; border-radius: 0; box-shadow: none; background: none; }
  .tx-list { margin-top: 16px; gap: 0; }
  .tx-sheet .av-x { width: 36px; height: 36px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
  .tx-more svg { width: 20px; height: 20px; }
  .tx-sheet .sc-in, .tx-bulk .sc-in { width: calc(100% - 40px); }
  .tx-sheet .sc-in h1 { font: 600 28px/36px var(--font); letter-spacing: 0; }
  .tx-sheet .sc-lead { font: 400 15px/20px var(--font); }
  .tx-sheet .sc-tbtns #sc-save { left: 20px; right: 20px; }
  .tx-more { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; margin-right: 8px; border-radius: 999px; font-size: 20px; }
  .tx-bar { display: block; min-height: 0; padding: 0; background: none; }
  .tx-search { width: 100%; }
  .tx-picked { display: none; }
  .tx-wrap { margin-top: 24px; overflow: visible; }
  #sc-form.tx-more-right::after { display: none; }
  .tx-table, .tx-table tbody, .tx-table tr, .tx-table td { display: block; width: 100%; height: auto; }
  .tx-table thead, .tx-table td.tx-c { display: none; }
  .tx-table tr { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .tx-table tr[hidden] { display: none; }
  .tx-table td { padding: 0; border: 0; }
  .tx-table td.tx-n { display: block; margin-bottom: 24px; pointer-events: none; }
  .tx-table td.tx-s { margin-bottom: 24px; }
  .tx-s label { display: block; margin-bottom: 4px; font: 600 15px/20px var(--font); }
  .team-dialog.tx-dialog { padding: 24px 20px; }
  .tx-dh { margin-top: 32px; }
  .tx-dh h2 { font-size: 24px; line-height: 32px; }
  .tx-dh .icon-btn { top: 8px; right: 8px; }
}
/* Recursos: Fresha's white card (radius 20, 16 px inside) with the 256 px search and the centre pill, 12 px apart. */
.sc-filters { display: flex; gap: 12px; align-items: center; margin: 24px 0 18px; padding: 16px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; }
.sc-filters .lo-search { margin-top: 0; width: 256px; max-width: 100%; height: 36px; }
.sc-filters .lo-search [data-icon] svg, .sc-filters .lo-search > svg { width: 20px; height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.sc-filters .lo-search input { font: 400 15px/20px var(--font); }
.sc-filters .lo-search input::placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.sc-locsel { position: relative; height: 36px; border-radius: 999px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); }
.sc-locsel:hover { border-color: var(--de-a0a0a0, rgb(160, 160, 160)); }
.sc-locsel:focus-within { border-color: var(--accent); }
.sc-locsel .lp-sel { height: 34px; padding: 0 35px 0 15px; border: 0; border-radius: 999px; background: transparent; -webkit-appearance: none; appearance: none; font: 500 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.sc-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.sc-chev svg { width: 20px; height: 20px; }
@media (max-width: 599px) { .sc-filters { flex-wrap: wrap; } .sc-filters .lo-search { width: 100%; } }
.sc-group + .sc-group { margin-top: 32px; }
.sc-ghead { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.sc-list[data-group] { gap: 12px; }
.sc-ghead h2 { margin: 6px 0 0; font: 600 17px/24px var(--font); }
.sc-none { margin: 0; padding: 24px 16px; border-radius: 20px; background: var(--db-f9f9f9, rgb(249, 249, 249)); text-align: center; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sc-sheet ~ .team-backdrop { z-index: 70; }
.sc-sheet { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--db-ffffff, #fff); animation: sc-up .25s cubic-bezier(.16, 1, .3, 1); }
@keyframes sc-up { from { transform: translateY(24px); opacity: 0; } }
.sc-top { flex: none; height: 72px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; transition: box-shadow .15s; }
.sc-top.scrolled { box-shadow: 0 4px 2px -2px rgba(19, 19, 19, .06); }
.sc-top-t { margin: 0; font: 600 20px/28px var(--font); opacity: 0; transition: opacity .15s; }
.sc-top.scrolled .sc-top-t { opacity: 1; }
.sc-x { width: 48px; height: 48px; margin-right: -4px; }
.sc-x svg { width: 24px; height: 24px; }
.sc-body { flex: 1; overflow: auto; }
.sc-in { width: min(696px, 100% - 32px); margin: 0 auto; padding: 36px 0 48px; }
.sc-in h1 { margin: 0; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.sc-lead { margin: 12px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sc-in #sc-form > :first-child { margin-top: 32px; }
.sc-foot { flex: none; padding: 16px 32px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sc-foot .tbtn { width: 100%; }
.sc-h3 { margin: 32px 0 0; font: 600 17px/24px var(--font); }
.sc-h3 + .bf-lead { margin-top: 4px; }
.sc-radios { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.sc-check { margin-top: 24px; }
.sc-typerow { display: flex; gap: 12px; align-items: flex-end; }
.sc-typerow .bf-field { flex: 1; }
.sc-emojibtn { flex: none; width: 48px; height: 48px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff); font-size: 24px; cursor: pointer; }
.sc-emojis { display: grid; grid-template-columns: repeat(6, 40px); gap: 4px; padding: 8px; }
.sc-emojis button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; font-size: 22px; cursor: pointer; }
.sc-emojis button:hover { background: var(--db-f2f2f2-h, rgb(242, 242, 242)); }
.team-menu.sc-emomenu { z-index: 70; }
.sc-colors { margin-top: 16px; display: grid; grid-template-columns: repeat(9, 40px); gap: 12px; }
.sc-color input, .sc-iconopt input { position: absolute; opacity: 0; pointer-events: none; }
.sc-color span { display: block; width: 40px; height: 40px; border-radius: 999px; cursor: pointer; }
.sc-color input:checked + span { box-shadow: 0 0 0 2px var(--ds-ffffff, #fff), 0 0 0 4px var(--ink); }
.sc-color input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 4px; }
.sc-icons { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.sc-iconopt span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); cursor: pointer; }
.sc-iconopt svg { width: 24px; height: 24px; }
.sc-iconopt input:checked + span { box-shadow: inset 0 0 0 2px rgb(105, 80, 243); background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.sc-loc { margin-top: 12px; padding-left: 32px; }
@media (max-width: 599px) { .sc-colors { grid-template-columns: repeat(6, 40px); } .sc-top, .sc-foot { padding-left: 16px; padding-right: 16px; } .sc-in h1 { font-size: 28px; line-height: 36px; } }
/* "Ventas": forms with Cerrar + main button on top (Fresha), lists and the numbering table. */
.sc-topform .sc-in { padding-top: 36px; }
.sc-tbtns { display: flex; gap: 8px; }
.sl-rate { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sl-pre { padding: 0 0 0 16px; color: var(--df-767676, rgb(118, 118, 118)); }
.sl-big { margin: 16px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sl-on { padding: 2px 8px; border-radius: 999px; background: var(--db-e7f6e2, rgb(231, 246, 226)); color: var(--df-1f8900, rgb(31, 137, 0)); font: 600 13px/16px var(--font); }
.sl-actsph { width: 113px; }
.sl-sw { margin-top: 16px; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); cursor: pointer; }
.sl-sw:first-of-type { border-top: 0; }
.sl-sw > span { display: flex; flex-direction: column; font: 400 15px/20px var(--font); }
.sl-sw b { font-weight: 500; }
.sl-sw small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sl-sw small a { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.sl-sw0 { margin-top: 32px; border: 0; }
.sl-find { width: 100%; }
.sl-table { width: 100%; margin-top: 16px; border-collapse: collapse; font: 400 15px/20px var(--font); }
.sl-table th { padding: 12px 8px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sl-table td { padding: 8px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.sl-table td .bf-input { height: 40px; }
.sl-bulk { position: sticky; bottom: 0; margin-top: 16px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; border-radius: 12px; background: var(--ink); color: var(--do-ffffff, #fff); font: 500 15px/20px var(--font); }
.sl-bulkin { flex: 1; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; font: 400 15px/20px var(--font); }
.sl-loc { margin-top: 24px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.sl-loc h2 { margin: 0; font: 600 20px/28px var(--font); }
/* "Ajustes › Clientes". */
.cs-row { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.cs-row:hover { background: var(--db-f9f9f9-h, rgb(249, 249, 249)); }
.cs-off { padding: 2px 8px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-767676, rgb(118, 118, 118)); font: 600 13px/16px var(--font); }
.ct-tag { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--df-6950f3, rgb(105, 80, 243)); font: 600 13px/20px var(--font); }
.ct-prev { margin: 12px 0 0; }
.cc-link { margin: 12px 0 0; font: 500 15px/20px var(--font); overflow-wrap: anywhere; }
.cc-acts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
/* "Ajustes › Facturación". */
.bl-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bl-h { margin: 0; font: 600 20px/28px var(--font); }
.bl-amt { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.bl-amt b { font: 600 20px/28px var(--font); }
.bl-amt small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.bl-auto { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bl-month { margin: 0; }
.bl-line { margin-top: 16px; padding-top: 16px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 500 15px/20px var(--font); }
.bl-line > span:first-child { flex: 1; }
.bl-line small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); text-align: right; }
.bl-plan { font: 600 17px/24px var(--font); }
/* "Ajustes › Equipo". */
.tr-list { gap: 12px; }
.tr-row { min-height: 0; padding: 20px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .1); }
.tr-row .sc-rt small { font: 400 15px/20px var(--font); }
.tr-open { cursor: pointer; }
@media (hover: hover) { .tr-open:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); } }
.tr-acts { width: 36px; height: 36px; flex: none; border-radius: 999px; }
.tr-acts svg { width: 20px; height: 20px; }
.tr-avs { display: flex; flex: none; }
.tr-av { width: 32px; height: 32px; margin-left: -8px; display: grid; place-items: center; border: 2px solid var(--de-ffffff, #fff); border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--df-6950f3, rgb(105, 80, 243)); font: 600 12px/16px var(--font); overflow: hidden; }
.tr-av:first-child { margin-left: 0; }
.tr-av img { width: 100%; height: 100%; object-fit: cover; }
.tr-more { background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--ink); }
.tr-h { margin: 32px 0 12px; font: 600 17px/24px var(--font); }
.tr-areas { margin-top: 24px; display: flex; flex-direction: column; }
.tr-area { padding: 14px 0; display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 400 15px/20px var(--font); }
.tr-area b { font-weight: 500; }
.tr-part { padding: 2px 8px; border-radius: 999px; background: var(--db-fff4de, rgb(255, 244, 222)); color: var(--df-b7570b, rgb(183, 87, 11)); font: 600 13px/16px var(--font); }
.tr-cal { margin-top: 12px; padding: 16px 20px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 400 15px/20px var(--font); }
.tr-cal p { margin: 0; }
.tr-cal p + p { margin-top: 12px; }
/* "Ajustes › Formularios": template chooser and the form editor. */
.fm-wrap { width: min(1200px, 100% - 32px); margin: 0 auto; padding: 36px 0 96px; }
.fm-wrap h1 { margin: 0; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.fm-cols { margin-top: 32px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.fm-lib { margin: 0 0 8px; font: 600 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fm-cats { display: flex; flex-direction: column; gap: 4px; }
.fm-cat { height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 8px; background: none; font: 500 15px/20px var(--font); color: var(--ink); cursor: pointer; text-align: left; }
.fm-cat:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.fm-cat.on { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.fm-n { font: 600 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fm-find { width: 100%; }
.fm-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.fm-card { padding: 20px; display: flex; flex-direction: column; gap: 8px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.fm-card b { font: 600 17px/24px var(--font); }
.fm-card p { flex: 1; margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fm-cacts { display: flex; gap: 8px; margin-top: 8px; }
.fm-preview { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.fm-pf { display: flex; flex-direction: column; gap: 8px; }
.fm-plab { font: 600 15px/20px var(--font); }
.fm-req { color: var(--danger); }
.fm-ptitle { margin: 0; font: 600 20px/28px var(--font); }
.fm-ptext { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); white-space: pre-wrap; }
.fm-yn { display: flex; gap: 24px; }
.fm-stars { font-size: 28px; letter-spacing: 4px; color: var(--df-d3d3d3, rgb(211, 211, 211)); }
.fm-sign { height: 120px; display: grid; place-items: center; border: 1px dashed var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 12px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fb { height: 100dvh; display: flex; flex-direction: column; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.fb-top { flex: none; height: 72px; padding: 0 24px; display: flex; align-items: center; gap: 12px; background: var(--db-ffffff, #fff); border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.fb-t { margin: 0; font: 600 17px/24px var(--font); }
.fb-seg { margin-left: 16px; padding: 4px; display: flex; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.fb-seg button { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 600 15px/20px var(--font); cursor: pointer; }
.fb-seg button.on { background: var(--db-ffffff, #fff); box-shadow: 0 1px 4px rgba(19, 19, 19, .12); }
.fb-sp { flex: 1; }
.fb-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.fb-pal { padding: 16px; overflow: auto; background: var(--db-ffffff, #fff); border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.fb-pal .t-search { width: 100%; }
.fb-tabs { margin: 16px 0 8px; display: flex; gap: 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.fb-tabs button { padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); cursor: pointer; }
.fb-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.fb-g { margin: 20px 0 8px; font: 600 15px/20px var(--font); }
.fb-comp { width: 100%; height: 40px; padding: 0 8px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 8px; background: none; font: 400 15px/20px var(--font); color: var(--ink); cursor: pointer; text-align: left; }
.fb-comp:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.fb-comp svg { width: 20px; height: 20px; color: var(--df-6950f3, rgb(105, 80, 243)); }
.fb-canvas { overflow: auto; padding: 48px 24px; }
.fb-page { position: relative; max-width: 696px; margin: 0 auto; padding: 40px; border-radius: 16px; background: var(--db-ffffff, #fff); }
.fb-tag { position: absolute; top: -14px; left: 0; padding: 4px 12px; border-radius: 8px 8px 0 0; background: rgb(105, 80, 243); color: #fff; font: 600 13px/16px var(--font); }
.fb-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fb-field { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); }
.fb-field.on { box-shadow: inset 0 0 0 2px rgb(105, 80, 243); }
.fb-fhead { display: flex; align-items: center; gap: 8px; }
.fb-type { flex: 1; font: 600 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fb-fhead .icon-btn svg { width: 18px; height: 18px; }
.fb-in { min-height: 56px; }
.fb-opts { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fb-opts .lp-valrow { width: 100%; }
.fb-drop { margin-top: 12px; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px dashed var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 12px; text-align: center; }
.fb-drop svg { width: 40px; height: 40px; color: var(--df-6950f3, rgb(105, 80, 243)); }
.fb-drop b { font: 600 17px/24px var(--font); }
.fb-drop p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
@media (max-width: 899px) { .fm-cols, .fb-main { grid-template-columns: 1fr; } .fb-pal { max-height: 40vh; } }
/* "Ajustes › Pagos". */
.pm-upd { margin-top: 16px; }
.pm-sw { margin-top: 0; }
.pm-fees { margin-top: 16px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.pm-fees > div:first-child { display: flex; flex-direction: column; font: 400 15px/20px var(--font); }
.pm-fees b { font-weight: 600; }
.pm-fees small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.pm-fee { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.pm-req { margin-top: 24px; }
/* "Editar el rol de permisos" (Fresha: 1184 wide, areas card 296 on the left). */
.tr-in { width: min(1184px, 100% - 32px); margin: 0 auto; padding: 36px 0 64px; }
.tr-in h1 { margin: 0; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.tr-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.tr-q { width: 256px; flex: none; }
.tr-name { max-width: 420px; }
.tr-cols { margin-top: 32px; display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 32px; align-items: start; }
.tr-nav { box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.tr-nav .setup-nav-item { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; font: 500 15px/20px var(--font); }
.tr-nav .setup-nav-item.is-active { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.tr-dot { width: 8px; height: 8px; margin-left: auto; border-radius: 999px; background: rgb(31, 137, 0); flex: none; }
.tr-dot.off { background: var(--db-767676, rgb(118, 118, 118)); }
.tr-panel { margin: 0; padding: 32px 40px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.tr-ahead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tr-ahead .lp-lead { margin-top: 4px; }
.tr-e { margin-top: 16px; }
.tr-e > span { padding-top: 2px; }
.tr-sub { margin-left: 24px; }
.tr-e .t-check { border-radius: 8px; }
.tr-e .t-check:disabled { border-color: var(--de-d3d3d3, rgb(211, 211, 211)); background-color: var(--db-f2f2f2, rgb(242, 242, 242)); cursor: default; }
.tr-e .t-check:disabled:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.5 3 3 6-7' stroke='%23acacac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tr-e:has(.t-check:disabled) { cursor: default; color: var(--df-acacac, rgb(172, 172, 172)); }
.tr-e:has(.t-check:disabled) small { color: var(--df-acacac, rgb(172, 172, 172)); }
.tr-hit { margin: 20px 0 0; font: 600 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
@media (max-width: 899px) { .tr-cols { grid-template-columns: 1fr; } .tr-hd { flex-direction: column; align-items: stretch; } .tr-q { width: 100%; } .tr-panel { padding: 24px; } .tr-in h1 { font-size: 28px; line-height: 36px; } }

/* ---------- Complementos (/add-ons), measured on the reference ---------- */
.ad-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; }
.ad-pic { width: 56px; height: 56px; flex: none; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; text-align: center; }
.ad-pic svg { width: 28px; height: 28px; }
.ad-pic.brand { box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.ad-pic.brand svg { width: 28px; height: 28px; }
.ad-t { margin: 24px 0 0; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.ad-beta { display: block; margin-top: 4px; font: 500 17px/24px var(--font); letter-spacing: -0.2px; background: linear-gradient(90deg, #e0408f, #8e44e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ad-d { margin: 4px 0 24px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.ad-ver { margin-top: auto; height: 36px; padding: 0 15px; font: 500 15px/20px var(--font); }
.ad-on { position: absolute; top: 24px; right: 24px; height: 24px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--db-edfbe9, rgb(237, 251, 233)); box-shadow: var(--ds-d2f6c9, rgb(210, 246, 201)) 0 0 0 1px inset; color: var(--df-1f8900, rgb(31, 137, 0)); font: 500 13px/16px var(--font); }
@media (max-width: 767px) {
  /* Fresha keeps the pills and the cards on the phone (one per row, as tall as their text). */
  .team-page.ad-page { padding-top: 16px; }
  .ad-page .ws-bar { display: block; position: sticky; top: 0; margin: 8px -20px 0; padding: 16px 20px; }
  .ad-page .ws-sec { margin-top: 16px; }
  .ad-page .ws-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 16px; padding: 0; background: none; box-shadow: none; }
}
/* Set-up of an integration (full screen, as Fresha's /add-ons/integration/<key>/setup). */
.ad-setup { position: fixed; inset: 0; z-index: 36; overflow: auto; background: var(--db-ffffff, #fff); animation: ob-over-in .2s ease-out; }
.ad-setup:has(.ad-steps), .ad-setup:has(.ad-bill) { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.ad-bar { position: sticky; top: 0; display: flex; gap: 8px; padding: 12px 32px 0; }
.ad-bar i { flex: 1; height: 4px; border-radius: 999px; background: var(--db-e5e5e5, rgb(229, 229, 229)); }
.ad-bar i.on { background: var(--accent); }
.ad-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px 32px; }
.ad-bar + .sr-only + .ad-top { top: 16px; }
.ad-top .sp { flex: 1; }
.ad-top .tbtn.lg { height: 48px; padding: 0 20px; font: 600 17px/24px var(--font); }
.ad-top .tbtn.lg:disabled { background: var(--db-9e9e9e, rgb(158, 158, 158)); border-color: var(--de-9e9e9e, rgb(158, 158, 158)); color: #fff; opacity: 1; cursor: default; }
.ad-top .ad-go { display: inline-flex; align-items: center; gap: 8px; }
.ad-top .ad-off { color: var(--df-d4163a, rgb(212, 22, 58)); }
.ad-back { width: 48px; height: 48px; border: 1px solid var(--border); background: var(--db-ffffff, #fff); }
.ad-back svg { width: 24px; height: 24px; }
.ad-body { max-width: 1400px; margin: 0 auto; padding: 24px 66px 64px; }
.ad-body.narrow { max-width: 712px; padding-left: 24px; padding-right: 24px; }
.ad-body h1 { margin: 0; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.ad-lead { margin: 12px 0 32px; font: 400 17px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ad-lead a { color: var(--accent); text-decoration: none; }
.ad-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; margin-bottom: 24px; border-radius: 12px; background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.ad-seg button { height: 36px; border: 0; border-radius: 10px; background: none; font: 500 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.ad-seg button[aria-selected="true"] { background: var(--db-ffffff, #fff); box-shadow: 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)), 0 1px 2px rgba(19, 19, 19, 0.06); }
.ad-lbl { margin: 0 0 8px; font: 600 15px/20px var(--font); }
.ad-in { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--db-ffffff, #fff); }
.ad-in:focus-within { border-color: var(--accent); }
.ad-in.bad { border-color: var(--de-d4163a, rgb(212, 22, 58)); }
.ad-in em { font-style: normal; font: 400 15px/20px var(--font); }
.ad-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15px/20px var(--font); }
.ad-err { margin: 4px 0 0; font: 400 13px/16px var(--font); color: var(--df-d4163a, rgb(212, 22, 58)); }
.ad-help { margin: 8px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ad-head { display: grid; grid-template-columns: 1fr 1fr; padding: 0 20px 12px; font: 600 15px/20px var(--font); }
.ad-loc { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 20px; margin-bottom: 16px; border-radius: 16px; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.ad-loc > .pic, .ad-loc > .tx { grid-row: 1; }
.ad-loc { grid-template-columns: 48px minmax(0, 1fr) 32px minmax(0, 1fr); }
.ad-loc .pic { width: 48px; height: 48px; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: grid; place-items: center; }
.ad-loc .pic svg { width: 24px; height: 24px; }
.ad-loc .tx { display: flex; flex-direction: column; }
.ad-loc .tx b { font: 600 15px/20px var(--font); }
.ad-loc .tx small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ad-loc .arr { width: 32px; height: 32px; border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); display: grid; place-items: center; }
.ad-loc .arr svg { width: 18px; height: 18px; }
.ad-notes { margin: 24px 0 0; padding: 16px 16px 16px 36px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 400 15px/20px var(--font); }
.ad-notes li + li { margin-top: 8px; }
.ad-steps { margin: 0; padding: 0; list-style: none; }
.ad-steps li { display: flex; gap: 12px; padding: 8px 0; font: 400 17px/24px var(--font); }
.ad-steps b { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); display: grid; place-items: center; font: 500 12px/1 var(--font); }
.ad-steps small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ad-bill { border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); overflow: hidden; }
.ad-bill .hd { display: flex; align-items: center; gap: 16px; padding: 20px 32px; background: var(--db-f9f9f9, rgb(249, 249, 249)); border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 400 15px/20px var(--font); }
.ad-bill .hd span { flex: 1; }
.ad-bill .bd { display: flex; flex-direction: column; gap: 8px; padding: 24px 32px 28px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ad-bill .bd b { font: 600 17px/24px var(--font); color: var(--ink); }
@media (max-width: 767px) {
  .ad-body { padding: 8px 20px 48px; }
  .ad-body h1 { font-size: 28px; line-height: 36px; }
  .ad-top { padding: 12px 20px; }
  .ad-loc { grid-template-columns: 48px minmax(0, 1fr); }
  .ad-loc .arr { display: none; }
  .ad-loc .f { grid-column: 1 / -1; }
}

/* ---------- Tu cuenta (/user-account, public/account/account.js), measured on the reference ---------- */
.ua-app { grid-template-columns: 295px 1fr; grid-template-areas: "top top" "side main"; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.ua-app .topbar { border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.ua-nav { grid-area: side; padding: 32px 16px; background: var(--db-ffffff, #fff); border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); overflow: auto; }
.ua-back { display: inline-flex; align-items: center; gap: 12px; margin: 4px 16px 36px; color: var(--accent); text-decoration: none; font: 500 15px/20px var(--font); }
.ua-back svg { width: 20px; height: 20px; }
.ua-title { margin: 0 16px 8px; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.ua-item { display: flex; align-items: center; gap: 12px; height: 44px; padding: 12px 16px; box-sizing: border-box; border-radius: 15px; color: var(--ink); text-decoration: none; font: 500 15px/20px var(--font); letter-spacing: -0.1px; }
.ua-item:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.ua-item.on { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.ua-item svg { width: 20px; height: 20px; flex: none; }
.ua-main { grid-area: main; overflow: auto; padding: 32px 32px 64px; }
.ua-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.ua-head h1 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.ua-head p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ua-head a, .g a { color: var(--accent); text-decoration: none; }
.ua-pill { height: 24px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; font: 500 13px/16px var(--font); }
.ua-pill.green { background: var(--db-edfbe9, rgb(237, 251, 233)); color: var(--df-1f8900, rgb(31, 137, 0)); }
.ua-acts { display: flex; gap: 8px; }
.tbtn.ua-round { width: 36px; padding: 0; justify-content: center; border-radius: 999px; }
.tbtn.ua-round svg { width: 20px; height: 20px; flex: none; }
.ua-card { position: relative; margin-bottom: 24px; padding: 32px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: var(--ds-e5e5e5, rgb(229, 229, 229)) 0 0 0 1px inset; }
.ua-2 { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.ua-edit { position: absolute; top: 24px; right: 24px; }
.ua-prof { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 24px; }
.ua-bigav { width: 120px; height: 120px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: grid; place-items: center; margin-bottom: 24px; }
.ua-bigav svg { width: 56px; height: 56px; }
.ua-prof h2 { margin: 0 0 12px; font: 600 28px/36px var(--font); }
.ua-prof p { margin: 0; font: 400 17px/24px var(--font); }
.g { color: var(--df-767676, rgb(118, 118, 118)); font: 400 15px/20px var(--font); margin: 0 0 16px; }
.ua-prof .g { font-size: 17px; line-height: 24px; margin: 0; }
.ua-card hr { margin: 32px 0 24px; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.ua-card h3 { margin: 0 0 16px; font: 600 17px/24px var(--font); }
.ua-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); font: 500 15px/20px var(--font); }
.ua-h2 { margin: 0 0 8px; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
.ua-empty { padding: 32px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.ua-empty .ill { width: 48px; height: 48px; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(135deg, rgb(176, 150, 255), rgb(224, 92, 220)); color: #fff; display: grid; place-items: center; }
.ua-empty .ill svg { width: 26px; height: 26px; }
.ua-empty b { max-width: 320px; font: 600 20px/28px var(--font); }
.ua-empty > span:not(.ill) { max-width: 320px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ua-empty .tbtn { margin-top: 20px; }
.ua-land { position: relative; min-height: calc(100% + 96px); margin: -32px -32px -64px; padding: 80px 48px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 48px; align-items: center; background: var(--db-ffffff, #fff); overflow: hidden; }
.ua-land-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; background: radial-gradient(70% 60% at 70% 20%, var(--db-d6c4ff, rgb(214, 196, 255)), transparent 70%), radial-gradient(60% 60% at 100% 80%, var(--db-ecd2ff, rgb(236, 210, 255)), transparent 70%); }
.ua-land-in { position: relative; }
.ua-land h1 { margin: 0 0 24px; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.ua-land ul { margin: 0 0 32px; padding: 0; list-style: none; }
.ua-land li { display: flex; gap: 12px; padding-bottom: 8px; font: 400 15px/20px var(--font); }
.ua-land li svg { width: 20px; height: 20px; flex: none; }
.ua-btns { display: flex; gap: 4px; }
.ua-btns .ghost { border-color: transparent; background: none; }
.ua-art { position: relative; height: 420px; }
.ua-art i { position: absolute; width: min(220px, 62%); height: 150px; border-radius: 16px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.8), 0 20px 40px rgba(105, 80, 243, 0.15); }
.ua-art i:nth-child(1) { right: 10px; top: 0; } .ua-art i:nth-child(2) { right: min(140px, 38%); top: 140px; } .ua-art i:nth-child(3) { right: 0; top: 280px; }
.ua-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.ua-tools .sp { flex: 1; }
.ua-tools .tbtn svg { width: 20px; height: 20px; }
.ua-rev { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.ua-sum { padding: 24px; }
.ua-score { margin: 0; font: 700 40px/44px var(--font); }
.ua-score span { color: rgb(255, 182, 0); }
.ua-bar { display: grid; grid-template-columns: 12px 1fr 12px; gap: 8px; align-items: center; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ua-bar i { height: 4px; border-radius: 999px; background: var(--db-e5e5e5, rgb(229, 229, 229)); }
.ua-sum hr { margin: 20px 0; }
.ua-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ua-chips button { height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--db-ffffff, #fff); font: 500 15px/20px var(--font); cursor: pointer; }
.ua-chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ua-linkbtn { margin-top: 16px; border: 0; background: none; padding: 0; color: var(--accent); font: 500 15px/20px var(--font); cursor: pointer; }
.ua-pay { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.ua-info { display: flex; gap: 10px; padding: 16px; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); font: 400 15px/20px var(--font); }
.ua-info svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.ua-sub { margin: 0 0 12px; font: 600 15px/20px var(--font); }
.ua-wscard { padding: 16px 24px; }
.ua-ws { display: flex; align-items: center; gap: 16px; }
.ua-ws .pic { width: 48px; height: 48px; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: grid; place-items: center; }
.ua-ws .pic svg { width: 24px; height: 24px; }
.ua-ws .tx { flex: 1; display: flex; flex-direction: column; }
.ua-ws b { font: 600 15px/20px var(--font); }
.ua-ws small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ua-crumbs { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ua-crumbs a { color: var(--df-767676, rgb(118, 118, 118)); text-decoration: none; }
.ua-crumbs b { font-weight: 500; color: var(--ink); }
.ua-crumbs .tbtn svg { width: 18px; height: 18px; }
.ua-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ua-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ua-tile { padding: 24px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: var(--ds-e5e5e5, rgb(229, 229, 229)) 0 0 0 1px inset; display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.ua-tile:hover { box-shadow: var(--ds-d3d3d3, rgb(211, 211, 211)) 0 0 0 1px inset, 0 4px 12px rgba(19, 19, 19, 0.06); }
.ua-tile svg { width: 28px; height: 28px; color: var(--accent); margin-bottom: 12px; }
.ua-tile b { font: 600 17px/24px var(--font); }
.ua-tile span { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ua-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; margin-top: 16px; }
.ua-kv div { display: flex; flex-direction: column; }
.ua-kv b { font: 600 15px/20px var(--font); }
.ua-kv span { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ua-shield { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent); margin-bottom: 12px; }
.ua-shield svg { width: 32px; height: 32px; }
.ua-col { max-width: 640px; }
.ua-line { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.ua-line:first-of-type { border-top: 0; }
.ua-line > div { flex: 1; display: flex; flex-direction: column; }
.ua-line b { font: 600 15px/20px var(--font); }
.ua-line span { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ua-gl { width: 32px; height: 32px; display: grid; place-items: center; font: 700 20px/1 var(--font); color: #4285f4; }
.ua-gl svg { width: 24px; height: 24px; color: var(--ink); }
.ua-all { margin-top: 16px; }
.ua-none { margin: 16px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ua-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ua-theme { position: relative; height: 72px; padding: 12px 16px; box-sizing: border-box; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; font: 500 15px/20px var(--font); }
.ua-theme input { position: absolute; opacity: 0; }
.ua-theme svg { width: 20px; height: 20px; }
.ua-theme.on { box-shadow: inset 0 0 0 2px var(--accent); }
.ua-form { display: flex; flex-direction: column; gap: 16px; }
.ua-form label { display: flex; flex-direction: column; gap: 6px; font: 600 15px/20px var(--font); }
.ua-form small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ua-tel { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.team-dialog.ua-dlg { max-width: 560px; }
.team-dialog h2.ua-dlg-h { padding: 24px 0 0; font: 600 24px/32px var(--font); }
.ua-link { color: var(--accent, var(--df-6950f3, rgb(105, 80, 243))); text-decoration: none; }
.ua-link:hover { text-decoration: underline; }
@media (max-width: 1023px) { .ua-2, .ua-rev, .ua-pay { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .ua-app { grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  .ua-nav { display: none; }
  .ua-main { padding: 24px 16px 48px; }
  .ua-tiles, .ua-themes, .ua-kv { grid-template-columns: 1fr; }
  .ua-land { grid-template-columns: 1fr; padding: 48px 20px; margin: -24px -16px -48px; }
  .ua-art { display: none; }
}

/* Recursos rows (Fresha /setup/scheduling/resources): 88 px white cards, radius 20, the chair in the
   resource's colour on its light tint, and the 6-dot grip 28 px to the left on hover to drag. */
.sc-row.res { position: relative; min-height: 88px; padding: 20px 20px 20px 20px; gap: 12px; border-radius: 20px; box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; cursor: pointer; touch-action: pan-y; }
.sc-row.res:hover { background: var(--db-fafafa-h, rgb(250, 250, 250)); }
.sc-row.res .sc-rt small { font: 400 14px/20px var(--font); }
.sc-rico.res { border-radius: 15px; background: color-mix(in srgb, var(--c) 10%, var(--db-ffffff, #fff)); color: color-mix(in oklab, var(--c) 78%, var(--df-000000, #000)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 10%, var(--ds-ffffff, #fff)); }
.sc-grip { position: absolute; left: -28px; top: 50%; width: 28px; height: 33px; display: grid; place-items: center; transform: translateY(-50%); opacity: 0; transition: opacity .2s, transform .2s; cursor: grab; color: var(--ink); }
.sc-grip svg { width: 20px; height: 20px; }
.sc-row.res:hover .sc-grip, .sc-row.res.is-dragging .sc-grip, .sc-row.res:focus-visible .sc-grip { opacity: 1; }
.sc-row.res.is-dragging { cursor: grabbing; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

/* "Nuevo / Editar recurso" (Fresha full page, measured at 1470 px): grey page, 296 px nav card
   (radius 25), 32 px gap, one white card (radius 20, 40 px inside), 24/32 headings, 48 px fields. */
body.rf-open { overflow: hidden; }
.mf-page.rf { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.rf .mf-top { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.rf .mf-top.scrolled { background: var(--db-ffffff, #fff); box-shadow: 0 1px 0 var(--ds-e5e5e5, rgb(229, 229, 229)); }
.rf .mf-top-title { margin: 0 auto 0 0; font: 600 20px/28px var(--font); opacity: 0; transition: opacity .2s; }
.rf .mf-top.scrolled .mf-top-title { opacity: 1; }
.rf-cols { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 32px; align-items: start; }
.rf-nav { position: sticky; top: 108px; padding: 24px 16px; border-radius: 25px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; }
.rf-nav a { display: flex; align-items: center; height: 44px; padding: 12px 16px; box-sizing: border-box; border-radius: 15px; font: 400 15px/20px var(--font); color: var(--ink); text-decoration: none; }
.rf-nav a:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.rf-nav a.on { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.rf-card { padding: 32px 40px 40px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; display: flex; flex-direction: column; gap: 24px; }
.rf-h { margin: 0; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
.rf-h.sub { margin-top: 32px; }
.rf-lead { margin: -20px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rf-lead a, .rf-ck small a { color: var(--accent); text-decoration: none; }
.rf-help { margin: -16px 0 0; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rf .bf-input { min-height: 48px; border-radius: 15px; }
.rf .lp-area { min-height: 120px; border-radius: 15px; }
.rf-radios { display: flex; flex-direction: column; gap: 16px; }
.rf-cap label { display: block; margin-bottom: 8px; font: 600 15px/20px var(--font); }
.rf-step { display: inline-flex; align-items: center; gap: 8px; }
.rf-step button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); cursor: pointer; }
.rf-step button:disabled { opacity: .4; cursor: default; }
.rf-step button svg { width: 20px; height: 20px; }
.rf-step input { width: 96px; height: 48px; box-sizing: border-box; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15px; text-align: center; font: 500 17px/24px var(--font); -moz-appearance: textfield; }
.rf-step input::-webkit-inner-spin-button { -webkit-appearance: none; }
.rf-locs { display: flex; flex-direction: column; }
.rf-loc { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); cursor: pointer; }
.rf-loc:last-child { border-bottom: 0; }
.rf-loc input { position: absolute; opacity: 0; }
.rf-dot { width: 22px; height: 22px; flex: none; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 50%; box-sizing: border-box; }
.rf-loc input:checked + .rf-dot { border: 7px solid var(--accent); }
.rf-lpic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); }
.rf-lpic svg { width: 24px; height: 24px; }
.rf-loc b { display: block; font: 600 15px/20px var(--font); }
.rf-loc small { display: block; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rf-week { display: flex; flex-direction: column; gap: 20px; margin-left: 36px; }
.rf-day { display: grid; grid-template-columns: 180px 1fr; align-items: start; }
.rf-dck, .rf-ck, .rf-prow { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.rf-dck { padding-top: 10px; }
.rf-dck input, .rf-ck input, .rf-prow input { position: absolute; opacity: 0; pointer-events: none; }
.rf-dck i, .rf-ck i, .rf-prow i { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 6px; color: transparent; box-sizing: border-box; }
.rf-dck i svg, .rf-ck i svg, .rf-prow i svg { width: 16px; height: 16px; }
.rf-dck input:checked + i, .rf-ck input:checked + i, .rf-prow input:checked + i { background: var(--accent); border-color: var(--accent); color: #fff; }
.rf-dck b { display: block; font: 600 15px/20px var(--font); }
.rf-dck input:not(:checked) ~ span b { color: var(--df-767676, rgb(118, 118, 118)); font-weight: 500; }
.rf-dck small { display: block; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rf-slots { display: flex; flex-direction: column; gap: 12px; }
.rf-slot { display: flex; align-items: center; gap: 12px; }
.rf-t { position: relative; width: 194px; }
.rf-t select { width: 100%; height: 46px; padding: 0 40px 0 16px; border: 0; background: none; -webkit-appearance: none; appearance: none; font: 400 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.rf-t > [data-icon] { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; }
.rf-t > [data-icon] svg { width: 20px; height: 20px; }
.rf-a { color: var(--df-767676, rgb(118, 118, 118)); }
.rf-ic { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--ink); }
.rf-ic:hover { background: var(--db-131313-5-h, rgba(19, 19, 19, 0.05)); }
.rf-ic svg { width: 20px; height: 20px; }
.rf-na { margin: 0; padding-top: 10px; font: 400 15px/20px var(--font); color: var(--df-a0a0a0, rgb(160, 160, 160)); }
.rf-ck span span { display: block; font: 400 15px/20px var(--font); }
.rf-ck small { display: block; margin-top: 2px; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rf-in { margin: -8px 0 0 34px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.rf-in.rf-2 { display: grid; align-items: end; }
.rf-linked { display: flex; align-items: center; gap: 12px; width: 100%; }
.rf-linked > span:nth-child(2) { flex: 1; }
.rf-linked b, .rf-prow b { display: block; font: 600 15px/20px var(--font); }
.rf-linked small, .rf-prow small { display: block; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rf-cat { margin: 8px 0 -8px; font: 500 15px/20px var(--font); }
.rf-svc { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0 8px 16px; border-left: 3px solid var(--c, #a5dff8); text-decoration: none; color: var(--ink); }
.rf-svc b { display: block; font: 400 15px/20px var(--font); }
.rf-svc small { display: block; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rf-p { font: 500 15px/20px var(--font); }
.rf-none { padding: 32px; text-align: center; border-radius: 15px; background: var(--db-f7f7f7, rgb(247, 247, 247)); }
.rf-none p { margin: 4px 0 0; color: var(--df-767676, rgb(118, 118, 118)); }
.rf-pick { width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); display: flex; flex-direction: column; }
.rf-px { position: absolute; top: 20px; right: 20px; }
.rf-ps { margin: 16px 0 8px; }
.rf-pl { flex: 1; overflow-y: auto; min-height: 200px; }
.rf-prow { align-items: center; padding: 12px 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.rf-pf { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.rf-pn { margin-right: auto; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.sc-ghead h2 { font: 600 20px/28px var(--font); }
@media (max-width: 899px) { .rf-cols { grid-template-columns: 1fr; } .rf-nav { position: static; display: flex; overflow-x: auto; padding: 8px; } .rf-2 { grid-template-columns: 1fr; } .rf-day { grid-template-columns: 1fr; gap: 8px; } .rf-card { padding: 24px; } .rf-week { margin-left: 0; } }
.rf-card .bf-field { margin: 0; }
.rf .bf-input:has(> select) { position: relative; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15px; background: var(--db-ffffff, #fff); }
.rf .bf-input:has(> select):focus-within { border-color: var(--accent); }
.rf .bf-input > select.lp-sel { width: 100%; height: 46px; padding: 0 44px 0 16px; border: 0; border-radius: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131313' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; -webkit-appearance: none; appearance: none; font: 400 15px/20px var(--font); color: var(--ink); }

/* "Nuevo tipo de recurso" (Fresha's window) */
.rt-dlg { position: relative; overflow: visible !important; width: 720px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 74px 48px 32px !important; display: flex; flex-direction: column; gap: 4px; }
.rt-dlg h2 { margin: 0 0 28px; font: 600 28px/36px var(--font); }
.rt-x { position: absolute; top: 20px; right: 36px; width: 48px; height: 48px; }
.rt-row { position: relative; display: flex; gap: 8px; margin-bottom: 20px; }
.rt-row .bf-input { flex: 1; min-height: 48px; border-radius: 15px; }
.rt-icbtn { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15px; background: var(--db-ffffff, #fff); cursor: pointer; color: var(--ink); }
.rt-icbtn svg, .rt-grid svg { width: 24px; height: 24px; }
.rt-grid { position: absolute; top: 56px; left: 0; z-index: 3; display: grid; grid-template-columns: repeat(5, 36px); gap: 8px; padding: 16px; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: var(--pop-shadow); }
.rt-grid button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--ink); }
.rt-grid button:hover { background: var(--db-131313-5-h, rgba(19, 19, 19, 0.05)); }
.rt-grid button.on { box-shadow: inset 0 0 0 2px var(--accent); }
.rt-dlg .lp-area { min-height: 120px; border-radius: 15px; }
.rt-foot { display: flex; justify-content: flex-end; margin-top: 30px; }
.rt-foot .tbtn { height: 48px; padding: 0 20px; font: 600 17px/24px var(--font); }
@media (max-width: 767px) { .rt-dlg { padding: 64px 20px 24px !important; } .rt-x { right: 12px; top: 12px; } }
.rt-foot .tbtn:disabled { background: var(--db-a0a0a0, rgb(160, 160, 160)); border-color: var(--de-a0a0a0, rgb(160, 160, 160)); }
.sc-rico.res > svg { width: 24px; height: 24px; }

/* Formularios: the library texts keep their line breaks; a question's help line under it. */
.fm-ptext { white-space: pre-line; }
.fm-phelp { margin: -4px 0 8px; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); white-space: pre-line; }

/* "Elige una plantilla" as Fresha: the library in a white card, the blank form across, two columns. */
.fm-cats { padding: 24px 16px; border-radius: 25px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; }
.fm-cols { grid-template-columns: 296px minmax(0, 1fr); }
.fm-lib { margin: 0 16px 8px; font: 600 17px/24px var(--font); color: var(--ink); }
.fm-cat { border-radius: 15px; padding: 0 16px; }
.fm-n { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: 999px; background: var(--db-131313-5, rgba(19, 19, 19, 0.05)); }
.fm-find { height: 48px; border-radius: 999px; }
.fm-grid { grid-template-columns: 1fr 1fr; }
.fm-blank { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; }
.fm-blank > div { flex: 1; min-width: 0; }
.fm-blank b { display: block; font: 600 15px/20px var(--font); }
.fm-blank p { margin: 2px 0 0; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fm-bico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #7f72ff, #4c3fe0); color: #fff; }
.fm-bico svg { width: 22px; height: 22px; }
.fm-blank .tbtn svg, .fm-cacts .tbtn svg { width: 16px; height: 16px; }
.fm-blank .tbtn, .fm-cacts .tbtn { display: inline-flex; align-items: center; gap: 6px; }
.fm-card { padding: 24px; border-radius: 20px; box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; }
.fm-card b { font: 600 17px/24px var(--font); }
.fm-card p { flex: 1; margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fm-none { grid-column: 1 / -1; text-align: center; color: var(--df-767676, rgb(118, 118, 118)); }
@media (max-width: 767px) { .fm-grid { grid-template-columns: 1fr; } }
/* Short windows (warnings, the cash window) fit their content instead of the full height. */
.team-dialog.pkp-dlg.sg-deldlg, .team-dialog.pkp-dlg.co-amdlg { height: auto; max-height: calc(100dvh - 32px); }
/* catalogue.css makes .pkp-dlg 720 wide where it loads: this small window stays 512. */
.team-dialog.pkp-dlg.sg-deldlg { max-width: 512px; border-radius: 30.48px; }
/* Phones (Fresha's same window): a sheet from the bottom. */
@media (max-width: 767px) {
  .team-backdrop:has(.sg-deldlg) { padding: 0; place-items: end stretch; }
  .team-dialog.pkp-dlg.sg-deldlg, .team-dialog.sg-deldlg { width: 100%; max-width: none; border-radius: 30.48px 30.48px 0 0; }
  .sg-deldlg .pkp-head { height: 60px; padding: 20px 64px 12px 20px; }
  .sg-deldlg .pkp-x { top: 10px; right: 8px; }
  .sg-del { padding: 0 20px; }
  .sg-delf { padding: 24px 20px calc(16px + env(safe-area-inset-bottom)); }
}
.team-dialog.pkp-dlg.co-amdlg { overflow-y: auto; }
.team-page:focus { outline: none; }
/* Fresha's "pageFaded" form (Ajustes del calendario): grey page, Cerrar + Guardar on top,
   the fields in a white 696px card (radius 25, 1px ring, padding 32/40). */
.sc-cardform { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.sc-cardform .sc-top { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.sc-cardform .sc-tbtns .tbtn { height: 48px; padding: 0 20px; font: 600 17px/24px var(--font); }
.sc-cardform .sc-in #sc-form.sc-card { margin-top: 32px; padding: 32px 40px; border-radius: 25px; background: var(--db-ffffff, #fff); box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); }
.sc-cardform .sc-in #sc-form.sc-card > :first-child { margin-top: 0; }
.sc-cardform .sc-check { gap: 12px; }
.sc-cardform .sc-check .t-check { border-radius: 8px; }
.sc-more { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.sc-more:hover { text-decoration: underline; }
@media (max-width: 599px) { .sc-cardform .sc-in #sc-form.sc-card { padding: 24px 20px; } }
/* Selects in the full-screen forms: Fresha's chevron, 16px in from the right edge
   (the browser's own arrow sat against the border). */
.sc-sheet .bf-input:has(> select.lp-sel) { height: 48px; border-radius: 15px; }
.sc-sheet .bf-input > select.lp-sel { width: 100%; height: 46px; padding: 0 48px 0 16px; border: 0; border-radius: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131313' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 20px; -webkit-appearance: none; appearance: none; font: 400 15px/20px var(--font); color: var(--ink); cursor: pointer; }

/* Every dropdown gets Fresha's chevron 16px in from the right edge (the browser's own
   arrow sat against the border). Selects that draw their own chevron, or that sit
   invisible over a custom control, are left alone. */
select:not([multiple]):not([size]):not(.hm-select select, .bt-sel select, .ob-type select, .rf-t select, .sc-locsel select, .na-time select, .na-date select) {
  -webkit-appearance: none; appearance: none; padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131313' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 20px;
}
/* The "i" with an explanation in the shared black label (Informes dashboards, Inicio). */
.db-i { display: inline-grid; color: var(--df-a0a0a0, rgb(160, 160, 160)); }
.db-i svg { width: 18px; height: 18px; }

/* ---------- Phones: Fresha's phone web (measured at 402×874, iPhone 16 Pro) ----------
   Every section page: a 72px top bar with only the back arrow (48px, to the section's own
   page), the page's buttons on its right (the secondary one as a 36px ⋮ circle, the main
   one as a 36px outlined "+ Añadir"), the title that appears in the bar once the page's own
   scrolls away, and the bottom bar. The section's own page (/sales, /clients…) is grey with
   white cards of 48px rows. */
.m-up { display: none; }
.sx-h1, .sx-h2 { margin: 0; }
@media (max-width: 767px) {
  .sec-app, .idx-app { --topbar-h: calc(72px + env(safe-area-inset-top)); }
  .sec-app .topbar, .idx-app .topbar { padding: env(safe-area-inset-top) 20px 0 8px; gap: 0; border-bottom: 0; background: var(--m-bar, var(--db-ffffff, #fff)); }
  .sec-app .brand, .sec-app .topbar-actions, .idx-app .brand { display: none; }
  .idx-app .topbar-actions { display: none; }
  .no-up.idx-app .topbar-actions { display: flex; }
  .no-up.idx-app .topbar .icon-btn[aria-label="Mensajes"] { display: flex !important; }
  .no-up .topbar { padding-left: 20px; }
  .m-up { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 999px; color: var(--ink); }
  .m-up svg { width: 24px; height: 24px; }
  .sec-app .m-title, .idx-app .m-title { display: block; flex: 1; min-width: 0; margin-left: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font: 600 20px/28px var(--font); letter-spacing: -0.2px; opacity: 0; transition: opacity .15s; }
  .sec-app .m-title { margin-right: 160px; }
  .sec-app .m-title.on, .idx-app .m-title.on { opacity: 1; }
  .sec-app .team-page { padding: 0 20px 96px; }
  /* The page's buttons go up into the bar. */
  .sec-app .page-head > .page-actions, .sec-app .sl-head > .acts, .sec-app .mk-head > .acts, .sec-app .ob-head > .acts, .sec-app .ob-head > .tbtn:not(.dark) {
    position: fixed; z-index: 30; top: calc(env(safe-area-inset-top) + 18px); right: 20px; display: flex; gap: 8px; margin: 0; }
  .sec-app .page-head, .sec-app .sl-head, .sec-app .mk-head, .sec-app .ob-head { flex-direction: column; gap: 4px; min-height: 0; }
  .sec-app :is(.page-actions, .acts) > .tbtn:not(.dark), .sec-app .ob-head > .tbtn:not(.dark) {
    width: 36px; height: 36px; padding: 0; border-radius: 999px; font-size: 0; gap: 0; justify-content: center; }
  .sec-app :is(.page-actions, .acts) > .tbtn:not(.dark) > *, .sec-app .ob-head > .tbtn:not(.dark) > * { display: none; }
  .sec-app :is(.page-actions, .acts) > .tbtn:not(.dark)::after, .sec-app .ob-head > .tbtn:not(.dark)::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; }
  .sec-app :is(.page-actions, .acts) > .tbtn.dark { height: 36px; padding: 0 16px 0 12px; gap: 4px; border-color: var(--t-border); background: var(--db-ffffff, #fff); color: var(--ink); font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
  .sec-app :is(.page-actions, .acts) > .tbtn.dark::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>') center / 20px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>') center / 20px no-repeat; }
  /* Fresha's phones say "Añadir" where the desktop says "Añadir nueva". */
  .sec-app :is(.page-actions, .acts) > .tbtn.dark[data-m] { font-size: 0; }
  .sec-app :is(.page-actions, .acts) > .tbtn.dark[data-m]::after { content: attr(data-m); font: 600 15px/20px var(--font); }
  /* A section's own page. */
  .idx-app .topbar, .idx-app .team-page { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
  .idx-app .team-page { padding: 0 20px 96px; }
  .sx { display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px; }
  .sx-h1 { font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
  .sx-group { display: flex; flex-direction: column; gap: 12px; }
  .sx-h2 { font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
  .sx-card { margin: 0; padding: 12px 20px; list-style: none; border-radius: 25.4px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; }
  .sx-row { margin: 0 -12px; min-height: 48px; padding: 12px; display: flex; align-items: center; gap: 12px; border-radius: 15.24px; color: var(--ink); text-decoration: none; }
  .sx-row:active { background: var(--db-131313-6-h, rgba(19, 19, 19, .06)); }
  .sx-row svg { width: 24px; height: 24px; flex: none; display: block; }
  .sx-row b { flex: 1; min-width: 0; font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
}
@media (max-width: 767px) and (hover: hover) { .sx-row:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); } }
/* Phones: a menu as Fresha's bottom sheet (× on top; 48px rows, 17/24 500). */
.tm-sheet { padding: 12px 0 calc(24px + env(safe-area-inset-bottom)); }
.tm-sheet.mn-sheet { border-radius: 30.48px 30.48px 0 0; }
.tm-sheet .team-menu.tm-add { min-width: 0; }
.tm-sheet .mn-head { padding: 0 8px; }
.tm-sheet .team-menu { position: static; inset: auto; border: 0; width: auto !important; min-width: 0 !important; max-width: none; max-height: none; padding: 12px 20px 8px; border-radius: 0; box-shadow: none; background: none; animation: none; }
.tm-sheet .team-menu .menu-item { min-height: 48px; height: auto; padding: 12px; gap: 8px; border-radius: 15.24px; font: 500 17px/24px var(--font); letter-spacing: -0.2px; white-space: normal; }
.tm-sheet .team-menu .menu-item [data-icon] svg { width: 24px; height: 24px; }
.tm-sheet .team-menu .menu-heading { margin: 8px 0 4px; font: 600 15px/20px var(--font); }
.tm-sheet .team-menu .menu-sep + .menu-heading { margin-top: 12px; }
/* Phones: the team list as rows like Fresha's client list (photo, name, its notes), no
   head, no tick boxes or contact column, the row's actions as a ⋮; the toolbar loses its
   grey box and the search fills the line next to a round filter button. */
@media (max-width: 767px) {
  .sec-app .t-toolbar { margin-top: 24px; padding: 0; gap: 12px; background: none; flex-wrap: nowrap; }
  .sec-app .t-toolbar .left { flex: 1; gap: 12px; }
  .sec-app .t-toolbar .right { display: none; }
  .sec-app .t-toolbar .t-search { flex: 1; width: auto; }
  .sec-app .t-toolbar #filters-btn { width: 36px; padding: 0; justify-content: center; flex: none; }
  .sec-app .t-toolbar #filters-btn > span:not([data-icon]) { display: none; }
  .sec-app .t-toolbar:has(.flt-chips) { flex-wrap: wrap; }
  .t-table:not(.ts-table), .t-table:not(.ts-table) tbody { display: block; }
  .t-table:not(.ts-table) thead, .t-table:not(.ts-table) .c-check, .t-table:not(.ts-table) .c-contact, .t-table:not(.ts-table) .c-role { display: none; }
  .t-table:not(.ts-table) { margin: 12px -20px 0; width: auto; }
  .t-table:not(.ts-table) tbody tr { display: flex; align-items: center; }
  .t-table:not(.ts-table) td { height: auto; padding: 16px 20px; border: 0; background: none; }
  .t-table:not(.ts-table) td.c-name { flex: 1; min-width: 0; width: auto; padding-right: 8px; }
  .t-table:not(.ts-table) td.c-actions { width: auto; padding-left: 0; }
  .t-table:not(.ts-table) td.c-actions .tbtn { width: 36px; padding: 0; justify-content: center; border: 0; background: none; font-size: 0; }
  .t-table:not(.ts-table) td.c-actions .tbtn > * { display: none; }
  .t-table:not(.ts-table) td.c-actions .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; }
  .t-table:not(.ts-table) tbody tr:hover td { background: none; }
}
@media (max-width: 767px) {
  .sec-app :is(.page-actions, .acts) > .tbtn.dark > i { display: none; }
  .sec-app .team-page.ct-page { background: var(--db-ffffff, #fff); }
  .sec-app .ct-card .ct-more { display: none; }
}
/* Phones: every full-screen form (client, service, bono, package, member…) as Fresha's
   phone web: a × at the top right instead of "Cerrar", the sections as one line of pills
   that slides sideways, 20px gutters, and "Guardar" as a full-width black button stuck to
   the bottom on a white bar. */
@media (max-width: 767px) {
  .mf-top { height: calc(72px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 20px; }
  .mf-top > .tbtn:not(.dark):not(.danger-o) { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: none; font-size: 0; justify-content: center; flex: none; }
  .mf-top > .tbtn:not(.dark):not(.danger-o)::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 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>') center / 24px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18"/></svg>') center / 24px no-repeat; }
  .mf-top > .tbtn.dark { position: fixed; z-index: 1; left: 20px; right: 20px; bottom: calc(16px + env(safe-area-inset-bottom)); height: 48px; justify-content: center; font: 600 17px/24px var(--font); }
  .mf-top:has(> .tbtn.dark)::after { content: ""; position: fixed; z-index: 0; left: 0; right: 0; bottom: 0; height: calc(80px + env(safe-area-inset-bottom)); background: var(--db-ffffff, #fff); box-shadow: 0 -1px 0 var(--ds-e5e5e5, rgb(229, 229, 229)); }
  .mf-wrap { width: calc(100% - 40px); padding: 0 0 136px; }
  .mf-cols { gap: 16px; }
  .mf-nav { display: flex; gap: 4px; margin: 0 -20px; padding: 0 20px; border: 0; border-radius: 0; overflow-x: auto; scrollbar-width: none; }
  .mf-nav::-webkit-scrollbar { display: none; }
  .mf-nav h3, .mf-nav hr { display: none; }
  .mf-nav a { flex: none; height: 36px; padding: 0 16px; gap: 8px; border-radius: 999px; white-space: nowrap; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
  .mf-nav a.is-active { background: var(--ink); color: var(--do-ffffff, #fff); }
}
/* Buttons that only exist on phones (Fresha moves some toolbar buttons into the ⋮). */
.only-phone { display: none !important; }
@media (max-width: 767px) { .only-phone { display: inline-flex !important; } .bn-bar > #order { display: none; } }
/* Phones (Fresha's Procesos de pago at 402 px): the search on its own line, one white summary
   card with label/amount rows and the black button across it, and each member as a row
   (photo, name, the amount due in bold and a ⋮). */
@media (max-width: 767px) {
  .pr-filters { flex-wrap: wrap; }
  .pr-filters .t-search { width: 100% !important; flex: 1 1 100%; order: 2; }
  .pr-filters .t-search input { width: 100% !important; padding: 0 16px 0 8px !important; }
  .pr-sum { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
  .pr-card { display: flex; align-items: center; justify-content: space-between; padding: 0; border-radius: 0; box-shadow: none; background: none; }
  .pr-card p { font: 400 15px/20px var(--font); }
  .pr-card strong { margin: 0; font: 400 15px/20px var(--font); }
  .pr-card.pay { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .pr-card.pay > div { display: flex; justify-content: space-between; }
  .pr-card.pay p, .pr-card.pay strong { font: 600 17px/24px var(--font); }
  .pr-card.pay .tbtn { height: 40px; justify-content: center; }
  .pr-list { gap: 0; margin-top: 24px; }
  .pr-row { position: relative; display: flex; align-items: center; min-height: 0; padding: 16px 44px 16px 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .pr-who { flex: 1; min-width: 0; }
  .pr-col { display: none; padding: 0; border: 0; }
  .pr-col.due { display: block; }
  .pr-col.due p { display: none; }
  .pr-col.due strong { font: 600 15px/20px var(--font); }
  .pr-who .link-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; justify-content: center; font-size: 0; color: var(--ink); }
  .pr-who .link-btn > * { display: none; }
  .pr-who .link-btn::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; }
}
/* Phones: inside a settings section the breadcrumb and the section's menu go (the section's
   own page lists them), as Fresha. */
@media (max-width: 767px) {
  .sec-app .setup-crumbs, .sec-app .setup-nav { display: none; }
}
/* Phones (Fresha's settings pages at 402 px): white page, the title right under the bar,
   and the sections without their white card (only a line between them). */
@media (max-width: 767px) {
  .sec-app .team-page.setup-page { padding: 0 20px 96px; background: var(--db-ffffff, #fff); }
  .sec-app .setup-cols { margin-top: 0; display: block; }
  .sec-app .setup-card { margin-top: 24px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .sec-app .setup-card + .setup-card { padding-top: 24px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
}
/* Phones: a settings page's buttons go up into the bar as Fresha (Opciones as a ⋮ circle,
   the main one as a black "+ Añadir"); the title is 28/36. */
@media (max-width: 767px) {
  .sec-app .setup-head { flex-direction: column; gap: 4px; }
  .sec-app .setup-head h1 { font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
  .sec-app .setup-head > :is(.lo-actions, button.tbtn) { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top) + 18px); right: 20px; display: flex; gap: 8px; margin: 0; }
  .sec-app .setup-head .lo-actions > .tbtn:not(.dark) { width: 36px; height: 36px; padding: 0; border-radius: 999px; font-size: 0; gap: 0; justify-content: center; }
  .sec-app .setup-head .lo-actions > .tbtn:not(.dark) > * { display: none; }
  .sec-app .setup-head .lo-actions > .tbtn:not(.dark)::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; }
  .sec-app .setup-head > .lo-actions > .tbtn.dark, .sec-app .setup-head > button.tbtn.dark { height: 36px; padding: 0 16px 0 12px; gap: 4px; font: 600 15px/20px var(--font); }
  .sec-app .setup-head > .lo-actions > .tbtn.dark::before, .sec-app .setup-head > button.tbtn.dark::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>') center / 20px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>') center / 20px no-repeat; }
  .sec-app .setup-head .tbtn.dark [data-icon] { display: none; }
}
/* Phones: settings rows (roles, reasons, statuses, tags…) without their card, as Fresha. */
@media (max-width: 767px) {
  .sec-app .sc-list { gap: 0; }
  .sec-app .sc-row, .sec-app .sc-row.res { min-height: 0; padding: 16px 0; border-radius: 0; box-shadow: none; background: none; }
  .sec-app .sc-row.res .sc-grip { display: none; }
}
/* Phones: Tu cuenta as Fresha's phone web: "Área personal" first (name 28, the referral
   banner, Mi billetera and the pages as rows); each page with its back arrow and its
   buttons in the bar, on a white page. */
@media (max-width: 767px) {
  .ua-app.sec-app .ua-main { padding: 0 20px 48px; background: var(--db-ffffff, #fff); }
  .ua-app.sec-app:has(.ua-home) .ua-main, .ua-app.sec-app:has(.ua-home) .topbar { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
  .ua-app.sec-app .topbar-actions { display: none; }
  .ua-app.sec-app .ua-head { flex-direction: column; gap: 4px; }
  .ua-app.sec-app .ua-head > :last-child:not(:first-child) { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top) + 18px); right: 20px; display: flex; gap: 8px; margin: 0; }
  .ua-home { gap: 16px; }
  .ua-hh { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
  .ua-hh small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
  .ua-hh h1 { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
  .ua-hh p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
  .ua-hh .am-av { width: 56px; height: 56px; }
  .ua-home .am-ref { width: 100%; margin: 0; }
  .ua-wal { width: 100%; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; text-align: left; cursor: pointer; color: var(--ink); }
  .ua-wal b { display: block; font: 600 15px/20px var(--font); }
  .ua-wal small { font: 400 15px/20px var(--font); }
  .ua-wal svg { width: 24px; height: 24px; }
}
@media (max-width: 767px) { .sx-row .mo-flag { width: 24px; text-align: center; font-size: 18px; flex: none; } }
/* Phones: Turnos programados as Fresha's phone web. */
.shm-bar { margin-top: 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.shm-bar .pill-grp { display: inline-flex; }
.shm-seg { margin-top: 16px; display: flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.shm-seg button { flex: 1; height: 36px; border: 0; border-radius: 999px; background: none; font: 500 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.shm-seg button.on { background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
.shm-list { margin-top: 16px; display: flex; flex-direction: column; }
.shm-h { width: 100%; min-height: 72px; padding: 12px 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.shm-h .t-avatar.sm { width: 48px; height: 48px; }
.shm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shm-t b { font: 600 15px/20px var(--font); }
.shm-t small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.shm-chev svg { width: 20px; height: 20px; transition: transform .2s; }
.shm-row.open .shm-chev svg { transform: rotate(180deg); }
.shm-more { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; }
.shm-more svg { width: 24px; height: 24px; }
.shm-avs { display: flex; }
.shm-avs .t-avatar.sm { width: 32px; height: 32px; margin-left: -8px; box-shadow: 0 0 0 2px var(--ds-ffffff, #fff); }
.shm-b { padding: 0 0 8px; display: flex; flex-direction: column; }
.shm-day { min-height: 48px; display: flex; align-items: center; gap: 12px; }
.shm-day > b { flex: 1; font: 600 15px/20px var(--font); }
.shm-day .sh-cell { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.shm-none { margin: 0 0 12px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.shm-tip { margin-top: 24px; padding: 16px; display: flex; gap: 12px; border-radius: 12px; background: var(--db-f5f5f5, rgb(245, 245, 245)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.shm-tip svg { width: 24px; height: 24px; flex: none; }
.shm-tip p { margin: 0; font: 400 15px/20px var(--font); }
.shm-tip a { color: var(--accent); text-decoration: none; }
.shm-bar { flex-wrap: nowrap; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 0 20px; scrollbar-width: none; }
.shm-bar::-webkit-scrollbar { display: none; }
.shm-bar > * { flex: none; }
.page-head .cl-lead { margin: 4px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.page-head .cl-lead a { color: var(--accent); text-decoration: none; }
.shm-day .chip { border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d6cdff, rgb(214, 205, 255)); } .shm-day .chip.off { box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
/* Phones (Fresha's Fichajes digitales): no lead, only the search and the round filter button,
   and the empty state without its card on a white page. */
@media (max-width: 767px) {
  .sec-app .page-head:has(+ .ts-toolbar) .page-lead { display: none; }
  .sec-app .ts-toolbar #range { display: none; }
  .sec-app .ts-toolbar .ts-search { flex: 1; width: auto; }
  .sec-app .team-page:has(.ts-toolbar) { background: var(--db-ffffff, #fff); }
  .sec-app .ts-empty { border: 0; box-shadow: none; background: none; }
}
/* The centre's cover photo (its first marketplace image) instead of the shop icon. */
.lo-pic, .lo-opic { position: relative; overflow: hidden; }
.lo-pic img, .lo-opic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* An option that is off: Fresha's grey circle with a dash (not a grey check). */
.sc-lines li.off::before { background: var(--db-767676, rgb(118, 118, 118)); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill-rule="evenodd" d="M16 5a11 11 0 1 0 0 22 11 11 0 0 0 0-22M3 16a13 13 0 1 1 26 0 13 13 0 0 1-26 0m7 0a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H11a1 1 0 0 1-1-1"/></svg>') center / 20px no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill-rule="evenodd" d="M16 5a11 11 0 1 0 0 22 11 11 0 0 0 0-22M3 16a13 13 0 1 1 26 0 13 13 0 0 1-26 0m7 0a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H11a1 1 0 0 1-1-1"/></svg>') center / 20px no-repeat; }
.sc-lines b, .sc-lines strong { font-weight: 600; }

/* Asignación dinámica (Fresha, measured): grey page, 696 px column of white cards (radius 25,
   1px ring, 40 px padding), 17 px semibold titles; radios 24 px violet with the period ones
   indented under the first strategy; the people picker with chips. */
.dy-page .sc-in { max-width: 696px; }
.dy-page.dy-wide .sc-in { max-width: 1340px; }
.dy-page #sc-form { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.dy-card { padding: 40px; border-radius: 25px; background: var(--db-ffffff, #fff); box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); }
.dy-card h3, .dy-h { margin: 0 0 16px; font: 600 17px/24px var(--font); }
.dy-card h3.dy-big { margin-bottom: 4px; font: 600 20px/28px var(--font); }
.dy-card hr { margin: 24px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.dy-lead { margin: -12px 0 20px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.dy-big + .dy-lead { margin-top: 0; }
.dy-help { margin: 8px 0 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.dy-row { display: flex; align-items: flex-start; gap: 24px; }
.dy-row > div { flex: 1; }
.dy-row h3 { margin-bottom: 4px; }
.dy-row .dy-lead { margin: 0; }
.dy-radios { display: flex; flex-direction: column; gap: 16px; }
.dy-radio { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.dy-radio input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); cursor: pointer; transition: box-shadow .15s; }
.dy-radio input:checked { box-shadow: inset 0 0 0 7px rgb(105, 80, 243); }
.dy-radio input:disabled { opacity: .45; cursor: default; }
.dy-radio span { display: flex; flex-direction: column; }
.dy-radio b { font: 400 15px/24px var(--font); }
.dy-radio small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.dy-sub { display: flex; flex-direction: column; gap: 16px; padding-left: 36px; }
.dy-sub[hidden] { display: none; }
.dy-link { margin-top: 24px; padding: 0; border: 0; background: none; color: var(--df-6950f3, rgb(105, 80, 243)); font: 400 15px/20px var(--font); cursor: pointer; }
.dy-link:hover { text-decoration: underline; }
.dy-locked .dy-radios, .dy-locked .sc-check { opacity: .45; }
.dy-ms { position: relative; }
.dy-ms-box { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 44px 6px 12px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 12px; box-sizing: border-box; cursor: text; }
.dy-ms.on .dy-ms-box { border-color: rgb(105, 80, 243); box-shadow: 0 0 0 1px rgb(105, 80, 243); }
.dy-ms-box input { flex: 1; min-width: 120px; height: 34px; border: 0; outline: none; font: 400 15px/20px var(--font); background: none; }
.dy-chips { display: contents; }
.dy-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); font: 400 13px/16px var(--font); }
.dy-chip i, .dy-list i { width: 22px; height: 22px; display: grid; place-items: center; flex: none; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--df-6950f3, rgb(105, 80, 243)); font: 600 10px/1 var(--font); font-style: normal; }
.dy-chip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.dy-chip button svg { width: 14px; height: 14px; }
.dy-clear, .dy-chev { position: absolute; top: 12px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; }
.dy-clear { right: 40px; } .dy-chev { right: 12px; }
.dy-clear svg, .dy-chev svg { width: 18px; height: 18px; }
.dy-list { position: absolute; z-index: 10; left: 0; right: 0; bottom: calc(100% + 6px); margin: 0; padding: 8px; list-style: none; max-height: 280px; overflow-y: auto; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)), 0 8px 24px rgba(19, 19, 19, .12); }
.dy-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font: 400 15px/20px var(--font); cursor: pointer; }
.dy-list li:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.dy-list li.none { color: var(--df-767676, rgb(118, 118, 118)); cursor: default; }
.dy-box { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
[aria-selected="true"] > .dy-box { background: rgb(105, 80, 243); box-shadow: none; color: #fff; }
.dy-box svg { width: 14px; height: 14px; }
/* Opciones avanzadas: the toolbar and the table of centres. */
.dy-tools { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 16px; background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.dy-search { width: 320px; max-width: 100%; }
.dy-sel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 400 15px/20px var(--font); }
.dy-sel[hidden] { display: none; }
.dy-table { margin-top: 24px; }
.dy-tr { display: grid; grid-template-columns: 40px minmax(180px, 1.2fr) minmax(200px, 1fr) minmax(220px, 1fr) minmax(200px, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.dy-th { font: 600 13px/16px var(--font); color: var(--ink); }
.dy-loc { display: flex; align-items: center; gap: 12px; font: 600 15px/20px var(--font); }
.dy-loc i { width: 40px; height: 40px; flex: none; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--df-6950f3, rgb(105, 80, 243)); }
.dy-loc img { width: 100%; height: 100%; object-fit: cover; }
.dy-loc svg { width: 20px; height: 20px; }
.dy-strat { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 12px; box-sizing: border-box; font: 400 15px/20px var(--font); }
.dy-strat > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-strat.off { background: var(--db-f5f5f5, rgb(245, 245, 245)); color: var(--df-a0a0a0, rgb(160, 160, 160)); }
.dy-strat .dy-link { margin: 0; flex: none; }
.dy-dlg { max-width: 560px; }
.dy-dlg .dy-radios { margin-top: 24px; }
@media (max-width: 767px) {
  .dy-card { padding: 24px 20px; }
  .dy-tr { grid-template-columns: 32px 1fr; }
  .dy-tr > span:nth-child(n+3) { grid-column: 2; }
  .dy-th > span:nth-child(n+3) { display: none; }
}
.sc-sheet.dy-wide .sc-in { max-width: 1340px; padding-left: 48px; padding-right: 48px; box-sizing: border-box; }
.sc-sheet.dy-wide #sc-form { display: block; margin-top: 32px; }
.sc-sheet.dy-wide .sc-in h1 { font-size: 40px; line-height: 44px; }
.dy-table .lp-sel:disabled, .dy-page .lp-sel:disabled { background: var(--db-f5f5f5, rgb(245, 245, 245)); color: var(--df-a0a0a0, rgb(160, 160, 160)); cursor: default; }
@media (max-width: 767px) { .sc-sheet.dy-wide .sc-in { padding-left: 16px; padding-right: 16px; } }
.sc-sheet.dy-wide .sc-in { width: 100%; }
.dy-page .bf-input:has(.lp-sel:disabled) { background: var(--db-f5f5f5, rgb(245, 245, 245)); }
.dy-page .bf-input:has(.lp-sel:disabled) .lp-sel { color: var(--df-a0a0a0, rgb(160, 160, 160)); }

/* Gestión de citas: Fresha's settings card — title and description on the left (520 px),
   «Editar» on the right, the summary 24 px below; rounded 25 px with a hairline ring. */
.setup-card.sc-sec { border-radius: 25px; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); }
.sc-sec .setup-card-head { align-items: flex-start; gap: 24px; }
.sc-sec-t { flex: 0 1 520px; min-width: 0; }
.sc-sec-t .lp-lead { margin-top: 4px; }
.sc-sec .sc-lines { margin-top: 24px; }

/* Disponibilidad › Plazo de reserva / Optimización del calendario (Fresha's card forms). */
.dy-page .sc-lead { font: 400 17px/24px var(--font); }
.dy-page .sc-lead .sc-more { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; white-space: nowrap; }
.av-page #sc-form { gap: 40px; }
.av-page #sc-form > .av-card { margin: 0; padding: 32px 40px; }
.dy-card h3.av-h { margin: 0; font: 600 24px/32px var(--font); }
.av-lead { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.av-card .av-f, .av-card .av-2 { margin-top: 24px; }
.av-card > .av-f:first-child { margin-top: 0; }
.av-2 { display: grid; grid-template-columns: 1fr 344px; gap: 12px; }
.av-2 .av-f { margin-top: 0; min-width: 0; }
.av-card .sc-check { margin-top: 24px; }
.dy-card h3.av-h2 { margin: 24px 0 0; font: 600 17px/24px var(--font); }
.av-sub { margin: 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.av-radios { margin-top: 16px; }
.av-edges { display: flex; flex-direction: column; gap: 16px; margin: -4px 0 0 36px; }
.av-page .bf-radio > span { padding: 2px 0; }
.av-edges[hidden] { display: none; }
.bf-radio > span > span:has(> .av-badge) { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.av-badge { display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 12px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--df-6950f3, rgb(105, 80, 243)); font: 500 13px/16px var(--font); vertical-align: middle; }
@media (max-width: 767px) {
  /* On phones Fresha drops the card: the sections sit on the page, split by a hairline. */
  .sec-app .setup-card.sc-sec { border-radius: 0; box-shadow: none; }
  /* Gestión de citas on a phone (Fresha at 402 px): 12 px under the title, 32 px to the
     first section, and 40 px either side of the line between sections. */
  .sec-app .setup-page:has(.sc-sec) .setup-head > div > p { margin-top: 12px; }
  .sec-app .setup-card.sc-sec:first-child { margin-top: 32px; }
  .sec-app .setup-card.sc-sec + .setup-card.sc-sec { margin-top: 40px; padding-top: 40px; }
}
/* Disponibilidad's forms on a tablet or phone (Fresha below 1024 px): white, an X top
   right, the sections without cards split by a hairline, and «Guardar» fixed across the
   bottom. Phones (below 768 px) also get the smaller title and the fields one per row. */
.av-x { display: none; }
@media (max-width: 1023px) {
  .sc-sheet.av-page, .av-page .sc-top { background: var(--db-ffffff, #fff); }
  .av-page .sc-top-t { flex: 1; min-width: 0; }
  .av-page .av-x { display: grid; place-items: center; margin-right: 0; }
  .av-page .sc-tbtns [data-close] { display: none; }
  .av-page .sc-tbtns #sc-save { position: fixed; left: 32px; right: 32px; bottom: 16px; z-index: 2; width: auto; }
  .av-page .sc-tbtns::before { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 80px; background: var(--db-ffffff, #fff); z-index: 1; }
  .av-page .sc-in { width: min(632px, 100% - 64px); padding-bottom: 96px; }
  .av-page #sc-form { gap: 40px; }
  .av-page #sc-form > .av-card { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .av-page #sc-form > .av-card + .av-card { padding-top: 40px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .dy-card h3.av-h { font: 600 20px/28px var(--font); }
}
@media (max-width: 767px) {
  .av-page .sc-top { padding: 0 8px 0 20px; }
  .av-page .sc-tbtns #sc-save { left: 20px; right: 20px; }
  .av-page .sc-in { width: auto; margin: 0 20px; padding-top: 0; }
  .av-page .sc-in h1 { font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
  .av-page .sc-lead { margin-top: 12px; font: 400 15px/20px var(--font); }
  .av-2 { grid-template-columns: 1fr; gap: 16px; }
}

/* Opciones de reserva's forms (Fresha): ticks 24 px apart in a white card, the portfolio
   picker under its tick, the grey note of Venta adicional and the bare text box. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bo-card > .sc-check:first-child, .bo-card .bo-fs > .sc-check:first-of-type { margin-top: 0; }
.bo-pf { margin: 8px 0 0 36px; display: flex; flex-direction: column; gap: 4px; }
.bo-pf[hidden] { display: none; }
.bo-pf-l { font: 600 15px/20px var(--font); }
.bo-pf-box { height: 48px; padding: 0 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15px; background: var(--db-ffffff, #fff); display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 15px/20px var(--font); color: var(--ink); cursor: pointer; text-align: left; }
.bo-pf-box:hover { border-color: var(--de-a6a6a6, rgb(166, 166, 166)); }
.bo-pf-box b { font-weight: 500; }
.bo-note { margin-top: 24px; padding: 18px 20px; border-radius: 15px; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 400 15px/20px var(--font); }
.bo-note a { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.bo-area { display: block; width: 100%; height: 120px; margin-top: 0; box-sizing: border-box; }
.bo-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.bo-fs .sc-check + .sc-check { margin-top: 16px; }
.bo-list { margin: 12px 0 0 36px; }
.bo-list[hidden] { display: none; }
.bo-list textarea { display: block; width: 100%; height: 120px; box-sizing: border-box; }
.bo-list .lp-help { margin: 4px 0 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* «Elige los porfolios…»: search, «Seleccionar todo» and the team, as Fresha. */
.bo-picker .sc-in { max-width: 696px; }
.bo-search { margin-top: 32px; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.bo-search svg { width: 20px; height: 20px; color: var(--df-767676, rgb(118, 118, 118)); flex: none; }
.bo-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 15px/20px var(--font); }
.bo-prow { display: flex; align-items: center; gap: 12px; min-height: 80px; cursor: pointer; font: 600 15px/20px var(--font); }
.bo-prow[hidden] { display: none; }
.bo-prow .t-check { flex: none; border-radius: 8px; }
.bo-all { min-height: 56px; margin-top: 24px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
#prows .bo-prow + .bo-prow { border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.bo-av { width: 56px; height: 56px; flex: none; font: 600 16px/24px var(--font); }
.bo-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
@media (max-width: 1023px) { .bo-picker .sc-in h1 { font-size: 28px; line-height: 36px; } }
/* A tick that is on and locked (Fresha: «valoraciones» while the profiles are shown): grey box,
   grey mark, the text unchanged. */
.bo-card .t-check:disabled { border-color: var(--de-d3d3d3, rgb(211, 211, 211)); background-color: var(--db-f2f2f2, rgb(242, 242, 242)); cursor: default; }
.bo-card .t-check:disabled:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3.5 8.5 3 3 6-7' stroke='%23acacac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bo-card .sc-check:has(.t-check:disabled) { cursor: default; }
/* Optimización › «Permitir huecos libres de al menos» under «Reduce los huecos libres». */
.av-gap { margin: -4px 0 0 36px; }
.av-gap[hidden] { display: none; }
.av-gap .av-f { margin-top: 0; }
/* Hojas de horas' welcome on tablets and phones: the green glow stays inside the page. */
@media (max-width: 1023px) {
  .ts-promo { overflow: hidden; }
  .ts-promo > * { min-width: 0; }
}

/* Ajustes › Ventas › Tarjetas regalo (Fresha, measured at 1470): the page is one card with
   the design under a line; the window is five cards — the on/off one with its green or grey
   pill, value rows (box + 48 px bin, 20 px apart), «Añadir un valor», the custom range in
   two columns, the expiry help 4 px under its box and the design switch row. */
.sc-sec .gc-hr { margin: 24px 0; }
.sc-sec .gc-hr + .bd-h2 + .bd-grid { margin-top: 24px; grid-template-columns: 1fr; }
.gc-card .gc-on { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; cursor: pointer; }
.gc-on > span { display: flex; flex-direction: column; min-width: 0; }
.gc-t { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.gc-t b { font: 600 24px/32px var(--font); }
.gc-on small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.gc-on .switch { margin-top: 4px; }
.gc-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-767676, rgb(118, 118, 118)); font: 500 13px/16px var(--font); }
.gc-pill.on { background: var(--db-edfbe9, rgb(237, 251, 233)); color: var(--df-1f8900, rgb(31, 137, 0)); }
.gc-card .gc-f { margin-top: 24px; }
.gc-card .bf-input { border-radius: 15px; }
.gc-card .bf-input.bad { box-shadow: none; border-color: var(--de-d4163a, rgb(212, 22, 58)); }
.gc-in .gc-cur { padding-left: 16px; color: var(--df-767676, rgb(118, 118, 118)); font: 400 15px/20px var(--font); }
.gc-in input { padding-left: 16px; }
.gc-in input::-webkit-inner-spin-button, .gc-in input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gc-in input[type=number] { -moz-appearance: textfield; }
.gc-vals { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.gc-vals:empty { display: none; }
.gc-row { display: flex; flex-direction: column; gap: 4px; }
.gc-rin { display: grid; grid-template-columns: 1fr 48px; gap: 8px; align-items: center; }
.gc-rm { width: 48px; height: 48px; border-radius: 999px; }
.gc-rm svg { width: 24px; height: 24px; }
.gc-row .bf-err, .gc-f .bf-err { margin-top: 1px; }
.gc-card .gc-add { margin-top: 24px; height: 36px; padding: 0 16px; gap: 6px; font: 500 15px/20px var(--font); }
.gc-add svg { width: 20px; height: 20px; }
.gc-card .gc-custom { margin-top: 40px; }
/* At 5 values Fresha drops the button and leaves 64 px to the tick. */
.gc-add.gc-hide { display: none; }
.gc-card .gc-add.gc-hide + .gc-custom { margin-top: 64px; }
.gc-custom small[hidden] { display: none; }
.gc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.gc-card .gc-2 .gc-f { margin-top: 0; }
.gc-2[hidden] { display: none; }
.gc-help { margin: 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.gc-sw { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 400 15px/20px var(--font); cursor: pointer; }
@media (max-width: 767px) {
  .gc-t b { font: 600 20px/28px var(--font); }
  .gc-2 { grid-template-columns: 1fr; gap: 24px; }
}
.gc-opts .gc-dots { display: none; }
@media (max-width: 767px) {
  .sec-app .gc-opts { width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; box-shadow: none; background: none; }
  .sec-app .gc-opts > span:not(.gc-dots) { display: none; }
  .sec-app .gc-opts .gc-dots { display: flex; }
  .gc-dots svg { width: 24px; height: 24px; }
}
@media (max-width: 767px) {
  /* Fresha: the three dots wear a ring only beside «Añadir»; alone they are bare. */
  .sec-app :is(.page-actions, .acts) > .tbtn:not(.dark):only-child { border-color: transparent; background: none; }
}

/* «Establecer el orden de los recursos» (Fresha, measured at 1470): grey page, the lead 17/24,
   «Tipos y recursos» 40 px below, then one white card (20 px padding) with the types and
   their resources as 80 px cards 8 px apart. */
.rs-order .sc-lead { font: 400 17px/24px var(--font); }
.rs-order #sc-form { margin-top: 40px; }
.rs-mode { display: flex; width: fit-content; height: 36px; margin: 0 !important; padding: 0 15px; gap: 8px; }
.rs-mode svg { width: 20px; height: 20px; }
.rs-card { margin-top: 24px; padding: 20px; border: 0 !important; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; display: flex; flex-direction: column; gap: 24px; }
.rs-grp { background: var(--db-ffffff, #fff); }
.rs-gh { display: flex; align-items: center; gap: 8px; cursor: grab; }
.rs-gh b { font: 600 20px/28px var(--font); }
.rs-grip { display: flex; flex: none; width: 24px; height: 24px; color: var(--ink); }
.rs-grip svg { width: 24px; height: 24px; }
.rs-items { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.rs-items:empty { display: none; }
.only-types .rs-items { display: none; }
.rs-item { display: flex; align-items: center; gap: 12px; min-height: 80px; box-sizing: border-box; padding: 20px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; cursor: grab; }
.rs-item .rs-ic { width: 30px; height: 30px; border-radius: 10px; margin-left: 1px; }
.rs-item .rs-ic svg { width: 18px; height: 18px; }
.rs-t { display: flex; flex-direction: column; min-width: 0; }
.rs-t b { font: 600 15px/20px var(--font); }
.rs-t small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.rs-item.is-dragging, .rs-grp.is-dragging { box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px, rgba(19, 19, 19, .12) 0 4px 20px; }
@media (max-width: 599px) { .rs-card { padding: 16px; } .rs-item { padding: 16px; } }
/* Razones de cancelación (Fresha): white 81 px cards, 20 px padding, 12 px apart, 24 px under the header. */
.sc-list:has(> .sc-reason) { gap: 12px; margin-top: 24px; }
.sc-row.sc-reason { min-height: 81px; padding: 20px; border-radius: 20px; box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; }
.sc-reason .sc-lock svg { width: 24px; height: 24px; }
/* Estados de las citas (Fresha): 88 px cards 12 px apart, a 5 px colour stripe on the left,
   the icon (24 px) in a 46 px rounded box and a 24 px lock. */
.sc-list:has(> .sc-st) { gap: 12px; margin-top: 24px; }
.sc-row.sc-st { position: relative; overflow: hidden; min-height: 88px; padding: 20px; gap: 12px; border: 0; border-radius: 20px; box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; }
.sc-row.sc-st::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.sc-row.sc-st > [data-icon]:first-child { width: 46px; height: 46px; margin: 1px; flex: none; display: grid; place-items: center; border-radius: 15px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.sc-row.sc-st > [data-icon]:first-child svg { width: 24px; height: 24px; }
.sc-st .sc-lock svg { width: 24px; height: 24px; }
/* Estado de cita (Fresha): name row like the resource type, 15/600 colour title, 32 px circles
   in 13 columns, the icon panel 9 across under the button. */
.st-form .st-row { margin-bottom: 0; margin-top: 4px; }
.st-form .st-h { margin: 24px 0 0; font: 600 15px/20px var(--font); }
.st-form .sc-colors { margin-top: 4px; grid-template-columns: repeat(13, 32px); justify-content: space-between; row-gap: 16px; column-gap: 0; }
.st-form .sc-color span { width: 32px; height: 32px; }
.st-form .sc-color input:checked + span { box-shadow: 0 0 0 2px var(--ds-ffffff, #fff), 0 0 0 4px var(--accent); }
.st-grid { grid-template-columns: repeat(9, 36px); gap: 2px 3px; padding: 16px; border-radius: 20px; }
.st-grid svg { width: 20px; height: 20px; }
@media (max-width: 599px) { .st-form .sc-colors { grid-template-columns: repeat(7, 32px); } .st-grid { grid-template-columns: repeat(7, 36px); } }
.st-form .lp-lab label { font-weight: 600; }
/* Fechas de cierre (Fresha): info with its icon, the date buttons with a chevron, centres with
   photo and a line between them. */
.cp-form .sc-lead { font: 400 17px/24px var(--font); }
.cp-info { display: flex; align-items: center; gap: 8px; margin: 0; }
.cp-info svg { width: 20px; height: 20px; flex: none; }
.cp-date { width: 100%; height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; 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); color: var(--ink); cursor: pointer; text-align: left; }
.cp-date.empty span { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.cp-date:hover { border-color: var(--de-a0a0a0, rgb(160, 160, 160)); }
.cp-date:focus-visible, .cp-date[aria-expanded="true"] { border-color: var(--accent); outline: 0; }
.cp-date.bad { border-color: var(--de-d4163a, rgb(212, 22, 58)); }
.cp-date svg { width: 20px; height: 20px; flex: none; }
.cp-err { margin: 4px 0 0; font: 400 13px/16px var(--font); color: var(--df-d4163a, rgb(212, 22, 58)); }
.cp-locs { margin-top: 16px; display: flex; flex-direction: column; }
.cp-all { padding-bottom: 12px; font-weight: 600; }
.cp-loc { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.cp-loc::before { content: ""; position: absolute; left: 36px; right: 0; top: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.cp-pic { width: 48px; height: 48px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--db-f2f2f2, rgb(242, 242, 242)); font: 600 17px/24px var(--font); }
.cp-pic img { width: 100%; height: 100%; object-fit: cover; }
.cp-loc > span:last-child { font: 600 15px/20px var(--font); }
/* Fresha's empty Fechas de cierre: a 696×360 white card, the 64 px crossed calendar, 20/28 title, 15/20 text 512 wide. */
.cp-empty { min-height: 360px; box-sizing: border-box; margin-top: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; }
.cp-empty .cp-ill { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(160deg, var(--db-c4b5fd, rgb(196, 181, 253)), rgb(124, 92, 246)); color: #fff; }
.cp-empty .cp-ill svg { width: 34px; height: 34px; }
.cp-empty b { margin-top: 16px; font: 600 20px/28px var(--font); }
.cp-empty p { margin: 4px 0 0; max-width: 512px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.setup-head.wide > div:first-child { max-width: none; } /* Gestión de citas: the lead takes all the room next to the buttons (Fresha) */
/* Phones (Fresha at 402): the rows lose their card, «Acciones» becomes a ⋮; Estados keep a
   5×64 rounded colour bar, the icon on a grey 48 px square and a line under the text;
   Recursos keep their cards. */
@media (max-width: 767px) {
  .sec-app .sc-row [data-acts] { width: 36px; height: 36px; padding: 0; border: 0; background: none; font-size: 0; gap: 0; justify-content: center; }
  .sec-app .sc-row [data-acts] > * { display: none; }
  .sec-app .sc-row [data-acts]::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; }
  .sec-app .sc-list:has(> .sc-st), .sec-app .sc-list:has(> .sc-reason) { gap: 0; margin-top: 16px; }
  .sec-app .sc-row.sc-st, .sec-app .sc-row.sc-reason { min-height: 81px; padding: 16px 0; gap: 12px; border-radius: 0; box-shadow: none; overflow: visible; }
  .sec-app .sc-row.sc-st { padding-left: 17px; }
  .sec-app .sc-row.sc-st::before { top: 8px; bottom: auto; height: 64px; width: 5px; border-radius: 6px; }
  .sec-app .sc-row.sc-st > [data-icon]:first-child { width: 48px; height: 48px; margin: 0; background: var(--db-f5f5f5, rgb(245, 245, 245)); box-shadow: none; border-radius: 15px; }
  .sec-app .sc-row.sc-st + .sc-row.sc-st::after { content: ""; position: absolute; top: 0; left: 77px; right: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .sec-app .sc-row.sc-reason + .sc-row.sc-reason { border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .sec-app .sc-list:has(> .sc-row.res) { gap: 12px; }
  .sec-app .sc-row.res { min-height: 88px; padding: 20px; border-radius: 20px; box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; background: var(--db-ffffff, #fff); }
}
.sc-filt { display: none; }
@media (max-width: 767px) {
  .sec-app .sc-filters { flex-wrap: nowrap; margin: 24px 0 24px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .sec-app .sc-filters .lo-search { flex: 1; width: auto; height: 44px; }
  .sec-app .sc-filters .sc-locsel { display: none; }
  .sec-app .sc-filt { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
  .sec-app .sc-filt svg { width: 20px; height: 20px; }
}
.rf-sheet .sc-in h1 { font: 600 28px/36px var(--font); }
.rf-locs { display: flex; flex-direction: column; margin-top: 16px; }
.rf-loc { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0; border: 0; background: none; font: 400 17px/24px var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.rf-loc > span:not(.cp-pic) { flex: 1; }
.rf-loc svg { width: 24px; height: 24px; }
.cp-pic.sm { width: 32px; height: 32px; border-radius: 8px; font-size: 15px; }
/* Phones: an «Añadir» that opens a menu (Recursos) shows Fresha's plus in a circle. */
@media (max-width: 767px) {
  .sec-app .setup-head > .lo-actions > .tbtn.dark:has([data-icon="chevron-down"])::before {
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></svg>') center / 20px no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></svg>') center / 20px no-repeat; }
}
@media (max-width: 767px) {
  .sec-app .setup-head.wide { gap: 12px; }
  .sec-app .sc-list:has(> .sc-st), .sec-app .sc-list:has(> .sc-reason) { margin-top: 24px; }
}
@media (min-width: 768px) and (max-width: 899px) { .setup-head.wide { flex-direction: row; } }
/* Ajustes de la lista de espera (Fresha): grey page, the white card (40 px padding), titles
   24/32, the type as two choice tiles. */
.wl-form .sc-lead { font: 400 17px/24px var(--font); }
.wl-form .sc-in #sc-form.sc-card { padding: 32px 40px 40px; }
.wl-form .sc-h3 { margin: 32px 0 0; font: 600 24px/32px var(--font); }
.wl-form .sc-card > .sc-h3:first-child, .wl-form #prio > .sc-h3:first-child { margin-top: 0; }
.wl-form #prio { margin-top: 32px; }
.wl-form .sc-h3 + .bf-lead { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.wl-tiles { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.wl-tile { position: relative; display: flex; align-items: center; gap: 12px; min-height: 80px; box-sizing: border-box; padding: 20px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; cursor: pointer; }
.wl-tile:has(input:checked) { box-shadow: rgb(105, 80, 243) 0 0 0 2px; }
.wl-tile input { position: absolute; opacity: 0; pointer-events: none; }
.wl-tile svg { width: 32px; height: 32px; flex: none; }
.wl-tile b { display: block; font: 600 15px/20px var(--font); }
.wl-tile small { display: block; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
@media (max-width: 599px) { .wl-form .sc-in #sc-form.sc-card { padding: 24px 20px; } .wl-form .sc-h3 { font-size: 20px; line-height: 28px; } }
.wl-form .sc-in #sc-form.sc-card { padding: 0; background: none; box-shadow: none; display: flex; flex-direction: column; gap: 24px; }
.wl-card { padding: 32px 40px 40px; border-radius: 25px; background: var(--db-ffffff, #fff); box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); }
.wl-card:last-child { padding: 24px 40px; }
.wl-form a { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.wl-info { display: flex; gap: 8px; align-items: flex-start; }
.wl-info svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.wl-form #when .sc-radios { margin: 16px 0 0 32px; }
@media (max-width: 599px) { .wl-card, .wl-card:last-child { padding: 24px 20px; } }
.wl-card > :first-child { margin-top: 0 !important; }
/* Tipos de horario no disponible (Fresha): 88 px cards 12 px apart, the emoji on a 48 px grey
   square, name 15/600 and «1 h • No remunerado» 15/400. Phones: rows without card, ⋮. */
.sc-list:has(> .sc-row > .sc-emoji) { gap: 12px; margin-top: 24px; }
.sc-row:has(> .sc-emoji) { min-height: 88px; padding: 20px; gap: 12px; border-radius: 20px; box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; }
.sc-row > .sc-emoji { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 15px; background: var(--db-131313-5, rgba(19, 19, 19, .05)); font-size: 24px; }
.sc-row:has(> .sc-emoji) .sc-rt small { font: 400 15px/20px var(--font); }
@media (max-width: 767px) {
  .sec-app .sc-list:has(> .sc-row > .sc-emoji) { gap: 0; }
  .sec-app .sc-row:has(> .sc-emoji) { min-height: 0; padding: 16px 0; border-radius: 0; box-shadow: none; }
}
.sc-cardform .sc-typerow .sc-emojibtn { border-radius: 15px; }
.sc-typerow { gap: 8px; align-items: center; } .sc-typerow > .bf-input { flex: 1; } .sc-emojibtn { display: grid; place-items: center; } .sc-emojibtn svg { width: 24px; height: 24px; }
/* Fresha's callout under the tiles when «Tú eliges» is chosen: pageFaded grey, 1 px inset ring, 15 px radius, 16/20/16/12 padding. */
.wl-form .wl-info { margin-top: 12px; padding: 16px 20px 16px 12px; border: 0; border-radius: 15px; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 400 15px/20px var(--font); color: var(--ink); }
.wl-form .wl-info[hidden] { display: none; }
.wl-form .wl-info svg { width: 24px; height: 24px; margin-top: 0; }
.wl-form .wl-info span { padding: 2px 0; }
/* Lista de espera (Fresha): «Notificaciones al cliente» in the Ajustes card, 40 px under a line. */
.wl-sep { margin: 40px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.wl-notif .bd-v a { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
/* Fresha's emoji picker (emoji-mart): white, 20 px radius and Fresha's popover shadow. */
.emo-pop { position: fixed; z-index: 10060; border-radius: 20px; overflow: hidden; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px, rgba(19, 19, 19, .04) 0 1px 8px 0, rgba(19, 19, 19, .12) 0 4px 20px 0; animation: fs-in .12s ease-out; }
.emo-pop em-emoji-picker { --border-radius: 20px; --shadow: none; --rgb-accent: 105, 80, 243; height: 435px; }
@media (max-width: 599px) { .emo-pop em-emoji-picker { width: calc(100vw - 16px); } }
.ts-log-emo { margin-right: 8px; }

/* ---- Ayuda Partners (fichaje digital, 2026-11-05): measured in Fresha › Equipo › Fichajes digitales ----
   - Below 768 px Fresha has no table but a list: avatar 62 px, name 15/600, location and
     «30 minutos • Salida» in grey, «Salida» green and an open record's «Entrada» purple, no date.
   - From 768 to 1023 px the six columns stay, without fixed widths, the text wrapping.
   - «Añadir una pausa» of an open record: back arrow and title inside the record, 56 px tiles
     with a 15 px radius, the subtitle in ink. */
.ts-mlist { display: none; list-style: none; margin: 0; padding: 0; }
.ts-mlist li { min-height: 97px; display: flex; align-items: center; gap: 13px; cursor: pointer; }
.ts-mlist li > div { min-width: 0; flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.ts-mlist li:last-child > div { border-bottom: 0; }
.ts-mlist .t-avatar.ts-av { width: 62px; height: 62px; box-sizing: border-box; border: 0; box-shadow: 0 0 0 2px var(--ds-c3e9fb, #c3e9fb); font-size: 20px; }
.ts-mlist .ts-who-name { font-weight: 600; }
.ts-ml-state { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ts-ml-state .out { color: var(--df-1f8900, rgb(31, 137, 0)); }
.ts-ml-state .in { color: var(--df-6950f3, rgb(105, 80, 243)); }
@media (max-width: 767px) {
  .ts-table { display: none; }
  .ts-mlist { display: block; margin-top: 36px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ts-table { table-layout: auto; width: 100%; }
  .ts-table th.c-who, .ts-table th.c-date, .ts-table th.c-in, .ts-table th.c-br, .ts-table th.c-hours, .ts-table th.c-state { width: auto; }
  .ts-table th.c-br, .ts-table td:nth-child(4), .ts-table th.c-state, .ts-table td:nth-child(6) { display: table-cell; }
  .ts-table th, .ts-table td { white-space: normal; }
  .ts-table .ts-who-name, .ts-table .ts-who-loc { white-space: normal; }
  /* Fresha keeps the toolbar on one row; the sort pill runs past the right edge. */
  .t-toolbar.ts-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .t-toolbar.ts-toolbar .left, .t-toolbar.ts-toolbar .right { flex: none; flex-wrap: nowrap; }
}
.ts-body .ts-qback { position: static; margin: -8px 0 0 13px; }
.ts-body h2#dr-title.ts-qtitle { margin: 13px 0 0 21px; font: 600 28px/36px var(--font); }
.ts-qtitle + .ts-types { margin-top: 24px; margin-left: 5px; }
.ts-qtitle + .ts-types .ts-type .emo { border-radius: 15px; }
.ts-qtitle + .ts-types .ts-type small { color: var(--df-0d0d0d, rgb(13, 13, 13)); }
/* «Salario por hora», «Salario por hora extra», «Horario laboral habitual» (member form): the «€»
   (before) and «horas» (after) inside the field's border, as Fresha. */
.ts-money { height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff); }
.ts-money:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ts-money > span { flex: none; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.ts-money > .ti { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; box-shadow: none; outline: 0; background: none; }
/* The member's drawer (Equipo › Miembros del equipo › a member), measured in Fresha at 1440: 801 px,
   a 321 px left column (name 20/600, «Acciones» pill, 96 px avatar, the yellow invitation notice,
   the four tabs 44 px high, the chosen one lavender) and the tab on the right (title 28/600,
   sections 20/600, sub-titles 17/600, label 15/500 over a grey 15/400 value, two 200 px columns). */
.drawer.mbr-drawer { width: 801px; max-width: 100vw; padding: 0; }
.mbr-cols { height: 100%; display: flex; min-height: 0; }
.mbr-side { width: 321px; flex: none; box-sizing: border-box; padding: 40px 32px 24px; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); overflow-y: auto; }
.mbr-head { display: flex; justify-content: space-between; gap: 12px; }
.mbr-name { margin: 12px 0 8px; font: 600 20px/28px var(--font); word-break: break-word; }
.mbr-acts { height: 36px; padding: 0 16px; }
.mbr-av { width: 96px; height: 96px; flex: none; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--de-ffffff, #fff); box-shadow: 0 0 0 2px var(--ds-c3e9fb, #c3e9fb); display: grid; place-items: center; background: var(--db-ebf8fe, rgb(235, 248, 254)); color: var(--df-0075a8, rgb(0, 117, 168)); font: 600 28px/40px var(--font); overflow: hidden; }
.mbr-av img { width: 100%; height: 100%; object-fit: cover; }
.mbr-invite { margin-top: 20px; padding: 16px 20px; border-radius: 15px; background: var(--db-fff7db, rgb(255, 247, 219)); box-shadow: inset 0 0 0 1px var(--ds-ffefb2, rgb(255, 239, 178)); }
.mbr-invite p { margin: 0; padding: 2px 0; font: 400 15px/20px var(--font); }
.mbr-invite-btn { margin-top: 10px; padding: 0; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font: 500 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.mbr-invite-btn svg { width: 18px; height: 18px; }
.mbr-side .mbr-hr { margin: 32px -32px 24px; }
.mbr-hr { height: 0; margin: 24px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.mbr-nav { list-style: none; margin: 0 -16px; padding: 0; }
.mbr-nav li { height: 44px; box-sizing: border-box; padding: 12px 16px; border-radius: 15px; font: 500 15px/20px var(--font); cursor: pointer; }
.mbr-nav li:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.mbr-nav li.on { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.mbr-main { flex: 1; min-width: 0; box-sizing: border-box; padding: 32px 32px 48px; overflow-y: auto; }
.mbr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mbr-title { margin: 0; font: 600 28px/36px var(--font); }
.mbr-top .tbtn { gap: 6px; }
.mbr-h2 { margin: 32px 0 0; font: 600 20px/28px var(--font); }
.mbr-h3 { margin: 16px 0 0; font: 600 17px/24px var(--font); }
.mbr-top + .mbr-h3 { margin-top: 32px; }
.mbr-hr + .mbr-h2, .mbr-hr + .mbr-h3, .mbr-hr + .mbr-row { margin-top: 0; }
.mbr-row { margin-top: 32px; display: flex; align-items: center; gap: 12px; }
.mbr-row .mbr-h2 { margin: 0; }
.mbr-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 16px; }
.mbr-kv p, .mbr-locs p { margin: 0; }
.mbr-kv .k, .mbr-locs .k { font: 500 15px/20px var(--font); }
.mbr-kv .v, .mbr-locs .v { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); word-break: break-word; }
.mbr-locs { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mbr-locs li { display: flex; gap: 12px; }
.mbr-loc-ph { width: 48px; height: 48px; flex: none; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); overflow: hidden; }
.mbr-loc-ph img { width: 100%; height: 100%; object-fit: cover; }
.mbr-locs .k { font-weight: 600; }
.mbr-dot { width: 12px; height: 12px; margin-right: 6px; display: inline-block; vertical-align: -1px; border-radius: 999px; }
.mbr-top + .mbr-h2 { margin-top: 32px; }
.mbr-loading { padding: 48px 0; display: grid; place-items: center; }
.mbr-perf-h { margin-top: 32px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mbr-perf-t { margin: 0; }
.mbr-link { font: 400 14px/20px var(--font); color: var(--accent); text-decoration: none; }
.mbr-link:hover { text-decoration: underline; }
.mbr-card { margin-top: 16px; padding: 24px; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; }
.mbr-card h4 { margin: 0; display: flex; align-items: center; gap: 6px; font: 600 17px/24px var(--font); }
.mbr-i svg { width: 16px; height: 16px; color: var(--df-767676, rgb(118, 118, 118)); }
.mbr-big { margin: 4px 0 0; font: 600 28px/36px var(--font); }
.mbr-vs { margin: 8px 0 0; display: flex; align-items: center; gap: 8px; font: 400 12px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.mbr-ch { display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); font: 500 12px/16px var(--font); color: var(--ink); }
.mbr-ch svg { width: 12px; height: 12px; }
.mbr-ch.good { color: var(--df-1f8900, rgb(31, 137, 0)); } .mbr-ch.bad { color: rgb(210, 40, 40); }
.mbr-cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.mbr-ch { white-space: nowrap; flex: none; }
.mbr-cards2 .mbr-vs { flex-direction: column; align-items: flex-start; gap: 6px; }
.mbr-chart { display: block; width: 100%; height: auto; margin-top: 16px; }
.mbr-chart text { font: 400 11px var(--font); fill: var(--df-767676, rgb(118, 118, 118)); }
.mbr-chart line.g { stroke: var(--df-e5e5e5, rgb(229, 229, 229)); stroke-dasharray: 4 4; }
.mbr-chart line.a { stroke: var(--df-bfbfbf, rgb(191, 191, 191)); }
.mbr-chart .l { fill: none; stroke: var(--accent); stroke-width: 2; }
tr[data-member] { cursor: pointer; }
.mbr-sec { margin-top: 32px; display: flex; align-items: center; gap: 12px; }
.mbr-sec .mbr-h2 { margin: 0; }
.mbr-hr + .mbr-sec, .mbr-top + .mbr-sec { margin-top: 0; }
.mbr-top + .mbr-sec { margin-top: 32px; }
.mbr-edit-s { display: none; margin-left: auto; font: 500 15px/20px var(--font); color: var(--accent); text-decoration: none; }
/* Below 1024 px Fresha shows the member full screen: head on top (name and «Acciones» left, the
   avatar right), the notice full width, the four tabs in a row (15/600, the chosen one underlined),
   then one column without the tab's title, each section with its own «Editar». */
@media (max-width: 1023px) {
  .drawer.mbr-drawer { width: 100%; }
  .mbr-cols { flex-direction: column; overflow-y: auto; }
  .mbr-side { width: 100%; padding: 72px 32px 0; border-right: 0; overflow: visible; }
  .mbr-name { margin-top: 24px; }
  .mbr-side .mbr-hr { display: none; }
  .mbr-nav { margin: 24px -32px 0; padding: 0 32px; display: flex; gap: 24px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); overflow-x: auto; scrollbar-width: none; }
  .mbr-nav li { height: 52px; padding: 16px 0; border-radius: 0; font-weight: 600; white-space: nowrap; background: none !important; box-shadow: none; }
  .mbr-nav li.on { box-shadow: inset 0 -2px 0 var(--ink); }
  .mbr-main { overflow: visible; padding-top: 0; }
  .mbr-top { display: none; }
  .mbr-top + .mbr-sec, .mbr-top + .mbr-perf-h { margin-top: 32px; }
  .mbr-edit-s { display: inline; }
  .mbr-grid { grid-template-columns: minmax(0, 1fr); }
  .drawer.mbr-drawer > .drawer-x { position: absolute; top: 12px; right: 16px; left: auto; z-index: 2; width: 40px; height: 40px; background: none; box-shadow: none; }
}
/* Phones (Fresha at 402): 20 px sides, «Resumen» on the grey page with white cards, no «i»,
   the chart with only its first and last day. */
@media (max-width: 767px) {
  .mbr-side { padding: 72px 20px 0; }
  .mbr-nav { margin: 24px -20px 0; padding: 0 20px; }
  .mbr-main { padding: 0 20px 40px; }
  .mbr-main.mbr-tab-overview { background: var(--db-f5f5f5, rgb(245, 245, 245)); flex: 1; }
  .mbr-i { display: none; }
  .mbr-chart text.mid { display: none; }
}
/* Facturación › Suscripciones (Fresha at 1470, new account): the banner with tiles, the bold
   «Plan» and «Complementos» titles and the rows with a 56 px icon. */
.bl-hero { position: relative; display: flex; min-height: 216px; margin-top: 24px; overflow: hidden; border-radius: 16px; background: linear-gradient(100deg, var(--db-e2e2e2, rgb(226, 226, 226)), var(--db-f3f3f3, rgb(243, 243, 243))); }
.bl-hero-t { position: relative; z-index: 1; box-sizing: border-box; width: min(480px, 100%); padding: 32px; }
.bl-hero h3 { max-width: 400px; margin: 0 0 32px; font: 600 24px/32px var(--font); color: var(--ink); }
.bl-more { display: inline-flex; align-items: center; gap: 8px; font: 600 17px/24px var(--font); color: var(--ink); cursor: pointer; }
.bl-more [data-icon], .bl-more svg { width: 24px; height: 24px; }
.bl-tiles { position: absolute; top: 0; right: 0; bottom: 0; width: 216px; }
.bl-tile { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; color: #fff; transform: rotate(-14deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.bl-tile svg { width: 32px; height: 32px; }
.bl-tile.t1 { top: -22px; left: 54px; background: rgb(84, 170, 40); }
.bl-tile.t2 { top: 50px; left: 34px; background: var(--db-ffffff, #fff); color: rgb(66, 133, 244); }
.bl-tile.t3 { top: 28px; left: 124px; background: var(--db-ffffff, #fff); color: rgb(220, 60, 140); }
.bl-tile.t4 { top: 128px; left: 16px; background: linear-gradient(135deg, rgb(50, 110, 240), rgb(40, 70, 200)); }
.bl-tile.t5 { top: 112px; left: 104px; background: linear-gradient(135deg, rgb(200, 90, 230), rgb(120, 70, 220)); }
.bl-tile.t6 { top: 150px; left: 186px; background: var(--db-ffffff, #fff); color: rgb(240, 120, 30); }
.bl-label { margin: 24px 0 8px; font: 600 15px/20px var(--font); color: var(--ink); }
.pt-banner.bl-trial { margin: 0 0 8px; }
.bl-box { display: flex; align-items: center; gap: 12px; padding: 20px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; }
.bl-box-t { flex: 1; min-width: 0; }
.bl-box-t b { display: block; font: 600 15px/20px var(--font); }
.bl-box-t p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.bl-ic { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; }
.bl-ic svg { width: 32px; height: 32px; }
.bl-ic-plan { background: radial-gradient(circle at 85% 90%, var(--db-ffbef0, rgb(255, 190, 240)) 0%, transparent 35%), linear-gradient(135deg, rgb(95, 30, 225), rgb(214, 30, 214)); }
.bl-ic-add { background: linear-gradient(135deg, rgb(95, 110, 240), rgb(120, 90, 230)); }
@media (max-width: 767px) { .bl-tiles { display: none; } .bl-hero { min-height: 0; } .bl-hero-t { width: 100%; } .bl-box { flex-wrap: wrap; } .bl-box-t { flex-basis: calc(100% - 68px); } .bl-box .tbtn { margin-left: 68px; } }

/* Ayuda Partners (2026-11-06): the location forms as in Fresha (white page, no cards). */
.lc, .lc .sf-top { background: var(--db-ffffff, #fff); }
.lc .sf-top { padding: 0 max(32px, calc((100% - 1376px) / 2)); }
.lc .sf-top .tbtn { height: 48px; padding: 0 19px; border-color: var(--de-d3d3d3, rgb(211, 211, 211)); font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.lc .sf-top .tbtn.dark { border-color: var(--de-0d0d0d, rgb(13, 13, 13)); }
.lc .lc-x { display: none; }
.lc .sf-wrap { width: min(696px, 100% - 136px); }
.lc.lc-wide .sf-wrap { width: min(960px, 100% - 64px); }
.lc .bf-form { gap: 0; }
.lc .bf-card { padding: 0; border-radius: 0; background: none; }
.lc .bf-card > .bf-field:first-child { margin-top: 0; }
.lc .bf-field label { color: var(--df-0d0d0d, rgb(13, 13, 13)); }
.lc .bf-input { flex: none; border-radius: 15.24px; }
.lc .bf-input input { border-radius: 15.24px; }
.lc .bf-input input::placeholder, .lc .lc-area::placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.lc .bf-input:focus-within, .lc .lc-area:focus { border-color: rgb(105, 80, 243); box-shadow: none; outline: none; }
.lc .lp-count { font: 400 15px/20px var(--font); }
.lc .lp-lab { align-items: flex-start; }
/* Selects, and locked boxes (the prefix and the country). */
.lc-sel { position: relative; }
.lc-sel select { width: 100%; height: 100%; padding: 0 45px 0 16px; border: 0; border-radius: 15.24px; background: none; appearance: none; -webkit-appearance: none; font: 400 15px/20px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); outline: none; opacity: 1; }
.lc-sel > svg { position: absolute; right: 17px; top: 13px; width: 20px; height: 20px; color: var(--df-0d0d0d, rgb(13, 13, 13)); pointer-events: none; }
.lc .lc-lock { background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.lc-lock select { color: var(--df-acacac, rgb(172, 172, 172)); -webkit-text-fill-color: rgb(172, 172, 172); }
.lc-lock > svg { color: var(--df-acacac, rgb(172, 172, 172)); }
.lc-phone { display: flex; gap: 8px; }
.lc-phone > .bf-input { flex: 1; min-width: 0; }
.lc-phone > .lc-pre { flex: none; width: 105px; }
.lc-pre select { padding-right: 32px; }
.lc-sub { margin: -20px 0 0; font: 400 17px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* Business types. */
.lc-cats { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.lc-cat { position: relative; min-height: 104px; padding: 20px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border: 0; border-radius: 15.24px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px; font: 600 15px/20px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); text-align: left; cursor: pointer; }
.lc-cat > svg { flex: none; width: 32px; height: 32px; }
.lc-cat.on { box-shadow: rgb(105, 80, 243) 0 0 0 2px inset; }
.lc-cat.dim { opacity: .4; }
.lc-badge { position: absolute; top: 8px; right: 8px; height: 24px; padding: 0 12px; display: flex; align-items: center; border-radius: 999px; background: rgb(105, 80, 243); color: #fff; font: 500 13px/16px var(--font); font-style: normal; }
/* The address summary. */
.lc-sec h2 { margin: 0; font: 600 24px/32px var(--font); letter-spacing: -0.2px; }
.lc-sechead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lc-acts { flex: none; height: 36px; margin: -2px 0; padding: 0 15px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); font: 500 15px/20px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); cursor: pointer; }
.lc-acts > svg { width: 20px; height: 20px; }
.lc-acts .lc-dots { display: none; }
.lc-lines { padding-bottom: 32px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.lc-lines p { margin: 0; font: 400 17px/24px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); }
.lc-lines i { font-style: normal; }
.lc-kvs { margin-top: 32px; padding-bottom: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.lc-kv b { display: block; font: 500 15px/20px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); }
.lc-kv p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); overflow-wrap: anywhere; }
.lc-add { height: 21px; padding: 0; display: flex; align-items: center; gap: 4px; border: 0; background: none; font: 500 15px/20px var(--font); color: var(--df-6950f3, rgb(105, 80, 243)); cursor: pointer; }
.lc-add > svg { width: 20px; height: 20px; }
.lc-mapsec { margin-top: 40px; }
.lc-lead { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.lc-mapbox { position: relative; isolation: isolate; margin-top: 20px; height: 240px; background: var(--db-f2f2f2, rgb(242, 242, 242)); overflow: hidden; display: grid; place-items: center; }
.lc-pin { position: relative; z-index: 500; padding: 7px 12px; border-radius: 8px; background: var(--db-ffffff, #fff); box-shadow: 0 2px 8px rgba(19, 19, 19, .16); font: 400 15px/21px var(--font); pointer-events: none; transform: translateY(-20px); }
.lc-pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--db-ffffff, #fff); transform: rotate(45deg); }
.lc-mapbox .leaflet-control-zoom { margin: 0 20px 20px 0 !important; border: 0 !important; border-radius: 999px; overflow: hidden; box-shadow: 0 2px 8px rgba(19, 19, 19, .16); }
.lc-mapbox .leaflet-control-zoom a { width: 36px; height: 36px; border: 0; font: 400 22px/36px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); }
/* Its menu: 200 px, rows of 40. */
.lc-menu.team-menu { min-width: 200px; padding: 8px 20px; }
.lc-menu .menu-item { min-height: 40px; font: 500 15px/20px var(--font); }
/* The address search. */
.lc-search { position: relative; }
.lc-q > svg { flex: none; width: 20px; height: 20px; margin-left: 16px; color: var(--df-767676, rgb(118, 118, 118)); }
.lc-hits { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; list-style: none; border-radius: 20.32px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, .1) 0 0 0 1px, rgba(19, 19, 19, .04) 0 1px 8px 0, rgba(19, 19, 19, .12) 0 4px 20px 0; }
.lc-hits[hidden] { display: none; }
.lc-hits button { width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 15.24px; background: none; font: 500 15px/20px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); text-align: left; cursor: pointer; }
.lc-hits button:hover, .lc-hits button.on { background: var(--db-131313-5-h, rgba(19, 19, 19, .05)); }
.lc-nohit { padding: 10px 12px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* The address form: 12 columns. */
.lc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 16px; }
.lc-grid .bf-field { margin-top: 0; }
.lc-8 { grid-column: span 8; } .lc-4 { grid-column: span 4; } .lc-6 { grid-column: span 6; } .lc-12 { grid-column: span 12; }
.lc-area { display: block; width: 100%; height: 122px; padding: 13px 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15.24px; background: var(--db-ffffff, #fff); font: 400 15px/20px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); resize: none; box-sizing: border-box; }
/* Default taxes. */
.lc-fields { margin-top: 32px; }
.lc-fields .bf-field:first-child { margin-top: 0; }
.lc-banner { display: flex; gap: 8px; padding: 16px 20px 16px 12px; border-radius: 15.24px; font: 400 15px/22px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); }
.lc-banner p { margin: 0; }
.lc-banner-ic { flex: none; width: 24px; height: 24px; }
.lc-banner-ic svg { display: block; width: 24px; height: 24px; }
.lc-banner-end { margin-top: 24px; background: var(--db-f9f9f9, rgb(249, 249, 249)); box-shadow: var(--ds-e5e5e5, rgb(229, 229, 229)) 0 0 0 1px inset; }
.lc-banner-top { margin-top: 32px; padding-bottom: 15px; background: var(--db-f0f0ff, rgb(240, 240, 255)); box-shadow: var(--ds-dbddff, rgb(219, 221, 255)) 0 0 0 1px inset; }
.lc-banner-top .lc-banner-ic { color: var(--df-6950f3, rgb(105, 80, 243)); }
.lc-banner-top + .lc-fields { margin-top: 24px; }
.lc-banner-link { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font: 500 15px/20px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); text-decoration: none; }
.lc-banner-link svg { display: block; width: 20px; height: 20px; }
@media (max-width: 1023px) {
  .lc-grid > div { grid-column: span 12; }
  .lc-sec h2 { font: 600 20px/28px var(--font); letter-spacing: 0; }
  .lc-acts { margin: -4px 0; }
  .lc-lines span { display: block; }
  .lc-lines i { display: none; }
}
@media (max-width: 767px) {
  .lc .sf-wrap, .lc.lc-wide .sf-wrap { width: calc(100% - 40px); padding: 0 0 100px; }
  .lc-cats { margin-top: 24px; }
  .lc .sf-top { padding: 0 8px 0 20px; }
  .lc .sf-wrap h1 { font: 600 28px/36px var(--font); letter-spacing: 0; }
  .lc #close { display: none; }
  .lc .lc-x { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--df-0d0d0d, rgb(13, 13, 13)); }
  .lc .lc-x svg { width: 32px; height: 32px; }
  .lc .sf-top #save { position: fixed; z-index: 7; left: 20px; right: 20px; bottom: 16px; }
  .lc::after { content: ""; position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; height: 80px; background: var(--db-ffffff, #fff); border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .lc-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-acts { width: 36px; padding: 0; justify-content: center; border: 0; background: none; }
  .lc-acts > span:first-child, .lc-acts > svg { display: none; }
  .lc-acts .lc-dots { display: flex; }
  .lc-acts .lc-dots svg { width: 24px; height: 24px; }
  .lc-acts { margin: -4px -5px -4px 0; }
  .lc-kvs { grid-template-columns: minmax(0, 1fr); }
}

/* The member's page inside the agenda's frame: only its drawer, on nothing. */
html.mbr-embed, html.mbr-embed body { background: transparent !important; }
html.mbr-embed #frame { visibility: hidden; }
html.mbr-embed .drawer-wrap.mbr-wrap { background: transparent; }

/* Facturación como Fresha (7 nov 2026): tarjetas vacías de una cuenta nueva, cartel de Pagos y Saldo de comunicación. */
.bl-empty { padding: 104px 24px; border-radius: 15.24px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; text-align: center; }
.bl-empty.short { border-radius: 10.16px; }
.bl-empty img { display: block; width: 64px; height: 64px; margin: 0 auto 16px; }
.bl-empty h2 { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; color: var(--df-0d0d0d, #0d0d0d); }
.bl-empty p { max-width: 512px; margin: 4px auto 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.bl-empty .tbtn { margin-top: 24px; }
.bl-pay { position: relative; height: 722px; overflow: hidden; border-radius: 15.24px; background: var(--db-0d0d0d, #0d0d0d); color: var(--do-ffffff, #fff); }
.bl-pay-e { position: absolute; width: 500px; pointer-events: none; }
.bl-pay-e.e20 { left: 196px; top: -41px; height: 863px; }
.bl-pay-e.e19 { left: 396px; top: 450px; height: 472px; }
.bl-pay-e.e21 { left: 246px; top: 217px; height: 585px; }
.bl-pay-t { position: relative; z-index: 1; padding: 40px 32px 0; }
.bl-pay-k { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.bl-pay-k img { width: 40px; height: 40px; }
.bl-pay h2 { max-width: 632px; margin: 24px 0 0; font: 700 40px/44px var(--font); letter-spacing: -0.2px; }
.bl-pay ul { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; max-width: 632px; }
.bl-pay li { display: flex; gap: 8px; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.bl-pay li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.bl-pay-b { display: flex; gap: 8px; margin-top: 32px; }
.bl-pay-b .tbtn { height: 36px; padding: 0 15px; border-color: var(--de-ffffff, #fff); background: var(--db-ffffff, #fff); color: var(--df-0d0d0d, #0d0d0d); }
.bl-pay-b .tbtn.ghost { border-color: transparent; background: none; color: #fff; font-weight: 600; }
.bl-pay-h { position: absolute; z-index: 1; pointer-events: none; }
.bl-pay-h.ht { left: -18px; top: 156px; width: 540px; height: 566px; }
.bl-pay-h.hp { left: 181px; top: 146px; width: 520px; height: 576px; }
.bl-card { padding: 24px; border-radius: 20.32px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; }
.bl-card + .bl-card { margin-top: 24px; }
.bl-head { display: flex; align-items: center; gap: 12px; }
.bl-gt { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 15.24px; color: #fff; background-size: cover; }
.bl-gt.sky { background-image: url(/billing-art/grad-sky-island.svg); }
.bl-gt.rose { background-image: url(/billing-art/grad-rose-embrace.svg); }
.bl-gt svg { width: 24px; height: 24px; }
.bl-ht { flex: 1; min-width: 0; }
.bl-ht h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 17px/24px var(--font); letter-spacing: -0.2px; }
.bl-ht p { margin: 2px 0 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
.bl-free { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; background: var(--db-edfbe9, rgb(237, 251, 233)); color: var(--df-1f8900, rgb(31, 137, 0)); font: 500 13px/16px var(--font); }
.bl-big { flex: none; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.bl-exp { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); color: var(--df-0d0d0d, #0d0d0d); cursor: pointer; }
.bl-exp svg { width: 20px; height: 20px; transition: transform .2s; }
.bl-exp[aria-expanded="true"] svg { transform: rotate(180deg); }
.bl-use hr { margin: 24px 0 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.bl-uh { display: block; margin-top: 24px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.bl-us { display: block; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.bl-ur { display: flex; align-items: center; gap: 8px; margin-top: 24px; }
.bl-ur > div { flex: 1; min-width: 0; }
.bl-ur b { display: block; font: 500 15px/20px var(--font); letter-spacing: -0.1px; }
.bl-ur small { display: block; margin-top: 2px; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.bl-ui { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--db-edfbe9, rgb(237, 251, 233)); color: var(--df-1f8900, rgb(31, 137, 0)); }
.bl-ui svg { width: 20px; height: 20px; }
.bl-un { flex: none; align-self: flex-end; white-space: pre; }
.bl-bar { height: 8px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: var(--db-131313-5, rgba(19, 19, 19, 0.05)); }
.bl-bar i { display: block; height: 100%; border-radius: inherit; background: rgb(31, 137, 0); }
.bl-rate { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; min-height: 72px; box-sizing: border-box; padding: 20px; border-radius: 12px; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.bl-rate b { font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.bl-rate a { font: 400 14px/20px var(--font); color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; }
.bl-yellow { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 16px 20px; border-radius: 15.24px; background: var(--db-fff7db, rgb(255, 247, 219)); box-shadow: var(--ds-ffefb2, rgb(255, 239, 178)) 0 0 0 1px inset; font: 400 15px/20px var(--font); letter-spacing: -0.1px; }
.bl-acts { margin-top: 24px; }
.bl-btns { display: flex; gap: 8px; margin-top: 24px; }
.bl-wizard .sc-body { background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.bl-wcard { display: flex; flex-direction: column; gap: 16px; padding: 40px; border-radius: 20.32px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px; }
.bl-wcard > .bf-field, .bl-wcard .lp-grid .bf-field { margin: 0; }
.bl-wpay input:disabled { background: none; }
.bl-wh { margin: 48px 0 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.bl-wl { margin: 0 0 16px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
@media (max-width: 767px) {
  .bl-empty { padding: 64px 20px; }
  /* Fresha at 402: the same offer, taller, with the two hands smaller at the bottom. */
  .bl-pay { height: 840px; }
  .bl-pay-e.e20 { left: -138px; top: 77px; }
  .bl-pay-e.e19 { left: 62px; top: 568px; }
  .bl-pay-e.e21 { left: -88px; top: 335px; }
  .bl-pay-h.ht { left: -30px; top: 505px; width: 320px; height: 335px; }
  .bl-pay-h.hp { left: 72px; top: 497px; width: 310px; height: 343px; }
  /* Fresha, phones: the tile and the amount on top, the title and its text under them. */
  .bl-card { padding: 16px; }
  .bl-head { flex-wrap: wrap; row-gap: 12px; }
  .bl-head .bl-ht { order: 3; flex: 0 0 100%; }
  .bl-head > :is(.bl-big, .bl-amt) { margin-left: auto; }
  .bl-yellow { flex-direction: column; align-items: flex-start; gap: 16px; }
}
#setup-body > :is(.bl-empty, .bl-pay, .bl-card:first-child, .pb-ban:first-child, .cb-ban:first-child) { margin-top: 24px; }
.bl-wizard .lp-count { display: none; }
.bl-empty.gc-off { border-radius: 20.32px; }

/* ---------- Propinas (Fresha, new account, measured at 1470) ---------- */
.tp-card { padding: 40px; border-radius: 25.4px; }
.tp-card > h2 { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.tp-sws { margin-top: 26px; display: grid; gap: 16px; }
.tp-sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; cursor: pointer; }
.tp-sw > span { display: flex; flex-direction: column; font: 400 15px/20px var(--font); }
.tp-sw b { font-weight: 400; }
.tp-sw a, .tp-sw small { font: 400 13px/16px var(--font); }
.tp-sw a { color: var(--df-6950f3, rgb(105, 80, 243)); text-decoration: none; align-self: flex-start; }
.tp-sw small { color: var(--df-767676, rgb(118, 118, 118)); }
.tp-sw.off { cursor: default; }
.tp-sw .switch:disabled { background: var(--db-131313-05, rgba(19, 19, 19, 0.05)); box-shadow: inset 0 0 0 1px var(--de-d3d3d3, rgb(211, 211, 211)); cursor: default; }
.tp-sw .switch:disabled::after { background: var(--db-ffffff, #fff); box-shadow: 0 0 0 1px var(--de-e5e5e5, rgb(229, 229, 229)); }
.tp-card hr { margin: 26px 0 24px; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.tp-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tp-row + .tp-row { margin-top: 16px; }
.tp-row > span { display: flex; flex-direction: column; }
.tp-row b { font: 600 15px/20px var(--font); }
.tp-row small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.tp-row .tbtn { flex: none; }
.tp-card hr + .tp-row + .tp-row + hr { margin-top: 24px; }
.tp-adv { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: 400 15px/20px var(--font); color: var(--df-6950f3, rgb(105, 80, 243)); cursor: pointer; }
.tp-adv:hover { text-decoration: underline; }
/* The advanced table: «Tipo» 343 px, the other columns 245 px. */
.tp-table { width: 1857px; }
.tp-table th:nth-child(2) { width: 245px; }
.tp-table th:nth-child(3) { width: 343px; }
.tp-table th:nth-child(n + 4) { width: 245px; }
.tp-ro { position: relative; }
.tp-ro input { cursor: pointer; text-overflow: ellipsis; }
.tp-ro.dis { background: var(--db-f2f2f2, rgb(242, 242, 242)); border-color: var(--de-e5e5e5, rgb(229, 229, 229)); }
.tp-ro.dis input { color: var(--df-acacac, rgb(172, 172, 172)); cursor: default; }
.tp-ed { flex: none; margin-left: 8px; padding: 0; border: 0; background: none; font: 400 14px/20px var(--font); color: var(--df-6950f3, rgb(105, 80, 243)); cursor: pointer; }
/* Fresha's small windows: values and calculation. */
.team-dialog.tp-dlg { width: min(512px, calc(100vw - 32px)); max-width: none; padding: 0; border-radius: 25.4px; overflow: hidden; }
.team-dialog.tp-dlg.wide { width: min(720px, calc(100vw - 32px)); }
.tp-dh { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 32px 48px 0; }
.tp-dh h2 { margin: 0; font: 600 20px/28px var(--font); letter-spacing: -0.2px; }
.tp-df { padding: 24px 48px 0; }
.tp-calc { padding: 0; }
.tp-scroll { max-height: min(640px, calc(100vh - 220px)); overflow: auto; padding: 24px 48px; }
.tp-lab { margin: 0 0 8px; font: 600 14px/20px var(--font); }
.tp-vrow { display: flex; align-items: center; gap: 8px; }
.tp-vrow + .tp-vrow { margin-top: 16px; }
.tp-vrow .bf-input { flex: 1; }
.tp-addv { margin-top: 16px; gap: 6px; }
.tp-db { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 32px 0 32px; }
.tp-db.one { display: flex; justify-content: flex-end; padding: 16px 48px 24px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.tp-bsec { padding: 32px 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.tp-bsec h2 { margin: 0 0 16px; font: 600 20px/28px var(--font); }
.tp-bsec .tp-sw + .tp-sw { margin-top: 16px; }
@media (max-width: 767px) {
  .tp-card { padding: 24px 20px; }
  .tp-dh { padding: 24px 24px 0; } .tp-df { padding: 20px 24px 0; } .tp-scroll { padding: 20px 24px; } .tp-db.one { padding: 16px 24px 20px; }
}
.tp-sw { align-items: flex-start; } .tp-sw .switch { margin-top: -2px; }
/* Fresha's advanced tips page uses the whole width (28 px sides), a 17/24 lead and 14/20 bold headers. */
.tp-advp .sc-in { max-width: none; margin: 0 28px; }
.tp-advp .sc-lead { font: 400 17px/24px var(--font); }
.tp-advp .tp-table th { font: 700 14px/20px var(--font); }
@media (max-width: 767px) { .tp-advp .sc-in { margin: 0 20px; } }
/* The payments card inside Ajustes › Pagos (Fresha, 696 px wide). */
.bl-pay.sm { height: auto; border-radius: 20.32px; background: var(--db-000000, #000); }
.bl-pay.sm .bl-pay-t { padding: 32px 32px 0; }
.bl-pay.sm h2 { margin-top: 24px; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.bl-pay.sm ul { margin-top: 24px; }
.bl-pay.sm li svg { width: 20px; height: 20px; margin-top: 0; }
.bl-pay.sm .bl-pay-b { margin-top: 24px; }
.bl-pay-art { width: 100%; aspect-ratio: 2 / 1; margin-top: -1px; background-color: var(--db-000000, #000); background-repeat: no-repeat; background-position: center top, center bottom; background-size: 100% 100%, cover; }
.bl-pay.sm .bl-pay-b { gap: 24px; } .bl-pay.sm .bl-pay-b .tbtn.ghost { height: 52px; margin: -8px 0; padding: 0 16px; font-weight: 500; }
.bl-pay.sm h2, .bl-pay.sm ul { max-width: 616px; }
.ad-on.ad-trial { background: var(--db-eaf1fd, rgb(234, 241, 253)); box-shadow: none; color: var(--df-2d76ec, rgb(45, 118, 236)); }
/* The payments promo keeps its black card and white text in dark mode (its photo is drawn on black). */
html[data-theme="dark"] :is(.bl-pay, .bl-pay-art) { background-color: #000; color: #fff; }
html[data-theme="dark"] .bl-pay .bl-pay-b .tbtn:not(.ghost) { background: #fff; border-color: #fff; color: #0d0d0d; }
html[data-theme="dark"] .bl-pay .bl-pay-b .tbtn.ghost { color: #fff; }
/* Roles de permiso: the default role carries a small ticked circle (Fresha), not a word. */
.tr-def { display: inline-flex; vertical-align: -3px; margin-left: 4px; color: var(--df-767676, rgb(118, 118, 118)); }
.tr-def svg { width: 16px; height: 16px; }
.sc-upoff { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; } .sc-upoff .tbtn { flex: none; }