/* Figtree served from our own domain and preloaded by every page: with "optional" the
   browser waits for it before the first paint instead of drawing the system font and
   swapping it, so the text never flickers between pages. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: optional; src: url(/fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: optional; src: url(/fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --ink: #0d0d0d;
  --ink-2: #5c5c5c;
  --bg: #ffffff;
  --line: #e5e5e5;
  --line-soft: #f2f2f2;
  --border: #d3d3d3;
  --toolbar: #f9f9f9;
  --sidebar: #0d0d0d;
  --accent: #6950f3;
  --avatar-bg: #ebf8fe;
  --avatar-ink: #0075a8;
  --off: #f2f2f2;
  --off-stripe: rgba(222, 222, 222, 0.8);
  --now: #d4163a; /* measured on the reference */
  --appt: #9bbdfd; /* measured on the reference (service colour "jordyBlue") */
  --appt-hover: #8aaffb;
  --picked: #f0f0ff;
  --pop-shadow: 0 0 0 1px rgba(19, 19, 19, 0.1), 0 1px 8px rgba(19, 19, 19, 0.04), 0 4px 20px rgba(19, 19, 19, 0.12);
  --res-col: 80px;
  --appt-ink: #0d0d0d;
  --danger: #d4163a; /* Fresha: rgb(212, 22, 58) */
  --success: #12a150;

  --topbar-h: 65px; /* Fresha's header: 64 + its 1px bottom border */
  --sidebar-w: 72px;
  --toolbar-h: 68px;
  --head-h: 109px;
  --gutter-w: 48px;
  --lane-min: 100px; /* Fresha: columns share the width and never go under ~100px (13 fit at 1,470px, 14 do not) */
  /* Set from JS by the zoom level: rows are always 24px, --hour = 24px × rows per hour. */
  --hour: 96px;
  --slot: 24px;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  font: 400 14px/20px var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* Any text can be selected and copied; buttons, menus and the rail don't select on a
   double click, and what is dragged (appointments, cards to reorder) keeps its own rule. */
button, .tbtn, .icon-btn, .nav-item, .menu-item, .subnav-item, .setup-nav-item, .bottom-item, [role="tab"] { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
input, textarea, select { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* Don't show a half-built page (no icons, no hours) while the script starts. */
html:not(.booted) .app { visibility: hidden; }
svg { display: block; }

/* ---------- Shell ---------- */
.app {
  /* 100% (not 100dvh): on iOS Safari dvh can reach under the floating toolbar. */
  height: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "top top" "side main";
}

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  padding: 0 32px 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.brand {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-decoration: none;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0; }
.icon-btn {
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
}
@media (hover: hover) { .icon-btn:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, 0.06)); } }
.icon-btn svg { width: 24px; height: 24px; }
/* Account button (Fresha: 48, white 1px ring, no outer ring). ".avatar" comes later
   in this file for the calendar's team photos, so this one must outrank it. */
.avatar.avatar-user, .avatar-user {
  width: 48px; height: 48px; margin-left: 10px; box-shadow: none;
  border-radius: 999px; border: 1px solid var(--de-ffffff, #fff);
  background: var(--avatar-bg); color: var(--avatar-ink);
  font: 600 14px/24px var(--font);
}

.sidebar {
  grid-area: side;
  background: var(--sidebar);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 8px 0 16px;
}
.sidebar-items { display: flex; flex-direction: column; }
.nav-item {
  height: 52px; display: grid; place-items: center; cursor: pointer; color: #fff;
}
.nav-item svg { width: 44px; height: 44px; padding: 8px; border-radius: 8px; }
.nav-item:hover svg { background: rgba(255, 255, 255, 0.12); }
.nav-item.is-active svg { background: var(--accent); }

.main { grid-area: main; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* ---------- Toolbar ---------- */
.toolbar {
  height: var(--toolbar-h);
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px;
  background: var(--toolbar);
  border-bottom: 1px solid var(--line);
}
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Centre and team filters: their name while the toolbar has room, only an icon when it is
   narrow (as Fresha: pin / group icon in a 52px pill). */
.pill-fold .fold-ic { display: none; }
.pill-fold[aria-expanded="true"] > i:last-child svg { transform: rotate(180deg); }
.popover-loc { width: 333px; }
.popover-loc .menu-item { font-weight: 400; }
.toolbar.is-folded .pill-fold { width: 52px; padding: 0; justify-content: center; flex: none; }
.toolbar.is-folded .pill-fold > span, .toolbar.is-folded .pill-fold > i:last-child { display: none; }
.toolbar.is-folded .pill-fold .fold-ic { display: flex; }
.toolbar.is-folded .pill-fold .fold-ic svg { width: 20px; height: 20px; }
.pill {
  height: 36px; padding: 0 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff);
  font-size: 15px; font-weight: 500; line-height: 20px; white-space: nowrap;
}
.pill:hover { background: var(--db-f4f4f4-h, #f4f4f4); }
.pill svg { width: 20px; height: 20px; }
.pill i svg { width: 16px; height: 16px; }
.pill-icon { width: 52px; padding: 0; }
.pill-group { display: inline-flex; }
.pill-group .pill { border-radius: 0; margin-left: -1px; }
.pill-group .pill-start { border-radius: 999px 0 0 999px; margin-left: 0; }
.pill-group .pill-end { border-radius: 0 999px 999px 0; }
.pill-group .pill-icon { width: 40px; }
.pill-date { width: 175px; }
.pill-view { min-width: 86px; }
.pill-view[aria-expanded="true"] i svg { transform: rotate(180deg); }
.pill-primary { background: var(--ink); border-color: var(--ink); color: var(--do-ffffff, #fff); }
.pill-primary:hover { background: var(--db-2b2b2b-h, #2b2b2b); }

/* ---------- Calendar grid ---------- */
.calendar {
  flex: 1; min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: none; /* no iOS rubber-band sideways: it would pull the two dates apart */
  position: relative;
  /* No scroll bars over the agenda (as in the reference); scrolling still works. */
  scrollbar-width: none;
  /* Horizontal scrolling always stops on a whole column, never half of one. */
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter-w);
}
.lane { scroll-snap-align: start; }
/* While dragging, auto-scroll moves freely; it snaps again on drop. */
body.is-dragging .calendar { scroll-snap-type: none; }
.cal-head {
  position: sticky; top: 0; z-index: 7; /* above the hours column (6) */
  display: flex; min-width: max-content;
  height: var(--head-h);
  background: var(--db-ffffff, #fff);
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.08);
}
.cal-corner { position: sticky; left: 0; z-index: 1; width: var(--gutter-w); flex: none; background: var(--db-ffffff, #fff); }
.resource {
  flex: 1 0 var(--lane-min); width: var(--lane-min);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 4px 8px 0;
}
.avatar {
  width: 56px; height: 56px; border-radius: 999px; border: 1px solid var(--de-ffffff, #fff);
  display: grid; place-items: center;
  background: var(--avatar-bg); color: var(--avatar-ink);
  font: 600 16px/24px var(--font);
  box-shadow: 0 0 0 2px var(--ds-c3e9fb, #c3e9fb);
}
.resource-name { position: relative; font-size: 13px; font-weight: 600; line-height: 16px; max-width: 100%; white-space: nowrap; }
/* ⌄ sits just right of the name so the name stays centred under the avatar. */
.resource-chevron { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 4px; opacity: 0; }
.resource-chevron svg { width: 20px; height: 20px; }
.resource.is-hot .resource-chevron { opacity: 1; }
.resource.is-hot .avatar, .agrid-res.is-hot .avatar { background: var(--db-ceeffd, #ceeffd); }

.cal-body { display: flex; min-width: max-content; position: relative; }
.cal-gutter {
  /* Above the current-time line (z 4) and appointments: content sliding under it must not cross the hours. */
  position: sticky; left: 0; z-index: 6;
  width: var(--gutter-w); flex: none;
  height: calc(var(--hour) * 24);
  background: var(--db-ffffff, #fff);
}
.hour-label {
  position: absolute; left: 0; width: var(--gutter-w);
  text-align: center;
  font-size: 13px; font-weight: 600; line-height: 11px;
}
.half-label { font-weight: 600; }

.cal-lanes {
  position: relative; display: flex; flex: 1;
  height: calc(var(--hour) * 24);
  background-color: var(--off);
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--off-stripe) 6px 7.5px);
}
.lane {
  position: relative;
  flex: 1 0 var(--lane-min); width: var(--lane-min);
  border-right: 1px solid var(--line);
  cursor: pointer;
}
.lane-work { position: absolute; left: 0; right: 0; background: var(--db-ffffff, #fff); pointer-events: none; }
.grid-lines {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(to bottom, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 100% var(--hour), 100% var(--slot);
}
/* Empty slot under the mouse (lilac) and the slot picked by a click (white, 2px purple):
   21px tall in a 24px row, and as wide as an appointment (1px off the left edge). */
.slot-hover, .slot-picked {
  position: absolute; left: 1px; right: 0; height: calc(var(--slot) - 3px); margin-top: 1px; z-index: 2;
  border-radius: 4px; box-sizing: border-box;
  color: var(--accent); font-size: 13px; font-weight: 500; line-height: 16px;
  pointer-events: none; white-space: nowrap; overflow: hidden;
}
.slot-hover { background: var(--picked); border: 1px solid var(--de-dbddff, #dbddff); padding: 2px 5px 2px 8px; }
.slot-picked { background: var(--db-ffffff, #fff); border: 2px solid var(--accent); padding: 1px 5px 1px 7px; z-index: 3; cursor: default; }

/* Calendar settings drawer */
.setting { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.setting-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.setting-head label { font-size: 17px; font-weight: 600; line-height: 24px; }
.setting-head span { font-size: 15px; color: var(--ink); }
.range {
  --fill: 66%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
}
.range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line); }
.range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px; border-radius: 999px; background: var(--accent); border: 0;
}
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 999px; background: var(--accent); border: 0; }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(105, 80, 243, 0.25); }

.appt {
  /* Measured on the reference: no border, 1px off the column edges, 1px gap below
     (height is set 1px short), padding 3/4/3/8, all text 13px/16px. */
  position: absolute; left: 1px; right: 0; z-index: 3;
  background: var(--appt); color: var(--appt-ink);
  border-radius: 4px; border: 0;
  padding: 3px 4px 3px 8px; overflow: hidden;
  font-size: 13px; line-height: 16px;
  cursor: pointer; text-align: left;
  transition: opacity .15s;
}
.appt { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.appt { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
/* iPhone: a long press on the grid (e.g. on an appointment's bottom edge, to stretch it) must not
   select text or open Safari's «Copiar / Buscar con Google» menu. The inputs inside keep theirs. */
.calendar, .calendar * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.calendar :is(input, textarea, [contenteditable="true"]) { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
/* Mouse only: on touch screens :hover sticks after a simple tap. With a finger
   the appointment is highlighted only once a long-press starts the drag (.appt-ghost). */
@media (hover: hover) and (pointer: fine) {
  .appt:hover { box-shadow: inset 0 0 0 2px var(--accent); }
  .appt:hover .appt-resize::after { opacity: .7; }
}
/* Bottom edge: drag to change the duration. */
.appt-resize {
  position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  display: grid; place-items: center;
  cursor: ns-resize;
}
.appt-resize::after {
  /* Raised off the bottom edge, where Fresha draws it. */
  content: ""; width: 14px; height: 5px; transform: translateY(-3px);
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  opacity: 0; transition: opacity .1s;
}
.appt-ghost .appt-resize::after { opacity: .7; }
/* Touch: picked up by a long-press; stays like this until touching elsewhere.
   touch-action: none so the next touch on it drags instead of scrolling. */
.appt.is-selected { box-shadow: inset 0 0 0 2px var(--accent); touch-action: none; }
.appt.is-selected .appt-resize::after { opacity: .7; }
.appt-ghost {
  z-index: 7; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--accent), 0 8px 24px rgba(19, 19, 19, 0.18);
  /* Its own colour (service, member, status or resource), a shade darker while it moves;
     the fixed --appt-hover was the default blue, so every tile turned blue when dragged. */
  background: color-mix(in srgb, var(--appt), var(--db-000000, #000) 7%);
}
.appt.is-drag-source { opacity: 0.35; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
body.is-resizing, body.is-resizing * { cursor: ns-resize !important; user-select: none; -webkit-user-select: none; }
@media (hover: none) {
  .appt-resize { height: 16px; } /* bigger target for fingers */
}
/* "09:00 - 10:00 Cliente" on one line when it fits, the name drops below when it doesn't. */
.appt-head { display: flex; align-items: flex-start; }
.appt-tt { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; min-width: 0; width: calc(100% - 16px * var(--tags, 0)); }
.appt-tags { display: flex; flex: none; align-items: center; }
.appt-tag { display: inline-flex; width: 16px; height: 16px; }
.appt-tag svg { width: 16px; height: 16px; }
.appt-tag.danger { color: var(--df-d4163a, rgb(212, 22, 58)); }
.appt-time { font-weight: 400; white-space: nowrap; overflow: hidden; max-width: 100%; }
.appt-client { font-weight: 600; }
.appt-service { white-space: normal; }
.appt.is-pending {
  opacity: 0.65;
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--db-ffffff-50, rgba(255, 255, 255, 0.5)) 6px 9px);
}
.appt.is-failed { background: var(--db-ffd6dd, #ffd6dd); }
/* The open drawer's appointment, as Fresha: light blue with the accent border, not clickable. */
.appt.is-preview { background: rgb(151, 198, 240); box-shadow: inset 0 0 0 2px var(--accent), 0 2px 8px rgba(19, 19, 19, 0.08), 0 4px 20px rgba(19, 19, 19, 0.12); pointer-events: none; z-index: 4; }
.pv { z-index: 4; animation: pv-in .3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: top .3s cubic-bezier(0.4, 0, 0.2, 1), left .3s cubic-bezier(0.4, 0, 0.2, 1), height .3s cubic-bezier(0.4, 0, 0.2, 1), width .3s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s cubic-bezier(0.4, 0, 0.2, 1); }
.pv.is-leaving { opacity: 0; }
@keyframes pv-in { from { opacity: 0; } }
/* "Horario no disponible": grey-blue block (measured rgb 164 173 186), 13px text. */
.blk { position: absolute; left: 1px; right: 0; z-index: 3; border: 0; border-radius: 4px; padding: 3px 4px 3px 8px; overflow: hidden; background: rgb(164, 173, 186); color: var(--ink);
  font: 400 13px/16px var(--font); text-align: left; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; }
.blk { display: block; }
.blk strong { font-weight: 600; }
.blk-tt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.blk-tt.rep { max-width: calc(100% - 16px); }
.blk-head, .blk-tt strong { white-space: nowrap; overflow: hidden; line-height: 16px; }
.blk-head { max-width: 100%; }
.blk.short .blk-tt { flex-wrap: nowrap; }
.blk.short .blk-head { flex: 0 1 auto; min-width: 0; }
.blk.short .blk-tt strong { flex: none; }
.blk-rep { position: absolute; top: 3px; right: 4px; display: flex; }
.blk-rep svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .blk:hover { box-shadow: inset 0 0 0 2px var(--accent); } }
.blk.is-preview { box-shadow: inset 0 0 0 2px var(--accent); pointer-events: none; z-index: 4; }

.now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--now); margin-top: -1px; z-index: 4; pointer-events: none; }
/* Measured on the reference: 48x20, 2px border, 10px radius, 13px semibold, centred. */
.now-pill {
  position: absolute; left: 0; width: var(--gutter-w); height: 20px; z-index: 5;
  transform: translateY(-50%); box-sizing: border-box;
  display: grid; place-items: center;
  border: 2px solid var(--now); border-radius: 10px; background: var(--db-ffffff, #fff);
  color: var(--now); font-size: 13px; font-weight: 600; line-height: 11px;
}

/* ---------- Drawer ---------- */
.scrim { position: fixed; inset: 0; background: var(--db-0d0d0d-30, rgba(13, 13, 13, 0.3)); z-index: 20; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 21;
  width: min(480px, 100vw);
  background: var(--db-ffffff, #fff);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column;
  animation: drawer-in .2s ease-out;
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 8px 32px; }
.drawer-head h2 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; }
/* Desktop: the close button floats outside the drawer, to its left (as in the reference). */
@media (min-width: 768px) {
  .drawer { overflow: visible; }
  .drawer-head { padding-top: 32px; }
  .drawer-head .icon-btn {
    position: absolute; left: -60px; top: 12px;
    width: 48px; height: 48px; border-radius: 999px; background: var(--db-ffffff, #fff);
  }
}
.drawer-body { flex: 1; overflow: auto; padding: 16px 32px; display: flex; flex-direction: column; gap: 20px; }
.drawer-foot { padding: 16px 32px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 12px; }

.drawer-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; font-weight: 600; }
.field input, .field select {
  height: 48px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--db-ffffff, #fff);
  font-size: 15px; outline: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(105, 80, 243, 0.2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail { display: flex; flex-direction: column; gap: 4px; }
.detail-label { font-size: 13px; color: var(--ink-2); }
.detail-value { font-size: 16px; font-weight: 600; }
.detail-card { background: var(--appt); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }

.btn {
  height: 48px; padding: 0 24px; border-radius: 999px;
  font-size: 17px; font-weight: 600; line-height: 24px;
  display: inline-flex; align-items: center; justify-content: center; flex: 1;
  border: 1px solid var(--border); background: var(--db-ffffff, #fff);
}
.btn:hover { background: var(--db-f4f4f4-h, #f4f4f4); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--do-ffffff, #fff); }
.btn-primary:hover { background: var(--db-2b2b2b-h, #2b2b2b); }
.btn-danger { color: var(--danger); border-color: #f1b5c0; }
.btn:disabled { opacity: .5; cursor: default; }

.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 30;
  background: var(--ink); color: var(--do-ffffff, #fff); border-radius: 999px;
  padding: 12px 20px; font-size: 15px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  max-width: calc(100vw - 32px);
}

/* ---------- Popovers: view menu and quick actions ---------- */
.popover {
  position: fixed; z-index: 25;
  background: var(--db-ffffff, #fff); border: 1px solid transparent; border-radius: 20.32px;
  box-shadow: var(--pop-shadow);
  padding: 8px;
  animation: pop-in .12s ease-out;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.popover-menu { width: 242px; }
/* Quick actions, measured on the reference: grey 40px title band edge to edge,
   then 16px/24px body; rows bleed 12px so their text lines up with the title. */
.popover-qa { width: 282px; padding: 0; overflow: hidden; }
.popover-qa .qa-body { padding: 16px 24px; }
.popover-qa .qa-body .menu-item { margin: 0 -12px; width: calc(100% + 24px); }
.menu { list-style: none; margin: 0; padding: 0; }
.menu-item {
  width: 100%; height: 40px; padding: 8px 12px; border-radius: 15.24px;
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; line-height: 20px; text-align: left;
}
.menu-item svg { width: 20px; height: 20px; }
.menu-item.is-active { background: var(--picked); }
@media (hover: hover) { .menu-item:not(.is-active):hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); } }
.qa-head { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 4px 0 24px; background: var(--db-f2f2f2, #f2f2f2); }
.qa-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 24px; }
.qa-close { width: 36px; height: 36px; border-radius: 999px; }
.qa-close svg { width: 20px; height: 20px; }
/* "Ajustes de acciones rápidas": accent text link 10px under the last row. */
.qa-link { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--accent); font: 500 15px/20px var(--font); cursor: pointer; }
.qa-link:hover { text-decoration: underline; }
/* Ajustes de tu calendario › "Mostrar acciones rápidas en el calendario", 48×24 switch on the right. */
.setting-switch { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; cursor: pointer; }
.setting-switch > span { display: flex; flex-direction: column; padding: 2px 0; }
.ss-label { font: 400 15px/20px var(--font); color: var(--ink); }
.ss-desc { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 48px; height: 24px; margin: 0; border-radius: 999px; background: var(--db-131313-17, rgba(19, 19, 19, 0.17)); cursor: pointer; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 18px; border-radius: 999px; background: var(--db-ffffff, #fff); transition: transform .2s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- 3 días / Semana / Mes ---------- */
.alt-view { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; overscroll-behavior-x: none; scrollbar-width: none; background: var(--bg); }
.calendar::-webkit-scrollbar, .alt-view::-webkit-scrollbar { display: none; }

/* Swipe strip: the neighbouring date drawn next to the grid while dragging.
   Its own hours/team column is hidden: the real one stays fixed on top. */
.strip-neighbor { overflow: hidden !important; scroll-snap-type: none !important; background: var(--bg); }
.strip-neighbor .cal-gutter, .strip-neighbor .cal-corner,
.strip-neighbor .agrid-res > *, .strip-neighbor .agrid-corner, .strip-neighbor .hscroll { visibility: hidden; }
.agrid-res, .agrid-corner { position: relative; z-index: 2; }
/* Divider where the two dates meet: a fine line with a soft shadow, as in the reference. */
.strip-sep {
  position: absolute; width: 1px; z-index: 3; pointer-events: none;
  background: var(--db-dcdcdc, #dcdcdc);
  box-shadow: 0 0 8px 1px rgba(19, 19, 19, 0.08);
}
body.is-panning, body.is-panning * { user-select: none; -webkit-user-select: none; }
body.is-panning .calendar, .calendar.is-stripping { scroll-snap-type: none; }
/* While the previous date slides in, our head's corner space (the hours column moved
   aside) must not hide its last column's name: only the columns keep the white. */
.calendar.is-stripping > .cal-head { background: transparent; }
.calendar.is-stripping > .cal-head .resource { background: var(--db-ffffff, #fff); }
.agrid-head, .agrid-body { display: grid; min-width: 100%; }
.agrid-head {
  position: sticky; top: 0; z-index: 3; height: 62px;
  background: var(--db-ffffff, #fff); box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.08);
}
.day-head {
  margin: 0 4px; padding: 0 0 0 8px; border-radius: 12px;
  display: flex; align-items: center; gap: 4px;
}
@media (hover: hover) { .day-head:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); } }
.day-head.is-hot { background: var(--db-131313-4, rgba(19, 19, 19, 0.04)); }
.day-num { padding: 4px 8px; font-size: 17px; font-weight: 500; line-height: 24px; }
.day-name { font-size: 15px; font-weight: 500; line-height: 20px; }
.day-head.is-today .day-num { background: var(--accent); color: #fff; border-radius: 999px; }
.agrid-body { gap: 1px; background: var(--line); grid-auto-rows: 173px; padding-top: 1px; }
.agrid-res {
  background: var(--db-ffffff, #fff); padding: 0 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.agrid-res .avatar { width: 40px; height: 40px; font: 600 13px/16px var(--font); }
.agrid-res-name { font-size: 13px; font-weight: 600; line-height: 16px; text-align: center; }
.acell, .mcell {
  background: var(--db-ffffff, #fff); padding: 6px; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
}
.acell.is-off, .mcell.is-off {
  background-color: var(--off);
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--off-stripe) 6px 7.5px);
}
@media (hover: hover) {
  /* Also over days off: the lilac replaces the hatching while hovered (as in the reference). */
  .acell:hover, .mcell:hover { background: var(--picked); box-shadow: inset 0 0 0 1px var(--ds-c6bdfb, #c6bdfb); }
}
.acell.is-picked, .mcell.is-picked { background: var(--picked); box-shadow: inset 0 0 0 1px var(--ds-c6bdfb, #c6bdfb); }
.abar {
  flex: none; height: 24px; padding: 4px; border-radius: 4px;
  background: var(--appt); color: var(--appt-ink);
  display: flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 13px; line-height: 16px; text-align: left; white-space: nowrap; overflow: hidden;
}
.abar-time { font-weight: 400; flex: none; }
.abar-client { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .abar:hover { box-shadow: inset 0 0 0 2px var(--accent); } }
.abar.is-pending { opacity: 0.65; }
.abar.is-failed { background: var(--db-ffd6dd, #ffd6dd); }

.mgrid-head {
  position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--db-ffffff, #fff); box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.08);
}
.mgrid-wd { height: 44px; padding: 12px; font-size: 15px; font-weight: 500; line-height: 20px; }
.mgrid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 144px;
  gap: 1px; background: var(--line); padding-top: 1px;
}
.mday { margin: 0; font-size: 13px; font-weight: 600; line-height: 20px; display: flex; align-items: center; gap: 4px; }
.mcell.is-off .mday { color: var(--df-767676, #767676); }
.today-pill {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: #fff; line-height: 20px; text-align: center;
}
.mmore { align-self: flex-start; font-size: 13px; font-weight: 600; line-height: 16px; color: var(--accent); padding: 2px 4px; }

/* ---------- Mobile-only pieces (hidden on desktop) ---------- */
.mobile-date {
  height: 48px; padding: 0 12px 0 12px; margin-left: 0;
  align-items: center; gap: 8px; border-radius: 999px;
  font-size: 17px; font-weight: 600; line-height: 24px; white-space: nowrap;
}
@media (hover: hover) { .mobile-date:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, 0.06)); } }
.mobile-date svg { width: 24px; height: 24px; }

.hscroll {
  position: sticky; left: 0; top: var(--head-h); z-index: 6;
  height: 0; width: 100%;
}
.hscroll::before, .hscroll-thumb {
  content: ""; position: absolute; top: 8px; height: 4px; border-radius: 999px;
}
.hscroll::before { left: calc(50% - 60px); width: 120px; background: var(--line); }
.hscroll-thumb { left: calc(50% - 60px); width: 40px; background: var(--ink); transition: opacity .2s; }

.float-actions {
  position: absolute; right: 20px; bottom: 21px; z-index: 10;
  display: flex; flex-direction: column; gap: 8px;
}
.float-btn {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--db-ffffff, #fff); border: 1px solid var(--border);
  display: grid; place-items: center;
  box-shadow: 0 8px 32px rgba(19, 19, 19, 0.16);
}
.float-btn svg { width: 24px; height: 24px; }

.bottom-nav {
  grid-area: bottom;
  height: calc(65px + env(safe-area-inset-bottom));
  padding: 4px 12px env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: var(--db-ffffff, #fff);
  justify-content: space-between; align-items: center;
}
.bottom-item { width: 70px; height: 56px; display: grid; place-items: center; border-radius: 8px; color: var(--ink); cursor: pointer; }
.bottom-item svg { width: 28px; height: 28px; }
.bottom-item.is-active { color: var(--accent); }
.bottom-add { width: 52px; height: 40px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.bottom-add svg { width: 26px; height: 26px; }

.sheet-scrim { position: fixed; inset: 0; z-index: 22; background: var(--db-131313-25, rgba(19, 19, 19, 0.25)); }
.date-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: 11px; z-index: 23;
  background: var(--db-ffffff, #fff); border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column;
  animation: sheet-up .22s ease-out;
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
.date-sheet-head { display: flex; justify-content: flex-end; padding: 16px 16px 0; }
.date-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 20px 8px; scrollbar-width: none; }
.date-chips::-webkit-scrollbar { display: none; }
.chip {
  height: 36px; padding: 0 15px; flex: none;
  border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff);
  font-size: 15px; font-weight: 500;
}
.date-months { flex: 1; overflow-y: auto; padding: 8px 20px 32px; }
.month { margin-bottom: 24px; }
.month-title { margin: 16px 0 8px; font-size: 20px; font-weight: 600; line-height: 28px; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.weekday, .day { height: 44px; display: grid; place-items: center; font-size: 15px; line-height: 20px; }
.weekday { color: var(--df-767676, #767676); }
.day span {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-weight: 500;
}
/* Same marks as the desktop picker (Fresha): rounded squares, today a 1px grey ring, the day
   on screen filled with the accent and ringed. */
@media (hover: hover) { .day:hover span { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); box-shadow: 0 0 0 2px rgba(19, 19, 19, 0.04); } }
.day.is-today span { box-shadow: inset 0 0 0 1px var(--ds-bfbfbf, rgb(191, 191, 191)); }
.day.is-selected span { background: var(--accent); color: #fff; box-shadow: inset 0 0 0 1px var(--ds-ffffff, #fff), 0 0 0 2px var(--accent); }

.only-mobile { display: none !important; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .hide-tablet { display: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root {
    --topbar-h: 60px;
    --head-h: 71px;
    --gutter-w: 48px;
    /* Three team members per screen. */
    --lane-min: calc((100vw - var(--gutter-w)) / 3);
  }
  .only-mobile { display: inline-grid !important; }
  .hide-mobile { display: none !important; }
  .mobile-date { display: inline-flex !important; }
  .bottom-nav { display: flex !important; }
  .float-actions { display: flex !important; }
  .hscroll { display: block !important; }
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr auto;
    grid-template-areas: "top" "main" "bottom";
  }
  .sidebar, .toolbar { display: none; }
  .topbar { padding: 0 20px 0 8px; gap: 0; border-bottom: 0; }
  .topbar-actions { gap: 0; }
  .avatar.avatar-user, .avatar-user {
    width: 32px; height: 32px; margin-left: 8px; box-shadow: none;
    background: var(--db-f0f0ff, #f0f0ff); border-color: var(--de-f0f0ff, #f0f0ff); color: var(--accent);
    font: 600 11px/14px var(--font);
  }
  .cal-head { box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.08); }
  .resource { gap: 8px; padding: 0 4px; border-right: 1px solid var(--line-soft); }
  .avatar { width: 28px; height: 28px; font: 600 11px/14px var(--font); box-shadow: 0 0 0 2px var(--ds-c3e9fb, #c3e9fb); }
  .resource-name { font-size: 11px; line-height: 12px; }
  .hour-label { text-align: left; padding-left: 10px; }
  .drawer { width: 100vw; box-shadow: none; animation-name: sheet-in; }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
  .drawer-head { padding: 16px 16px 8px 20px; flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .drawer-head .icon-btn { align-self: flex-end; }
  .drawer-head h2 { font-size: 28px; line-height: 36px; }
  .drawer-body { padding: 12px 20px; }
  .drawer-foot { padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); }
  /* iOS zooms the page when focusing a field under 16px and leaves it zoomed. */
  .field input, .field select { font-size: 16px; }
}

/* ---------- Team filter menu ---------- */
.popover-team { width: 338px; padding: 8px; max-height: calc(100vh - 140px); overflow-y: auto; }
.team-search {
  display: flex; align-items: center; gap: 4px; height: 36px; margin: 8px 4px 12px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 8px;
}
.team-search:focus-within { border-color: var(--accent); }
.team-search svg { width: 20px; height: 20px; color: var(--ink-2); }
.team-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; }
.menu-sep { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.menu-check { cursor: pointer; }
.menu-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.mini-avatar {
  width: 24px; height: 24px; border-radius: 999px; flex: none;
  display: grid; place-items: center; background: var(--avatar-bg); color: var(--avatar-ink);
  font-size: 9px; font-weight: 600; line-height: 1;
}

/* ---------- Nobody to show (measured on the reference) ---------- */
.cal-lanes.is-empty { background: var(--db-ffffff, #fff); }
.cal-empty, .agrid-empty { flex: 1; display: flex; justify-content: center; }
.cal-empty { position: relative; }
.cal-empty-box {
  position: sticky; top: calc(var(--head-h) + 22vh); align-self: flex-start;
  width: 446px; max-width: calc(100% - 32px); margin-top: 22vh;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.agrid-empty { padding: 22vh 16px 0; }
.cal-empty-art { width: 56px; height: 56px; margin-bottom: 16px; }
.cal-empty-title { margin: 0 0 4px; font-size: 20px; font-weight: 600; line-height: 28px; }
.cal-empty-sub { margin: 0 0 24px; font-size: 15px; line-height: 20px; color: var(--df-767676, #767676); }
.cal-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* As in the reference: with nobody shown, only the time pill stays (no red line across). */
.cal-lanes.is-empty .now-line { display: none; }

/* ---------- Account menu (avatar) ---------- */
.popover-account { width: 260px; }
.account-head { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.account-head strong { font-size: 15px; font-weight: 600; }
.account-head span { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Team photos fill their circle in the calendar too. */
.avatar > img, .mini-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; display: block; }
.avatar { overflow: hidden; }
/* The rail's section panel (nav-flyout.js), as Fresha's: 208 wide over the page,
   titles 17/24 600, options 44 high 15/20 500, a line between groups. */
.rail-fly { position: fixed; bottom: 0; z-index: 25; width: 208px; transform: translateX(-230px); transition: transform .3s cubic-bezier(.16, 1, .3, 1); background: var(--db-ffffff, #fff); border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); box-shadow: 0 2px 8px rgba(19, 19, 19, .08), 0 4px 20px rgba(19, 19, 19, .12); }
.rail-fly-in { height: 100%; padding: 24px 8px 0; overflow-y: auto; }
/* "Ocultar menú de navegación": 36 white circle on the edge, 18px from the top. */
.rail-fly-x { position: absolute; top: 18px; right: -18px; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); color: var(--ink); cursor: pointer; }
.rail-fly-x:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.rail-fly-x svg { width: 20px; height: 20px; }
.rail-fly h2 { margin: 0 0 8px; padding: 0 16px; font: 600 17px/24px var(--font); letter-spacing: -0.2px; white-space: nowrap; }
.subnav.is-covered { visibility: hidden; }
.rail-fly-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; }
.rail-fly-item:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.rail-fly-item.is-active { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.rail-fly-sep { padding: 0 12px 24px; }
.rail-fly-sep hr { margin: 8px 0 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
/* The icon whose panel is out turns purple at once, and is then the only one marked
   (Fresha greys it and keeps the section on screen purple, so two look selected). */
.sidebar .nav-item.is-open svg { background: var(--accent); }
.sidebar:has(.nav-item.is-open) .nav-item.is-active:not(.is-open) svg { background: none; }
.sidebar:has(.nav-item.is-open) .nav-item.is-active:not(.is-open):hover svg { background: rgba(255, 255, 255, 0.12); }
/* Rail icon names (nav-flyout.js): Fresha's bubble with its arrow. */
.rail-tip { position: fixed; z-index: 60; padding: 8px 12px; border-radius: 8px; background: var(--db-0d0d0d, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); font: 500 15px/20px var(--font); white-space: nowrap; pointer-events: none; }
.rail-tip::before { content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--db-0d0d0d, rgb(13, 13, 13)); border-radius: 0 0 0 2px; transform: rotate(45deg); }
.rail-fly.in { transform: none; transition-delay: .06s; }
/* The rail stays above the panel it slides out of. */
.sidebar { position: relative; z-index: 26; }
/* Moving between pages: the new page replaces the old one in place, with the top
   bar, the rail and the side menu kept still (no white flash between pages). */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.sidebar { view-transition-name: rail; }
.subnav { view-transition-name: subnav; }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
/* The placeholder a page shows the first time, until its data arrives. */
.sk { max-width: 1200px; margin: 0 auto; }
.sk-h { margin: 0; font: 600 28px/36px var(--font); letter-spacing: -0.2px; color: var(--ink); }
.sk-bar { border-radius: 999px; background: var(--db-ebebeb, rgb(235, 235, 235)); }
.sk-row { display: flex; gap: 8px; }
.sk-card { margin-top: 24px; padding: 8px 24px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px rgba(19, 19, 19, .1); }
.sk-line { height: 58px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--de-f2f2f2, rgb(242, 242, 242)); }
.sk-line:last-child { border-bottom: 0; }

/* ---------- "Nueva cita" (public/calendar/new-appointment.js), measured on the reference ---------- */
/* No scrim, as Fresha: the agenda keeps its block and takes clicks. The round buttons
   (Cerrar, Minimizar cajón, Mostrar cita) float 12px left of the drawer. */
.na { position: fixed; top: 0; right: 0; bottom: 0; z-index: 21; display: flex; align-items: flex-start; gap: 12px; pointer-events: none;
  animation: na-slide .3s cubic-bezier(0, 0.55, 0.45, 1); }
/* Measured on the reference: in from the right with the round buttons, 0.3s easing out;
   out without them, accelerating. */
@keyframes na-slide { from { transform: translateX(100%); } }
.na.is-leaving { transform: translateX(100%); transition: transform .22s cubic-bezier(0.55, 0, 1, 0.45); pointer-events: none; }
.na.is-leaving > * { pointer-events: none; }
.na.is-leaving .na-side { visibility: hidden; }
.na[hidden] { display: none; }
.na > * { pointer-events: auto; }
.na-side { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.na-fab { width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transition: transform .1s; }
.na-fab:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.na-fab:active { transform: scale(0.96); }
.na-fab svg { width: 24px; height: 24px; }
.na-mini { position: fixed; right: 16px; bottom: 8px; z-index: 21; width: 316px; height: 56px; border-radius: 12px; background: var(--db-0d0d0d, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); display: flex; align-items: center; box-shadow: var(--pop-shadow); animation: na-in .2s ease-out; }
.na-mini-open { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 12px; padding: 0 0 0 16px; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.na-mini-open .av { width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--db-f0f0ff, #f0f0ff); color: var(--accent); display: flex; align-items: center; justify-content: center; font: 600 13px/16px var(--font); }
.na-mini-open .av svg { width: 20px; height: 20px; }
.na-mini-open b { font: 600 15px/20px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-mini-x { width: 40px; height: 40px; margin-right: 8px; border: 0; border-radius: 999px; background: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.na-mini-x:hover { background: rgba(255, 255, 255, 0.12); }
.na-mini-x svg { width: 24px; height: 24px; }
.na-confirm { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: var(--db-000000-24, rgba(0, 0, 0, 0.24)); }
.na-cbox { position: relative; width: 100%; max-width: 504px; padding: 32px; box-sizing: border-box; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: var(--pop-shadow); font-family: var(--font); color: var(--ink); }
.na-cbox h2 { margin: 0 40px 24px 0; font: 600 20px/28px var(--font); }
.na-cbox.wide { max-width: 717px; padding: 48px; }
.na-cbox.wide h2 { font-size: 24px; line-height: 32px; margin-top: 8px; }
.na-cbox p { margin: 0 0 56px; font: 400 15px/20px var(--font); }
.na-cx { position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.na-cx svg { width: 24px; height: 24px; }
/* «No se puede cancelar la cita», measured on Fresha: 512 wide, 299 high; a sheet from the bottom on phones. */
.na-confirm.va-past { background: var(--db-131313-25, rgba(19, 19, 19, .25)); }
.va-past .na-cbox { max-width: 512px; padding: 30px 48px 32px; border-radius: 30.48px; 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; }
.va-past .na-cbox h2 { margin: 0 40px 32px 0; }
.va-past .na-cbox p { margin: 0 0 89px; }
.va-past .na-cx { top: 20px; right: 36px; width: 48px; height: 48px; }
.va-past .na-cbtns .na-btn { width: 100%; height: 48px; }
@media (max-width: 767px) {
  .na-confirm.va-past { padding: 0; place-items: end stretch; }
  .va-past .na-cbox { max-width: none; padding: 20px 20px calc(16px + env(safe-area-inset-bottom)); border-radius: 30.48px 30.48px 0 0; }
  .va-past .na-cx { top: 10px; right: 8px; }
  .va-past .na-cbox p { margin-bottom: 32px; }
}
.na-cbtns { display: flex; gap: 8px; }
.na-cbtns .na-btn.danger { background: rgb(212, 22, 58); border-color: var(--de-d4163a, rgb(212, 22, 58)); color: #fff; }
.na-drawer { position: relative; height: 100%; display: flex; background: var(--db-ffffff, #fff); box-shadow: var(--pop-shadow); font-family: var(--font); color: var(--ink); }
@keyframes na-in { from { transform: translateX(40px); opacity: 0; } }
.na-drawer .av { width: 64px; height: 64px; flex: none; border-radius: 999px; background: var(--db-f0f0ff, #f0f0ff); color: var(--accent); display: flex; align-items: center; justify-content: center; font: 600 20px/28px var(--font); overflow: hidden; }
.na-drawer .av img { width: 100%; height: 100%; object-fit: cover; }
.na-drawer .av.ic svg { width: 32px; height: 32px; }
/* Client column: 160 px, 320 px while picking or with a client. */
.na-cl { width: 160px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.na-cl.wide { width: 320px; }
.na-walk { flex: 1; border: 0; background: none; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; font: inherit; color: inherit; }
.na-walk:hover { background: var(--db-131313-3-h, rgba(19, 19, 19, 0.03)); }
.na-walk .av { width: 48px; height: 48px; margin-bottom: 16px; }
.na-walk .av svg { width: 24px; height: 24px; }
.na-walk b { font: 600 17px/24px var(--font); }
.na-walk small { margin-top: 4px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-clh { padding: 32px 32px 17px; }
.na-clh p { margin: 0 0 24px; font: 600 20px/28px var(--font); }
.na-search { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--db-ffffff, #fff); }
.na-search:focus-within, .na-search.on { border-color: var(--accent); }
.na-search svg { width: 20px; height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.na-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: 400 15px/20px var(--font); background: none; }
.na-cll { flex: 1; overflow: auto; }
.na-cll hr { margin: 0 32px; border: 0; border-top: 1px solid var(--line); }
.na-cr { width: 100%; height: 96px; padding: 16px 32px; border: 0; background: var(--db-ffffff, #fff); display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: 5px; }
.na-cr:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.na-cr b { font: 600 15px/20px var(--font); }
.na-cr .tx { display: flex; flex-direction: column; min-width: 0; }
.na-cr small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-sel { border: 0; background: none; padding: 32px 32px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.na-sel .av { margin-bottom: 12px; }
.na-sel b { font: 600 20px/28px var(--font); }
.na-sel small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-cl > .na-pill { margin: 0 32px; align-self: flex-start; }
/* Main column: 480 px. */
.na-main { width: 480px; flex: none; display: flex; flex-direction: column; position: relative; background: var(--db-ffffff, #fff); }
.na-over { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; }
.na-head { padding: 32px 32px 32px; border-bottom: 1px solid var(--line); }
.na-date { position: relative; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font: 600 28px/36px var(--font); color: inherit; }
.na-date svg { width: 24px; height: 24px; }
.na-date input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.na-when { margin-top: 4px; display: flex; align-items: center; gap: 6px; font: 400 15px/20px var(--font); }
.na-time { position: relative; cursor: pointer; }
.na-time:hover, .na-link:hover { text-decoration: underline; }
.na-time select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.na-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.na-body { flex: 1; overflow: auto; padding: 32px; }
.na-h { margin: 0 0 16px; font: 600 17px/24px var(--font); }
.na-empty { height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-pill { height: 36px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 500 15px/20px var(--font); color: var(--ink); }
.na-pill:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.na-pill svg { width: 20px; height: 20px; }
.na-card { position: relative; display: flex; gap: 16px; padding: 12px 0 12px 20px; margin-bottom: 16px; }
.na-card > i, .na-row > i { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 999px; }
.na-card .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.na-card .tx b, .na-row .tx b { font: 500 17px/24px var(--font); }
.na-card .tx small, .na-row .tx small { margin-top: 2px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-card .pr, .na-row .pr { flex: none; font: 500 17px/24px var(--font); }
.na-hit { position: absolute; inset: -8px; border: 0; background: none; border-radius: 15px; cursor: pointer; }
.na-hit:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.na-card .tx, .na-card .pr { position: relative; pointer-events: none; }
.na-card .acts { position: absolute; right: 0; top: 4px; display: none; gap: 0; background: var(--db-f7f7f7, rgb(247, 247, 247)); border-radius: 999px; }
.na-card:hover .acts, .na-card:focus-within .acts { display: flex; }
.na-card:hover .pr { visibility: hidden; }
.na-ib { width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.na-ib:hover { background: var(--db-131313-6-h, rgba(19, 19, 19, 0.06)); }
.na-ib svg { width: 20px; height: 20px; }
/* "Precios inteligentes disponibles": the reference's green tag (body.xs.medium). */
.na-tag { margin-top: 12px; display: inline-flex; align-items: center; min-height: 24px; padding: 0 12px; border-radius: 999px; background: var(--db-edfbe9, rgb(237, 251, 233)); box-shadow: inset 0 0 0 1px var(--ds-edfbe9, rgb(237, 251, 233)); color: var(--df-1f8900, rgb(31, 137, 0)); font: 500 13px/16px var(--font); white-space: nowrap; }
.na-foot { padding: 16px 32px 16px; background: var(--db-ffffff, #fff); border-top: 1px solid var(--line); }
.na-tot { display: flex; justify-content: space-between; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-tot.big { font: 600 17px/24px var(--font); color: var(--ink); margin-bottom: 16px; }
.na-tot.big small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); margin-right: 8px; }
.na-pay { display: flex; justify-content: space-between; margin: 2px 0 12px; font: 600 17px/24px var(--font); }
.na-btns { display: flex; gap: 8px; }
.na-round { width: 48px; height: 48px; flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.na-round svg { width: 24px; height: 24px; }
.na-btn { flex: 1; height: 48px; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); font: 600 17px/24px var(--font); color: var(--ink); cursor: pointer; }
.na-btn:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.na-btn.dark { background: var(--ink); border-color: var(--ink); color: var(--do-ffffff, #fff); }
.na-btn.dark:hover { background: var(--db-262626-h, rgb(38, 38, 38)); }
.na-btn:active, .na-pill:active, .na-round:active { transform: scale(0.96); }
/* "Añadir un servicio" / "Editar servicio", over the main column. */
.na-top { padding: 32px 32px 0; }
.na-h1 { margin: 12px 32px 0; font: 600 28px/36px var(--font); }
.na-first .na-h1 { margin-top: 32px; }
.na-sbox { padding: 16px 32px; }
.na-list { flex: 1; overflow: auto; padding: 0 32px 32px; }
.na-grp { padding-bottom: 8px; }
.na-gt { margin: 16px 0 24px; display: flex; align-items: center; gap: 8px; font: 600 20px/28px var(--font); }
.na-n { height: 20px; padding: 0 6px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-767676, rgb(118, 118, 118)); font: 500 13px/20px var(--font); }
.na-row { position: relative; width: 100%; display: flex; gap: 16px; padding: 12px 0 12px 20px; margin-bottom: 16px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.na-row::before { content: ""; position: absolute; inset: -8px; border-radius: 15px; z-index: -1; }
.na-row:hover::before { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.na-row { isolation: isolate; }
.na-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.na-none { margin: 24px 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-ebody { flex: 1; overflow: auto; padding-bottom: 24px; }
.na-ebody .na-h1 { margin: 12px 0 0; }
.na-ebody { padding: 0 32px 24px; }
.na-sub { margin: 4px 0 24px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; font: 600 15px/20px var(--font); }
.na-f select, .na-in { height: 48px; border: 1px solid var(--border); border-radius: 15px; padding: 0 16px; font: 400 15px/20px var(--font); background: var(--db-ffffff, #fff); color: var(--ink); }
.na-f select:focus, .na-in:focus-within { outline: 0; border-color: var(--accent); }
.na-in { display: flex; align-items: center; gap: 8px; }
.na-in em { font-style: normal; color: var(--df-767676, rgb(118, 118, 118)); }
.na-in input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; background: none; }
.na-sm { margin: -10px 0 16px; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-a { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.na-a:hover { color: #5a3fe0; text-decoration: underline; }
.na-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 767px) {
  .na { left: 0; }
  .na-drawer { flex: 1; min-width: 0; flex-direction: column; overflow: auto; }
  .na-side { position: absolute; top: 0; right: 12px; z-index: 3; }
  .na-side .na-fab:not(:first-child) { display: none; }
  .na-cl, .na-cl.wide { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .na-walk { flex-direction: row; text-align: left; gap: 16px; padding: 24px 20px; }
  .na-walk .av { margin: 0; }
  .na-main { width: 100%; flex: 1; }
  .na-over { position: fixed; inset: 0; z-index: 4; }
}

/* ---------- Buscador (public/team/search.js), measured on the reference ---------- */
.gs { position: fixed; inset: 0; z-index: 45; }
.gs-panel { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: min(800px, calc(100vw - 32px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  border-radius: 25px; background: var(--db-ffffff-96, rgba(255, 255, 255, 0.96)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: rgba(13, 13, 13, 0.25) 0 24px 64px -12px, var(--ds-e5e5e5, rgb(229, 229, 229)) 0 0 0 1px; overflow: hidden; font-family: var(--font); color: var(--ink); }
.gs-head { flex: none; display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 12px 0 24px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.gs-lupa svg { width: 24px; height: 24px; display: block; }
.gs-head input { flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: none; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); padding-left: 8px; }
.gs-head input::placeholder { color: var(--df-bfbfbf, rgb(191, 191, 191)); }
.gs-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 9px 0 15px; border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); font: 500 15px/20px var(--font); letter-spacing: -0.1px; white-space: nowrap; }
.gs-chip button { width: 20px; height: 20px; border: 0; border-radius: 999px; background: none; display: grid; place-items: center; cursor: pointer; padding: 0; }
.gs-chip svg { width: 16px; height: 16px; }
.gs-x, .gs-f { width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: none; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.gs-x:hover, .gs-f:hover { background: var(--db-131313-5-h, rgba(19, 19, 19, 0.05)); }
.gs-x svg { width: 20px; height: 20px; }
.gs-f svg { width: 24px; height: 24px; }
.gs-body { flex: 1; overflow: auto; padding: 8px 8px 8px; }
.gs-empty { margin: 0; padding: 48px 16px 48px; text-align: center; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.gs-none { margin: 0; padding: 40px 16px; text-align: center; font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); }
/* "Búsquedas recientes" (Fresha: 15/600 title, "Borrar todos" in purple, rows of 40 px). */
.gs-rhead { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px; }
.gs-rhead b { font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.gs-rhead button { border: 0; background: none; padding: 0; font: 500 15px/20px var(--font); letter-spacing: -0.1px; color: var(--accent); cursor: pointer; }
.gs-row.gs-recent { min-height: 40px; padding: 8px 12px; }
.gs-rx { width: 24px; height: 24px; flex: none; border: 0; border-radius: 999px; background: none; display: none; place-items: center; cursor: pointer; color: var(--ink); }
.gs-rx svg { width: 16px; height: 16px; }
.gs-row.on .gs-rx, .gs-row:hover .gs-rx { display: grid; }
.gs-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 6px; }
.gs-cat { height: 36px; padding: 0 15px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); display: inline-flex; align-items: center; gap: 8px; font: 500 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); cursor: pointer; }
.gs-cat:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.gs-cat span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-767676, rgb(118, 118, 118)); font: 600 13px/20px var(--font); text-align: center; }
.gs-list { display: flex; flex-direction: column; }
.gs-row { width: 100%; min-height: 52px; padding: 6px 12px; border: 0; border-radius: 15px; background: none; display: flex; align-items: center; gap: 22px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.gs-row.on { background: var(--db-131313-4, rgba(19, 19, 19, 0.04)); }
.gs-ic { width: 20px; height: 20px; flex: none; margin-left: 10px; display: grid; place-items: center; }
.gs-ic svg { width: 20px; height: 20px; }
.gs-av { width: 40px; height: 40px; flex: none; margin-right: -12px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: grid; place-items: center; font: 600 13px/19px var(--font); overflow: hidden; }
.gs-av img { width: 100%; height: 100%; object-fit: cover; }
.gs-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-t { font: 500 15px/20px var(--font); letter-spacing: -0.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-s { font: 400 15px/20px var(--font); letter-spacing: -0.1px; color: var(--df-767676, rgb(118, 118, 118)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-path { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font: 500 15px/20px var(--font); letter-spacing: -0.1px; }
.gs-path .gs-crumb { color: var(--df-767676, rgb(118, 118, 118)); }
.gs-path b { font-weight: 500; color: var(--ink); }
.gs-path svg { width: 20px; height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.gs mark { background: var(--db-f0f0ff, rgb(240, 240, 255)); color: inherit; border-radius: 2.5px; }
.gs-pill { flex: none; height: 24px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; font: 500 13px/16px var(--font); }
.gs-pill.white { background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
.gs-pill.blue { background: var(--db-ebf3ff, rgb(235, 243, 255)); color: rgb(29, 92, 199); }
.gs-pill.green { background: var(--db-edfbe9, rgb(237, 251, 233)); color: var(--df-1f8900, rgb(31, 137, 0)); }
.gs-pill.orange { background: var(--db-fff3d6, rgb(255, 243, 214)); color: var(--df-9e5c00, rgb(158, 92, 0)); }
.gs-pill.red { background: var(--db-ffebee, rgb(255, 235, 238)); color: var(--df-d4163a, rgb(212, 22, 58)); }
.gs-more { margin: 4px 0 8px 64px; padding: 0; border: 0; background: none; font: 500 15px/20px var(--font); letter-spacing: -0.1px; color: var(--accent); cursor: pointer; }
.gs-foot { margin: 8px -8px -8px; padding: 8px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.gs-foot .gs-row { min-height: 40px; padding: 8px 12px; }
.gs-out svg { width: 20px; height: 20px; }
.gs-filters { padding: 0 12px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.gs-filters p { margin: 8px 0 8px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.gs-pick { margin: 0 -12px; padding: 0 0 0 12px; width: calc(100% + 24px); min-height: 52px; border: 0; border-radius: 15px; background: none; text-align: left; cursor: pointer; }
.gs-pick span { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); background: var(--db-ffffff, #fff); font: 500 15px/20px var(--font); letter-spacing: -0.1px; color: var(--ink); }
.gs-pick.on { background: var(--db-131313-4, rgba(19, 19, 19, 0.04)); }
@media (max-width: 767px) { .gs-panel { top: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 20px; } }

/* "Selecciona una hora para reservar" (Fresha /calendar/book-appointment). */
.book-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 70px; padding: 8px 64px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font: 700 20px/28px var(--font); letter-spacing: -0.1px; }
.book-x { position: absolute; right: 4px; top: 11px; width: 48px; height: 48px; border: 0; border-radius: 999px; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.book-x:hover { background: rgba(255, 255, 255, 0.14); }
.book-x svg { width: 24px; height: 24px; }
body.booking .topbar, body.booking .sidebar, body.booking .bottom-nav { display: none; }
body.booking .app { grid-template-columns: 0 1fr; grid-template-rows: 70px 1fr; }

/* ---------- Menú del avatar (public/team/account-menu.js), measured on the reference ---------- */
.am-menu { position: fixed; z-index: 46; width: 360px; padding: 21px 9px 9px; box-sizing: border-box; border-radius: 20px; background: var(--db-ffffff, #fff); font-family: var(--font); color: var(--ink);
  box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px, rgba(19, 19, 19, 0.04) 0 1px 8px, rgba(19, 19, 19, 0.12) 0 4px 20px; }
.am-menu hr { margin: 8px 12px; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.am-head { display: flex; align-items: center; gap: 12px; padding: 0 12px 16px; text-decoration: none; color: inherit; }
.am-av { width: 56px; height: 56px; flex: none; border-radius: 999px; background: var(--db-ebf8fe, rgb(235, 248, 254)); box-shadow: 0 0 0 1px var(--ds-ffffff, #fff); color: var(--df-0075a8, rgb(0, 117, 168)); display: grid; place-items: center; font: 600 17px/24px var(--font); }
.am-who { display: flex; flex-direction: column; min-width: 0; }
.am-who b { font: 600 20px/28px var(--font); letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-who small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.am-ref { width: calc(100% - 24px); height: 72px; margin: 0 12px; padding: 0 16px; border: 0; border-radius: 20px; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer;
  background: radial-gradient(120% 140% at 0% 100%, rgb(19, 92, 104), transparent 60%), linear-gradient(110deg, rgb(32, 74, 110), rgb(48, 154, 160)); color: #fff; font: 500 15px/20px var(--font); }
.am-ref span { flex: 1; letter-spacing: -0.2px; }
.am-ref { padding: 0 12px 0 16px; }
.am-ref svg { width: 28px; height: 28px; flex: none; }
.am-item { width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 15px; background: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; text-decoration: none; color: var(--ink); font: 500 15px/20px var(--font); letter-spacing: -0.1px; }
.am-item:hover, .am-head:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); border-radius: 15px; }
.am-pill { height: 24px; padding: 0 12px; border-radius: 999px; background: var(--db-edfbe9, rgb(237, 251, 233)); color: var(--df-1f8900, rgb(31, 137, 0)); display: inline-flex; align-items: center; font: 500 13px/16px var(--font); }
/* Drawers of the menu. */
.am-wrap { position: fixed; inset: 0; z-index: 47; background: transparent; pointer-events: none; }
.am-wrap > * { pointer-events: auto; }
.am-drawer { box-shadow: -8px 0 32px rgba(13, 13, 13, 0.12); }
.am-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; background: var(--db-ffffff, #fff); display: flex; overflow: hidden; font-family: var(--font); color: var(--ink); animation: am-in .2s ease-out; }
@keyframes am-in { from { transform: translateX(40px); opacity: 0; } }
.am-x { position: absolute; top: 12px; z-index: 1; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--border); background: var(--db-ffffff, #fff); display: grid; place-items: center; cursor: pointer; }
.am-wrap:has(.am-drawer[style*="480px"]) .am-x { right: calc(480px + 12px); }
.am-wrap:has(.am-drawer[style*="560px"]) .am-x { right: calc(560px + 12px); }
.am-wrap:has(.am-drawer[style*="592px"]) .am-x { right: calc(592px + 12px); }
.am-wrap:has(.am-drawer[style*="860px"]) .am-x { right: calc(860px + 12px); }
.am-x svg { width: 24px; height: 24px; }
.am-refd { flex-direction: column; }
.am-hero { position: relative; height: 380px; flex: none; padding: 24px; box-sizing: border-box; background: radial-gradient(90% 80% at 80% 90%, rgb(80, 170, 170), transparent 70%), linear-gradient(160deg, rgb(28, 66, 92), rgb(32, 112, 120)); color: #fff; }
.am-hero h2 { margin: 56px 0 0; max-width: 360px; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.am-pillbtn { position: absolute; top: 24px; right: 24px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6); background: none; color: #fff; font: 500 13px/16px var(--font); cursor: pointer; }
.am-body { flex: 1; overflow: auto; padding: 24px; }
.am-body h3 { margin: 0 0 16px; font: 600 20px/28px var(--font); }
.am-steps { margin: 0; padding: 0; list-style: none; }
.am-steps li { display: flex; gap: 16px; padding-bottom: 20px; }
.am-steps li > b { width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); display: grid; place-items: center; font: 600 15px/20px var(--font); }
.am-steps span { display: flex; flex-direction: column; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.am-steps strong { font: 600 17px/24px var(--font); color: var(--ink); }
.am-links { display: flex; gap: 8px; }
.am-links 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; }
.am-foot { padding: 16px 24px 24px; }
.am-foot .tbtn { width: 100%; height: 48px; justify-content: center; }
.am-wnav { width: 230px; flex: none; padding: 32px 16px; box-sizing: border-box; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; }
.am-wnav b { padding: 0 12px; font: 600 20px/28px var(--font); }
.am-wnav small { padding: 0 12px 24px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.am-wnav button { height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: none; text-align: left; font: 500 15px/20px var(--font); cursor: pointer; }
.am-wnav button.on { background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.am-wmain { flex: 1; overflow: auto; }
.am-bal { padding: 24px; background: linear-gradient(110deg, rgb(105, 80, 243), rgb(206, 92, 220)); color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.am-bal small { font: 600 13px/16px var(--font); }
.am-bal b { font: 700 40px/44px var(--font); }
.am-bal span { font: 400 13px/16px var(--font); }
.am-bal a { color: #fff; }
.am-bal .am-pillbtn { position: static; margin-top: 12px; }
.am-pad { padding: 24px; }
.am-note { display: flex; gap: 10px; padding: 16px; border-radius: 12px; background: var(--db-f0f0ff, rgb(240, 240, 255)); font: 400 15px/20px var(--font); }
.am-note svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.am-note p { margin: 0 0 8px; }
.am-note button { border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; font: 600 15px/20px var(--font); cursor: pointer; }
.am-note button svg { width: 16px; height: 16px; color: inherit; }
.am-act { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 16px; }
.am-act b { display: block; font: 600 20px/28px var(--font); }
.am-act small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.am-ib { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--db-ffffff, #fff); display: grid; place-items: center; cursor: pointer; }
.am-ib svg { width: 20px; height: 20px; }
.am-empty { padding: 48px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.am-empty > svg { width: 40px; height: 40px; color: var(--accent); margin-bottom: 8px; }
.am-empty b { font: 600 17px/24px var(--font); }
.am-empty span { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.am-empty .tbtn { margin-top: 12px; }
.am-h2 { margin: 0 0 16px; font: 600 24px/32px var(--font); }
.am-snav { width: 72px; flex: none; padding: 16px 0; border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.am-snav button { width: 64px; padding: 8px 0; border: 0; border-left: 3px solid transparent; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); cursor: pointer; }
.am-snav button svg { width: 24px; height: 24px; }
.am-snav button.on { color: var(--accent); border-left-color: var(--accent); }
.am-smain { flex: 1; overflow: auto; padding: 32px 24px; }
.am-smain h2 { margin: 0 0 24px; font: 700 28px/36px var(--font); letter-spacing: -0.3px; }
.am-smain h3 { margin: 32px 0 12px; font: 600 17px/24px var(--font); }
.am-chan { width: 100%; min-height: 72px; margin-bottom: 8px; padding: 12px 20px; border: 0; border-radius: 12px; background: linear-gradient(100deg, rgb(105, 80, 243), rgb(140, 120, 255)); color: #fff; display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; }
.am-chan svg { width: 24px; height: 24px; flex: none; }
.am-chan span { display: flex; flex-direction: column; font: 400 13px/16px var(--font); }
.am-chan b { font: 600 15px/20px var(--font); }
.am-helpc { width: 100%; height: 56px; padding: 0 16px; border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); display: flex; align-items: center; gap: 12px; text-align: left; font: 500 15px/20px var(--font); cursor: pointer; }
.am-helpc span { flex: 1; }
.am-helpc svg { width: 20px; height: 20px; }
/* "Cambiar idioma". */
.am-lwrap { position: fixed; inset: 0; z-index: 48; background: var(--db-0d0d0d-30, rgba(13, 13, 13, 0.3)); display: grid; place-items: center; padding: 16px; }
.am-ldlg { position: relative; width: min(1000px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 40px 48px 48px; box-sizing: border-box; border-radius: 20px; background: var(--db-ffffff, #fff); font-family: var(--font); }
.am-ldlg h2 { margin: 0 0 32px; font: 700 28px/36px var(--font); }
.am-ldlg p { margin: 0 0 12px; font: 600 15px/20px var(--font); }
.am-lx { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; display: grid; place-items: center; cursor: pointer; }
.am-lx svg { width: 24px; height: 24px; }
.am-lgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
.am-lang { height: 64px; padding: 0 16px; border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); background: var(--db-ffffff, #fff); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; cursor: pointer; }
.am-lang:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.am-lang.on { box-shadow: inset 0 0 0 2px var(--accent); }
.am-lang b { font: 600 15px/20px var(--font); }
.am-lang small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
@media (max-width: 767px) { .am-menu { right: 8px !important; width: calc(100vw - 16px); } .am-lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .am-wnav { display: none; } .am-x { display: none; } }

/* ---------- "Horario no disponible" (public/calendar/blocked-time.js), measured on the reference ---------- */
.bt-drawer { position: relative; width: 480px; max-width: calc(100vw - 72px); height: 100%; display: flex; flex-direction: column; background: var(--db-ffffff, #fff); box-shadow: var(--pop-shadow); font-family: var(--font); color: var(--ink); }
.bt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 32px 32px 0; }
.bt-head h1 { margin: 0; font: 600 28px/36px var(--font); transition: font-size .15s; }
.bt-drawer.scrolled .bt-head { padding: 16px 32px; box-shadow: 0 1px 0 var(--line); }
.bt-drawer.scrolled .bt-head h1 { font-size: 20px; line-height: 28px; }
.bt-more { width: 36px; height: 36px; flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bt-more svg { width: 20px; height: 20px; }
.bt-body { flex: 1; overflow-y: auto; padding: 32px 32px 24px; }
.bt-l { display: flex; align-items: baseline; gap: 4px; margin: 0 0 8px; font: 600 15px/20px var(--font); }
.bt-l em { font-style: normal; font-weight: 400; color: var(--df-767676, rgb(118, 118, 118)); }
.bt-cnt { margin-left: auto; font-weight: 400; color: var(--df-767676, rgb(118, 118, 118)); }
.bt-car { position: relative; margin: 0 -32px 24px; }
.bt-tiles { display: flex; gap: 16px; overflow-x: auto; padding: 2px 32px; scroll-padding: 0 32px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bt-tiles::-webkit-scrollbar { display: none; }
.bt-tile { flex: none; width: 160px; height: 126px; padding: 12px 8px; box-sizing: border-box; border: 0; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; cursor: pointer; color: var(--ink); text-align: center; }
.bt-tile:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.bt-tile.on { background: var(--db-f5f5f5, rgb(245, 245, 245)); box-shadow: inset 0 0 0 2px var(--accent); }
.bt-ic { height: 36px; display: flex; align-items: center; font-size: 28px; line-height: 1; margin-bottom: 8px; }
.bt-ic svg { width: 28px; height: 28px; }
.bt-tile b { font: 600 15px/20px var(--font); }
.bt-tile small { margin-top: 4px; font: 500 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); white-space: nowrap; }
.bt-tile { overflow: hidden; }
.bt-arr { position: absolute; top: 43px; z-index: 1; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bt-arr.prev { left: 20px; } .bt-arr.next { right: 20px; }
.bt-arr[hidden] { display: none; }
.bt-arr svg { width: 20px; height: 20px; }
.bt-f { margin-bottom: 24px; }
.bt-in, .bt-sel { width: 100%; height: 48px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 15px; background: var(--db-ffffff, #fff); font: 400 15px/20px var(--font); color: var(--ink); }
.bt-in { padding: 0 16px; }
.bt-in:focus, .bt-sel:focus-within { outline: 0; border-color: var(--accent); }
.bt-in::placeholder, .bt-ta::placeholder { color: var(--df-a0a0a0, rgb(160, 160, 160)); }
.bt-sel { position: relative; display: flex; align-items: center; }
.bt-sel select { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; padding: 0 44px 0 16px; border: 0; border-radius: 15px; background: none; font: inherit; color: inherit; cursor: pointer; }
.bt-sel select:focus { outline: 0; }
.bt-sel > [data-icon] { position: absolute; right: 16px; pointer-events: none; display: flex; }
.bt-sel > [data-icon] svg { width: 20px; height: 20px; }
.bt-date { padding: 0 16px; cursor: pointer; text-align: left; }
.bt-date input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.bt-emp .av { position: absolute; left: 12px; width: 32px; height: 32px; border-radius: 999px; background: var(--db-f0f0ff, #f0f0ff); color: var(--accent); display: flex; align-items: center; justify-content: center; font: 600 11px/1 var(--font); pointer-events: none; }
.bt-emp select { padding-left: 60px; }
.bt-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bt-2 .bt-f { position: relative; }
.bt-dur { display: block; margin-top: 4px; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.bt-row { display: flex; align-items: center; gap: 16px; }
.bt-row .bt-sel { width: auto; min-width: 126px; }
.bt-num { width: 90px; }
.bt-under { margin-top: 12px; }
.bt-days { display: flex; flex-wrap: wrap; gap: 4px; }
.bt-day { height: 40px; min-width: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); font: 500 15px/20px var(--font); color: var(--ink); cursor: pointer; }
.bt-day.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bt-ta { height: 120px; padding: 12px 16px; resize: none; display: block; }
.bt-check { display: flex; align-items: flex-start; gap: 12px; font: 400 15px/20px var(--font); cursor: pointer; }
.bt-check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ink); }
.bt-foot { display: flex; gap: 12px; padding: 16px 32px 16px; border-top: 1px solid transparent; }
.bt-foot .na-btn:disabled { background: var(--db-a0a0a0, rgb(160, 160, 160)); border-color: var(--de-a0a0a0, rgb(160, 160, 160)); cursor: default; }
.bt-del { width: 48px; height: 48px; flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); color: var(--df-d4163a, rgb(212, 22, 58)); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bt-del svg { width: 24px; height: 24px; }
.bt-menu { position: fixed; z-index: 30; min-width: 240px; padding: 8px; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: var(--pop-shadow); font-family: var(--font); display: flex; flex-direction: column; animation: pop-in .12s ease-out; }
.bt-menu button { height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: none; text-align: left; font: 500 15px/20px var(--font); color: var(--ink); cursor: pointer; white-space: nowrap; }
.bt-menu button:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.bt-radios { display: flex; flex-direction: column; gap: 16px; margin: 0 0 32px; font: 400 15px/20px var(--font); }
.na-cbox .bt-lead { margin: 0 0 24px; }
.bt-radios label { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.bt-radios input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.na-cbtns.end { justify-content: flex-end; }
.na-cbtns.end .na-btn { flex: none; padding: 0 24px; }
@media (max-width: 767px) { .bt-drawer { flex: 1; width: auto; max-width: none; } .bt-head { padding-right: 72px; } }

/* ---------- Toolbar tooltips (Filtros, Ajustes del calendario, Lista de espera, Restablecer vista) ----------
   Measured on the reference: black, 14/20 white, radius 15, 8px 12px, 8px under the button,
   shown and hidden at once (no fade). Not while the button's own menu is open. */
@media (hover: hover) and (pointer: fine) {
  /* Only the agenda's own toolbar: pages built with the shared frame (.team-app) use its
     JS label (shell.js), and both at once drew two boxes. */
  [data-tip]:not(.team-app [data-tip]) { position: relative; }
  [data-tip]:not(.team-app [data-tip]):hover::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 50;
    padding: 6px 12px; border-radius: 15px; background: var(--db-0d0d0d-h, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); font: 400 14px/20px var(--font); white-space: nowrap; pointer-events: none; }
  [data-tip]:not(.team-app [data-tip])[aria-expanded="true"]:hover::after { display: none; }
}
/* Filters on: the button gets the 2px accent ring, and the grid shows "N Filtros ×". */
#filter-btn.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.flt-pill { position: absolute; left: 50%; transform: translateX(-50%); z-index: 6; height: 36px; display: flex; align-items: stretch; border: 2px solid var(--accent); border-radius: 999px; background: var(--db-ffffff, #fff); box-shadow: 0 2px 8px rgba(19, 19, 19, 0.08); overflow: hidden; }
.flt-pill[hidden] { display: none; }
.flt-pill button { border: 0; background: none; cursor: pointer; color: var(--ink); font: 500 15px/20px var(--font); display: flex; align-items: center; }
.flt-pill button:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.flt-open { gap: 8px; padding: 0 14px 0 12px; }
.flt-n { min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: #fff; font: 600 11px/16px var(--font); text-align: center; }
.flt-x { width: 38px; justify-content: center; border-left: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)) !important; }
.flt-x svg { width: 20px; height: 20px; }
/* "Añadir ⌄": 212px menu, 40px rows with a 20px icon. */
.popover-add { width: auto; min-width: 214px; padding: 8px; }
.popover-add .menu-item { font-size: 15px; font-weight: 500; white-space: nowrap; padding-right: 20px; } /* Fresha, measured 7 Nov 2026 */

/* ---------- "Todos los filtros" (public/calendar/filters.js), measured on the reference ---------- */
.fl-drawer { width: 481px; }
.fl .bt-head h1 { white-space: nowrap; }
.fl-saved { height: 36px; padding: 0 12px 0 15px; display: inline-flex; align-items: center; gap: 6px; flex: none; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); cursor: pointer; font: 500 14px/20px var(--font); color: var(--ink); }
.fl-saved svg { width: 16px; height: 16px; transition: transform .15s; }
.fl-saved[aria-expanded="true"] svg { transform: rotate(180deg); }
.fl-drawer.scrolled .fl-saved { display: none; }
.fl-body { padding-top: 24px; }
.fl-sec { border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); margin-left: 36px; }
/* Hover, measured on the reference: section rows and date options get rgba(19,19,19,.04),
   radius 15, 16px past the content on each side; a checkbox row greys its box (245, ring 191). */
.fl-hd { position: relative; display: flex; align-items: center; gap: 8px; min-height: 56px; margin: 0 -16px 0 -52px; padding: 0 16px 0 52px; border-radius: 15px; cursor: pointer; }
.fl-ic { position: absolute; left: 16px; display: flex; }
.fl-ic svg { width: 24px; height: 24px; }
.fl-t { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: 500 17px/24px var(--font); color: var(--ink); }
.fl-hd:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.fl-n { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: #fff; font: 600 13px/20px var(--font); text-align: center; }
.fl-clear { border: 0; background: none; cursor: pointer; font: 500 15px/20px var(--font); color: var(--ink); padding: 0 4px; }
.fl-edit { border: 0; background: none; cursor: pointer; font: 500 15px/20px var(--font); color: var(--accent); padding: 0; }
.fl-chev { display: flex; margin-right: 12px; }
.fl-chev svg { width: 20px; height: 20px; transition: transform .15s; }
.fl-sec.open .fl-chev svg { transform: rotate(180deg); }
.fl-opts { display: flex; flex-direction: column; padding: 4px 0 20px; }
.fl-check { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; cursor: pointer; }
.fl-check input, .fl-row input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.fl-check b { display: block; padding-top: 2px; font: 500 15px/20px var(--font); }
.fl-check small { display: block; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fl-radio { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 -16px 0 -52px; padding: 0 28px 0 42px; border: 0; border-radius: 15px; background: none; cursor: pointer; text-align: left; font: 500 15px/20px var(--font); color: var(--ink); }
.fl-radio:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.fl-radio svg { width: 24px; height: 24px; }
.fl-none { margin: 0 0 20px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fl-foot .na-btn { flex: 1; }
.fl-savedmenu { min-width: 198px; }
.fl-mnone { padding: 8px 12px; color: var(--df-a0a0a0, rgb(160, 160, 160)); }
.fl-mnone b { display: block; font: 400 15px/20px var(--font); }
.fl-mnone small { display: block; font: 400 13px/16px var(--font); }
.fl-moremenu button { display: flex; align-items: center; gap: 8px; }
.fl-moremenu svg { width: 20px; height: 20px; }
.fl-dlg { max-width: 507px; }
.fl-dlg h2, .fl-dlg .fl-h { margin: 8px 40px 8px 0; font: 600 24px/32px var(--font); }
.fl-dlg p, .fl-lead { margin: 0 0 32px; font: 400 15px/20px var(--font); color: var(--ink); }
.fl-dlg .fl-lead { color: var(--df-767676, rgb(118, 118, 118)); }
.fl-lead a { color: var(--accent); text-decoration: none; }
.fl-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; font: 600 15px/20px var(--font); }
.fl-wide { width: 100%; }
.fl-dlg .na-btn.dark:disabled { background: var(--db-a0a0a0, rgb(160, 160, 160)); border-color: var(--de-a0a0a0, rgb(160, 160, 160)); cursor: default; }
.fl-danger { color: var(--df-d4163a, rgb(212, 22, 58)); }
.fl-pkdlg { max-width: 720px; height: min(771px, calc(100vh - 32px)); display: flex; flex-direction: column; padding: 48px 48px 0; border-radius: 30px; }
.fl-pkdlg .fl-h { font-size: 28px; line-height: 36px; margin-top: 24px; }
.fl-pkdlg .fl-lead { margin-bottom: 24px; }
.fl-search { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; margin: 16px 0 24px; border: 1px solid var(--border); border-radius: 15px; flex: none; }
.fl-search:focus-within { border-color: var(--accent); }
.fl-search svg { width: 20px; height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.fl-search input { flex: 1; border: 0; outline: 0; font: 400 15px/20px var(--font); }
.fl-pk { flex: 1; overflow-y: auto; margin: 0 -48px; padding: 0 48px; }
.fl-row { display: flex; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); cursor: pointer; font: 400 15px/20px var(--font); }
.fl-row b { font-weight: 600; }
.fl-row.it { min-height: 76px; margin-left: 24px; }
.fl-row.it.flat { margin-left: 0; }
.fl-row .tx { flex: 1; display: flex; flex-direction: column; }
.fl-row .nm { font: 500 15px/20px var(--font); }
.fl-row small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fl-row .pr { font: 500 15px/20px var(--font); }
.fl-cnt { padding: 0 6px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); font: 500 12px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fl-pk-foot { display: flex; align-items: center; justify-content: space-between; margin: 0 -48px; padding: 16px 48px 32px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); font: 400 15px/20px var(--font); flex: none; }
.fl-pk-foot .na-btn { flex: none; padding: 0 20px; }
/* "Gestionar filtros preestablecidos": a full page over the agenda. */
.fl-page { position: fixed; inset: 0; z-index: 35; background: var(--db-ffffff, #fff); overflow-y: auto; font-family: var(--font); color: var(--ink); }
.fl-pclose { position: fixed; top: 12px; right: 48px; flex: none; padding: 0 20px; }
.fl-pin { max-width: 690px; margin: 104px auto 48px; padding: 0 16px; }
.fl-pin h1 { margin: 0 0 32px; font: 700 40px/48px var(--font); letter-spacing: -0.5px; }
.fl-plist { display: flex; flex-direction: column; gap: 12px; }
.fl-prow { display: flex; align-items: center; gap: 8px; min-height: 68px; padding: 0 16px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 16px; }
.fl-prow b { flex: 1; font: 500 15px/20px var(--font); }
.fl-pib { width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fl-pib:hover { background: var(--db-f2f2f2-h, rgb(242, 242, 242)); }
.fl-pib svg { width: 20px; height: 20px; }
.fl-pempty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 32px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 20px; }
.fl-pempty b { margin-top: 16px; font: 600 17px/24px var(--font); }
.fl-pempty p { max-width: 520px; margin: 4px 0 0; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.fl-blob { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--db-d6c4ff, rgb(214, 196, 255)), rgb(105, 80, 243) 70%); }

/* ---------- "Pago rápido" keypad ("Introducir cantidad") ---------- */
.na-cbox.qp { max-width: 507px; }
.qp h2 { margin: 24px 0 24px; font: 600 28px/36px var(--font); }
.na-cbox.qp .qp-amt { margin: 0 0 24px; text-align: center; font: 600 40px/48px var(--font); color: var(--df-bebebe, rgb(190, 190, 190)); }
.na-cbox.qp .qp-amt.on { color: var(--ink); }
.qp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 32px; }
.qp-keys button { height: 62px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 12px; background: var(--db-ffffff, #fff); font: 600 28px/32px var(--font); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qp-keys button:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.qp-keys button:active { background: var(--db-f2f2f2-h, rgb(242, 242, 242)); transform: scale(0.98); }
.qp-keys svg { width: 28px; height: 28px; }
.qp-go { width: 100%; }
.qp-go[hidden] { display: block; visibility: hidden; }
/* Fresha's 24px checkbox: 1px grey ring, radius 8, accent with a white tick when on. */
.fl-check input, .fl-row input { appearance: none; -webkit-appearance: none; box-sizing: border-box; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 8px; background: var(--db-ffffff, #fff); display: grid; place-items: center; transition: background .1s; }
.fl-check input:hover, .fl-row input:hover { border-color: var(--de-a0a0a0, rgb(160, 160, 160)); }
.fl-check input:checked, .fl-row input:checked { background: var(--accent); border-color: var(--accent); }
.fl-check input:checked::after, .fl-row input:checked::after { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid var(--de-ffffff, #fff); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.fl-check input:focus-visible, .fl-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Columns slide aside for the drawer (revealPicked): in easing out, back accelerating. */
.cal-lanes, .cal-head .resource { transform: translateX(var(--lane-shift, 0px)); transition: transform .3s cubic-bezier(0, 0.55, 0.45, 1); }
.calendar.is-unshifting .cal-lanes, .calendar.is-unshifting .cal-head .resource { transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
.cal-corner { z-index: 2; }

/* Columns that do not fit: Fresha's round ← / → (46px, white, 1px grey) over the team heads. */
.lane-arrow { position: absolute; top: calc(var(--toolbar-h) + (var(--head-h) - 46px) / 2); z-index: 8; width: 46px; height: 46px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 50%; background: var(--db-ffffff, #fff); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); box-shadow: 0 2px 8px rgba(19, 19, 19, 0.08); }
.lane-arrow[hidden] { display: none; }
.lane-arrow:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.lane-arrow svg { width: 24px; height: 24px; }
.lane-arrow.prev { left: calc(var(--gutter-w) + 17px); }
.lane-arrow.next { right: 16px; }
.calendar.is-paging { scroll-snap-type: none; }
.fl-check:hover input:not(:checked), .fl-row:hover input:not(:checked) { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); border-color: var(--de-bfbfbf, rgb(191, 191, 191)); }
.fl-check:hover input:checked, .fl-row:hover input:checked { background: rgb(84, 64, 194); border-color: rgb(84, 64, 194); }

/* ---------- "Añadir › Venta": the checkout as a layer over the agenda (as Fresha, 219px of
   calendar left visible and the round × beside it). ---------- */
.sale-layer { position: fixed; top: 0; right: 0; bottom: 0; left: max(72px, calc(100vw - 1249px)); z-index: 22; animation: na-slide .3s cubic-bezier(0, 0.55, 0.45, 1); }
/* The checkout's panel slides in white and full from the first frame; its content arrives inside it. */
.sale-layer.is-co { background: var(--db-ffffff, #fff); }
.sale-layer.prep { visibility: hidden; animation: none; pointer-events: none; }
/* The grey blocks that pulse until the checkout covers them (Fresha: «skeletonPulse», 2 s; same sizes and
   corners as what comes: cards of 104 and 120 with 20.32). */
.co-sk { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 480px; font-family: var(--font); color: var(--ink); }
.co-sk-l { padding: 32px 32px 48px 33px; min-width: 0; }
.co-sk-l p { margin: 0 0 16px; font: 500 15px/20px var(--font); color: var(--df-acacac, rgb(172, 172, 172)); }
.co-sk-l p b { font-weight: 500; color: var(--ink); }
.co-sk h1 { margin: 0; font: 600 28px/36px var(--font); }
.co-sk-tiles { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.co-sk i { display: block; border-radius: 20.32px; background: var(--db-0d0d0d, rgb(13, 13, 13)); opacity: .05; animation: co-sk-pulse 2s ease-in-out infinite; }
.co-sk-tiles i { height: 120px; }
.co-sk-l .s { height: 48px; border-radius: 16px; }
.co-sk-tiles.cart { margin-top: 24px; gap: 12px; }
.co-sk-tiles.cart i { height: 96px; }
.co-sk-r { padding: 32px; display: flex; flex-direction: column; gap: 24px; border-left: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.co-sk-r h1 { display: none; }
.co-sk-r .c { flex: none; height: 104px; }
.co-sk-r .b { flex: 1; }
@keyframes co-sk-pulse { 50% { opacity: .1; } }
@media (prefers-reduced-motion: reduce) { .co-sk i { animation: none; } }
/* Below 1024 the checkout opens on the cart, one column. */
@media (max-width: 1023px) {
  .co-sk { display: block; }
  .co-sk-l { display: none; }
  .co-sk-r { height: 100%; box-sizing: border-box; padding: 12px 20px 16px; border: 0; gap: 16px; }
  .co-sk-r h1 { display: block; margin-top: 2px; padding-right: 56px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .co-sk-r { padding: 12px 32px 16px; } .co-sk-r h1 { font: 600 24px/32px var(--font); } }
.sale-layer.is-sale { left: 0; animation: none; background: none; }
.sale-layer.is-sale .sale-x { display: none; }
.sale-layer.is-leaving { transform: translateX(100%); transition: transform .22s cubic-bezier(0.55, 0, 1, 0.45); }
.sale-layer iframe { width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; color-scheme: light; }
.sale-x { position: absolute; left: -59px; top: 12px; width: 48px; height: 48px; }
/* Below 1024 it covers everything, the side menu too (it sits at 26). */
@media (max-width: 1023px) { .sale-layer { left: 0; z-index: 30; } .sale-x { left: auto; right: 12px; } }

/* ---------- The purple pick bar's buttons (Fresha): "Ver horarios disponibles" outlined, "Cerrar" white ---------- */
.book-btns { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; gap: 12px; }
.book-ghost, .book-close { height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: 500 15px/20px var(--font); }
.book-ghost { border: 1px solid rgba(255, 255, 255, 0.7); background: none; color: #fff; }
.book-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.book-close { border: 1px solid var(--de-ffffff, #fff); background: var(--db-ffffff, #fff); color: var(--ink); }
.book-close:hover { background: var(--db-f2f2f2-h, rgb(242, 242, 242)); }
/* Toolbar "Lista de espera" with entries: 80px and a purple count. */
#waitlist-btn.has-count { width: 80px; gap: 8px; }
.wl-count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: #fff; font: 600 13px/20px var(--font); text-align: center; }

/* ---------- "Lista de espera" (public/calendar/waitlist.js), measured on the reference ---------- */
.tbtn-d { height: 36px; padding: 0 16px; flex: none; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--do-ffffff, #fff); font: 500 15px/20px var(--font); cursor: pointer; }
.tbtn-d:hover { background: var(--db-262626-h, rgb(38, 38, 38)); }
.wl-head { align-items: flex-start; }
.wl-loc { margin: 4px 0 0; font: 500 15px/20px var(--font); color: var(--accent); }
.wl-hbtns { display: flex; gap: 12px; align-items: center; }
.wl-filters { display: flex; gap: 8px; padding: 25px 32px 0; }
.wl-pill { height: 36px; max-width: 100%; padding: 0 12px 0 15px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); cursor: pointer; font: 500 14px/20px var(--font); color: var(--ink); }
.wl-pill:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.wl-filters .wl-pill { flex: 1 1 auto; min-width: 0; justify-content: space-between; font-weight: 400; }
.wl-pill > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-pill svg { width: 16px; height: 16px; flex: none; }
.wl-tabs { display: flex; gap: 24px; padding: 16px 32px 0; margin-top: 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.wl-tabs button { display: flex; align-items: center; gap: 8px; padding: 16px 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font: 600 15px/20px var(--font); color: var(--ink); }
.wl-tabs button.on { border-bottom-color: var(--ink); }
.wl-tabs button span { min-width: 20px; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.wl-body { background: var(--db-f7f7f7, rgb(247, 247, 247)); padding-top: 24px; }
.wl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 72px 24px 0; }
.wl-ill { display: block; width: 56px; height: 56px; margin-bottom: 16px; }
.wl-empty b { font: 600 20px/28px var(--font); }
.wl-empty p { margin: 4px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.wl-group { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; font: 600 17px/24px var(--font); }
.wl-n { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--db-e5e5e5, rgb(229, 229, 229)); font: 500 12px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); text-align: center; }
.wl-n.red { background: rgb(212, 22, 58); color: #fff; }
.wl-card { margin-bottom: 16px; padding: 20px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 20px; background: var(--db-ffffff, #fff); }
.wl-ctop { display: flex; justify-content: space-between; gap: 12px; }
.wl-ctop b { display: block; font: 500 17px/24px var(--font); }
.wl-ctop small, .wl-client small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.wl-av { width: 48px; height: 48px; flex: none; border-radius: 999px; background: var(--db-f0f0ff, #f0f0ff); color: var(--accent); display: flex; align-items: center; justify-content: center; font: 600 15px/1 var(--font); }
.wl-av.big { width: 64px; height: 64px; font-size: 20px; }
.wl-av.xs { width: 20px; height: 20px; font-size: 9px; }
.wl-when { display: flex; align-items: center; gap: 6px; margin: 16px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.wl-when svg { width: 16px; height: 16px; }
.wl-card hr { margin: 16px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.wl-item { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font: 500 15px/20px var(--font); }
.wl-item small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* Fresha: the service name in 500 (not bold) and the price on one line. */
.wl-item b { font-weight: 500; }
.wl-item > span { flex: none; white-space: nowrap; }
.wl-note { margin: 8px 0; padding: 12px; border-radius: 12px; background: var(--db-f7f7f7, rgb(247, 247, 247)); font: 400 14px/20px var(--font); }
.wl-acts { display: flex; gap: 8px; margin-top: 16px; }
.wl-more { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wl-more svg { width: 20px; height: 20px; }
.wl-menu { min-width: 236px; }
.wl-menu button { display: flex; align-items: center; gap: 10px; }
.wl-menu button svg { width: 20px; height: 20px; flex: none; }
.wl-menu button .tx { flex: 1; }
.wl-menu button .tx small { display: block; font: 400 12px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.wl-menu button.danger { color: var(--df-d4163a, rgb(212, 22, 58)); }
.wl-menu hr { margin: 6px 12px; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.wl-menu .ck svg { width: 20px; height: 20px; }
.wl-wiz { padding-top: 32px; }
.wl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; font: 500 15px/20px var(--font); color: var(--df-acacac, rgb(172, 172, 172)); }
.wl-crumbs span.on { color: var(--ink); }
.wl-crumbs svg { width: 20px; height: 20px; color: var(--df-767676, rgb(118, 118, 118)); }
.wl-h1 { margin: 0 0 32px; font: 600 28px/36px var(--font); }
.wl-search { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; margin-bottom: 24px; border: 1px solid var(--accent); border-radius: 15px; }
.wl-search svg { width: 20px; height: 20px; }
.wl-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: 400 15px/20px var(--font); }
.wl-crow { display: flex; align-items: center; gap: 16px; width: calc(100% + 64px); min-height: 88px; margin: 0 -32px; padding: 12px 32px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); }
.wl-crow:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.wl-crow b { font: 600 15px/20px var(--font); }
.wl-crow small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.wl-cav { width: 64px; height: 64px; flex: none; border-radius: 999px; background: var(--db-f0f0ff, #f0f0ff); color: var(--accent); display: flex; align-items: center; justify-content: center; overflow: hidden; font: 600 20px/1 var(--font); }
.wl-cav img { width: 100%; height: 100%; object-fit: cover; }
.wl-cav.ic svg { width: 28px; height: 28px; }
.wl-hr { margin: 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.wl-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; font: 600 17px/24px var(--font); }
.wl-none svg { width: 44px; height: 44px; color: var(--accent); }
.wl-plabels { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 16px; margin-bottom: 4px; font: 600 15px/20px var(--font); }
.wl-prow { display: grid; grid-template-columns: 1fr 1fr 40px; gap: 16px; align-items: center; margin-bottom: 24px; }
.wl-prow:not(:has(.wl-bin)) { grid-template-columns: 1fr 1fr; }
.wl-plabels:has(+ .wl-prow:not(:has(.wl-bin))) { grid-template-columns: 1fr 1fr; }
.wl-field { height: 48px; min-width: 0; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 15px; background: var(--db-ffffff, #fff); cursor: pointer; font: 400 15px/20px var(--font); color: var(--ink); }
.wl-field span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-field svg { width: 20px; height: 20px; flex: none; }
.wl-bin { width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wl-bin:hover { background: var(--db-f2f2f2-h, rgb(242, 242, 242)); }
.wl-bin svg { width: 22px; height: 22px; }
.wl-sec { margin: 32px 0 16px; font: 600 17px/24px var(--font); }
.wl-client { display: flex; justify-content: space-between; gap: 12px; padding: 24px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 20px; }
.wl-client { align-items: center; }
.wl-client b { display: block; font: 600 17px/24px var(--font); }
.wl-client .wl-pill { margin-top: 12px; }
.wl-sitem { display: flex; gap: 12px; width: 100%; margin-bottom: 16px; padding: 12px 0 12px 20px; position: relative; border: 0; background: none; text-align: left; cursor: pointer; font: 500 17px/24px var(--font); color: var(--ink); }
.wl-sitem > i, .wl-svc > i { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: #a5dff8; }
.wl-sitem .tx { flex: 1; }
.wl-sitem b { font-weight: 500; }
.wl-sitem small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.wl-noteadd, .wl-noteview { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 15px; font: 400 17px/24px var(--font); }
.wl-svc { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 64px; padding: 0 16px 0 20px; margin-bottom: 24px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 15px; background: var(--db-ffffff, #fff); cursor: pointer; font: 500 15px/20px var(--font); text-align: left; }
.wl-svc span:first-of-type { flex: 1; }
.wl-svc svg { width: 20px; height: 20px; }
.wl-flabel { display: flex; flex-direction: column; gap: 8px; font: 600 15px/20px var(--font); }
.wl-pop { position: fixed; z-index: 45; padding: 20px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.1) 0 0 0 1px, var(--pop-shadow); font-family: var(--font); color: var(--ink); animation: pop-in .12s ease-out; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wl-chips button { height: 36px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); cursor: pointer; font: 500 15px/20px var(--font); color: var(--ink); }
.wl-chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wl-time { width: 484px; max-width: calc(100vw - 32px); box-sizing: border-box; }
.wl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wl-2 .bt-sel { height: 48px; }
.wl-pfoot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 20px; }
.wl-link { border: 0; background: none; cursor: pointer; font: 500 15px/20px var(--font); color: var(--ink); }
.wl-cal { width: 330px; box-sizing: border-box; }
.wl-mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font: 600 15px/20px var(--font); }
.wl-mhead button { width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wl-mhead svg { width: 18px; height: 18px; }
.wl-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 0; text-align: center; }
.wl-grid .wd { font: 400 13px/24px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.wl-grid button { height: 40px; border: 0; border-radius: 12px; background: none; cursor: pointer; font: 500 15px/20px var(--font); color: var(--ink); }
.wl-grid button:hover:not(:disabled) { background: var(--db-f2f2f2-h, rgb(242, 242, 242)); }
.wl-grid button:disabled { color: var(--df-bebebe, rgb(190, 190, 190)); cursor: default; }
.wl-grid button.now { box-shadow: inset 0 0 0 1px var(--ds-d3d3d3, rgb(211, 211, 211)); }
.wl-grid button.sel { background: var(--accent); color: #fff; box-shadow: none; }
.wl-grid button.mid { background: var(--db-f0f0ff, rgb(240, 240, 255)); border-radius: 0; }
.wl-notebox { max-width: 1000px; width: calc(100vw - 64px); }
.wl-editor { margin-bottom: 24px; padding: 12px; border: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-radius: 15px; }
.wl-tools { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); }
.wl-tools button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: 600 15px/1 var(--font); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.wl-tools button:hover { background: var(--db-f2f2f2-h, rgb(242, 242, 242)); }
.wl-tools button svg { width: 18px; height: 18px; }
.wl-tools i { width: 1px; height: 20px; margin: 0 6px; background: var(--db-e5e5e5, rgb(229, 229, 229)); }
.wl-ed { min-height: 220px; padding: 16px 4px 4px; outline: 0; font: 400 15px/20px var(--font); }
.wl-ed.empty::before { content: attr(data-ph); color: var(--df-a0a0a0, rgb(160, 160, 160)); }
.wl-nfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wl-nfoot .na-btn { flex: none; padding: 0 20px; }
.wl-nfoot .na-btn:disabled { background: var(--db-a0a0a0, rgb(160, 160, 160)); border-color: var(--de-a0a0a0, rgb(160, 160, 160)); }
.wl-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 8px; border: 1px solid var(--border); border-radius: 999px; font: 500 14px/20px var(--font); }

/* "Análisis de rendimiento" (public/reports/insights.js): Fresha's 480 px drawer, grey inside, white cards. */
.in-drawer { width: 480px; background: var(--db-f7f7f7, rgb(247, 247, 247)); }
.in-body { flex: 1; overflow-y: auto; padding: 28px 24px 32px; font-family: var(--font); color: var(--ink); }
.in-head { display: flex; justify-content: space-between; align-items: center; }
.in-head h1 { margin: 0; font: 600 28px/36px var(--font); }
.in-loc { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); cursor: pointer; }
.in-loc svg { width: 20px; height: 20px; }
.in-sub { margin: 2px 0 0; font: 400 13px/18px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.in-seg { display: flex; margin: 16px 0 24px; padding: 3px; border-radius: 999px; background: var(--db-ebebeb, rgb(235, 235, 235)); }
.in-seg button { flex: 1; height: 30px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 500 14px/20px var(--font); color: var(--ink); }
.in-seg button.on { background: var(--db-ffffff, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.in-body h2 { display: flex; align-items: center; margin: 24px 0 0; font: 600 20px/28px var(--font); }
.in-body h2:first-of-type { margin-top: 0; }
.in-body h2 a, .in-card h3 a { margin-left: auto; font: 500 14px/20px var(--font); color: var(--accent); text-decoration: none; }
.in-card { margin-top: 16px; padding: 20px; border-radius: 16px; background: var(--db-ffffff, #fff); box-shadow: rgba(19, 19, 19, 0.08) 0 0 0 1px; }
.in-card h3 { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 15px/20px var(--font); }
.in-card h3 svg { width: 16px; height: 16px; color: var(--df-a0a0a0, rgb(160, 160, 160)); }
.in-card h4 { margin: 20px 0 8px; font: 600 15px/20px var(--font); }
.in-big { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font: 600 24px/32px var(--font); }
.in-ch { display: inline-flex; align-items: center; gap: 2px; font: 500 12px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.in-ch svg { width: 12px; height: 12px; }
.in-ch.up { color: var(--df-1f8900, rgb(31, 137, 0)); }
.in-ch.down { color: var(--df-d4163a, rgb(212, 22, 58)); }
.in-bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--de-e5e5e5, rgb(229, 229, 229)); }
.in-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; }
.in-bar i { width: 60%; min-height: 1px; margin-bottom: 8px; border-radius: 4px 4px 0 0; background: var(--db-d6ceff, rgb(214, 206, 255)); }
.in-bar.on i { background: var(--accent); }
.in-bar b { font: 400 12px/14px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.in-bar small { font: 400 11px/14px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.in-bar.on b, .in-bar.on small { color: var(--ink); font-weight: 600; }
.in-list { margin: 0; padding: 0; list-style: none; }
.in-list li { display: flex; align-items: baseline; gap: 6px; min-height: 24px; font: 400 13px/18px var(--font); }
.in-list li i { flex: 1; border-bottom: 1px dotted var(--de-d3d3d3, rgb(211, 211, 211)); }
.in-list li b { font-weight: 500; }
.in-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.in-grid .in-card { margin-top: 12px; }
.in-grid .in-card.sm h3 { justify-content: space-between; }
.in-wrap .rt-empty { display: grid; place-items: center; padding: 80px 0; }
.in-wrap .rt-spin { width: 28px; height: 28px; border: 3px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-top-color: var(--accent); border-radius: 50%; animation: in-spin .8s linear infinite; }
@keyframes in-spin { to { transform: rotate(360deg); } }

/* ---------- The appointment's drawer (public/calendar/view-appointment.js), measured on the reference ---------- */
.appt.is-open { box-shadow: inset 0 0 0 2px var(--accent); }
.va .na-main { min-height: 0; }
.va-head { padding: 32px; color: #fff; }
.va-head.dark { color: var(--ink); }
.va-ht { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.va-date { margin: 0; display: inline-flex; align-items: center; gap: 4px; font: 600 28px/36px var(--font); }
.va-date svg { width: 24px; height: 24px; }
button.va-date { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.va-when { margin: 4px 0 0; display: flex; gap: 6px; font: 400 15px/20px var(--font); }
.va-pill { height: 36px; padding: 0 12px 0 16px; border: 1px solid var(--de-ffffff, #fff); border-radius: 999px; background: none; color: #fff; display: inline-flex; align-items: center; gap: 6px; font: 500 15px/20px var(--font); cursor: pointer; white-space: nowrap; }
.va-pill:hover { background: rgba(255, 255, 255, 0.12); }
.va-pill svg { width: 20px; height: 20px; }
.va-pill.dark { border-color: var(--ink); color: var(--ink); cursor: default; padding: 0 16px; }
.va-pill.dark:hover { background: none; }
.va-who { cursor: default; }
.va-walk { cursor: default; }
.va-walk:hover { background: none; }
.va-card { margin-bottom: 16px; }
.va-pay { width: 100%; display: flex; align-items: center; gap: 4px; margin: 2px 0 12px; padding: 0; border: 0; background: none; color: var(--ink); font: 600 17px/24px var(--font); cursor: pointer; text-align: left; }
.va-pay svg { width: 20px; height: 20px; }
.va-pay .sp { flex: 1; }
.va-fold { display: flex; margin: -36px auto 12px; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); align-items: center; justify-content: center; cursor: pointer; }
.va-fold svg { width: 20px; height: 20px; }
.va-strong { color: var(--ink); font-weight: 600; }
.va-hr { margin: 12px 0; border: 0; border-top: 1px solid var(--line); }
.va-menu { position: fixed; z-index: 60; min-width: 198px; padding: 8px 20px; box-sizing: border-box; border-radius: 15px; background: var(--db-ffffff, #fff); box-shadow: var(--pop-shadow); font-family: var(--font); animation: na-pop .12s ease-out; }
@keyframes na-pop { from { opacity: 0; transform: translateY(-4px); } }
.va-menu .va-mi { width: calc(100% + 24px); margin: 0 -12px; height: 40px; padding: 8px 12px; border: 0; border-radius: 15px; background: none; display: flex; align-items: center; gap: 12px; font: 400 14px/20px var(--font); color: var(--ink); cursor: pointer; text-align: left; white-space: nowrap; }
.va-menu .va-mi:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.va-menu .va-mi svg { width: 20px; height: 20px; flex: none; }
.va-menu .va-mi .ck { margin-left: auto; display: inline-flex; padding-left: 16px; }
.va-menu .va-mi.red { color: var(--df-d4163a, rgb(212, 22, 58)); }
.va-mh { margin: 8px 0 4px; font: 600 15px/20px var(--font); }
.va-ms { margin: 8px 0; border: 0; border-top: 1px solid var(--line); }
.va-act { padding-top: 24px; }
.va-ev { position: relative; padding: 0 0 16px 32px; }
.va-ev > i { position: absolute; left: 6px; top: 0; bottom: 0; width: 4px; border-radius: 999px; background: var(--db-f2f2f2, rgb(242, 242, 242)); }
.va-ev > i::before { content: ""; position: absolute; left: -2px; top: 24px; width: 8px; height: 8px; border-radius: 999px; background: var(--db-d3d3d3, rgb(211, 211, 211)); }
.va-evc { padding: 16px 20px; border: 1px solid var(--line); border-radius: 15px; display: flex; flex-direction: column; }
.va-evc b { font: 600 15px/20px var(--font); }
.va-evc small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.va-evc p { margin: 16px 0 0; font: 400 13px/18px var(--font); }
.va-hint { margin: 8px 0 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* "¿Quieres cancelar?" / "¿Seguro que quieres marcar esta cita como inasistencia?": full screen. */
.va-page { position: fixed; inset: 0; z-index: 50; background: var(--db-ffffff, #fff); overflow: auto; font-family: var(--font); color: var(--ink); animation: va-up .25s cubic-bezier(0, 0.55, 0.45, 1); }
.va-page.is-leaving { opacity: 0; transition: opacity .2s; }
@keyframes va-up { from { opacity: 0; transform: translateY(24px); } }
.va-close { position: absolute; top: 12px; right: 48px; height: 48px; padding: 0 20px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 999px; background: var(--db-ffffff, #fff); font: 600 17px/24px var(--font); color: var(--ink); cursor: pointer; }
.va-close:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.va-pin { max-width: 1184px; margin: 0 auto; padding: 108px 32px 48px; }
.va-pin h1 { margin: 0 0 32px; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.va-pg { display: flex; gap: 96px; align-items: flex-start; }
.va-pl { flex: 1; min-width: 0; max-width: 644px; }
.va-note { margin: 0 0 32px; display: flex; align-items: center; gap: 8px; padding: 16px 20px 16px 12px; border-radius: 15px; background: var(--db-f0f0ff, rgb(240, 240, 255)); font: 400 15px/20px var(--font); }
.va-note svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.va-reason select { height: 48px; }
.va-side { width: 444px; flex: none; box-sizing: border-box; padding: 40px; border-radius: 15px; background: var(--db-f9f9f9, rgb(249, 249, 249)); }
.va-side h2 { margin: 0 0 16px; font: 600 20px/28px var(--font); }
.va-side hr { margin: 16px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.va-ink { color: var(--ink); }
.va-free { margin: 0 0 32px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.va-red { width: 100%; height: 48px; border: 1px solid var(--de-d4163a, rgb(212, 22, 58)); border-radius: 999px; background: rgb(212, 22, 58); color: #fff; font: 600 17px/24px var(--font); cursor: pointer; }
.va-red:hover { background: rgb(186, 16, 48); }
.va-red:disabled { opacity: .6; cursor: default; }
@media (max-width: 900px) {
  .va-pin { padding: 84px 16px 32px; }
  .va-pin h1 { font-size: 28px; line-height: 36px; }
  .va-pg { flex-direction: column; gap: 24px; }
  .va-side { width: 100%; padding: 24px; }
  .va-close { right: 16px; }
}
/* The card shown over a block on hover. */
.va-hover { position: fixed; z-index: 30; width: 376px; border-radius: 20px; background: var(--db-ffffff, #fff); overflow: hidden; pointer-events: none; font-family: var(--font); color: var(--ink);
  box-shadow: 0 2px 8px rgba(19, 19, 19, 0.08), 0 4px 20px rgba(19, 19, 19, 0.12); animation: na-pop .12s ease-out; }
.va-hh { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; color: #fff; font: 500 15px/20px var(--font); }
.va-hh.dark { color: var(--ink); }
.va-hh .st { display: inline-flex; align-items: center; gap: 8px; }
.va-hh svg { width: 20px; height: 20px; }
.va-hb { padding: 20px; }
.va-hc { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.va-hc .av { width: 56px; height: 56px; border-radius: 999px; background: var(--db-f0f0ff, #f0f0ff); color: var(--accent); display: flex; align-items: center; justify-content: center; font: 600 20px/28px var(--font); }
.va-hc .av svg { width: 28px; height: 28px; }
.va-hc b { font: 400 17px/24px var(--font); }
.va-hs, .va-hsale { display: flex; justify-content: space-between; gap: 12px; }
.va-hs + .va-hs { margin-top: 12px; }
.va-hs b, .va-hsale b { font: 500 15px/20px var(--font); }
.va-hs > b { flex: none; white-space: nowrap; }
.va-hs small, .va-hsale small { display: block; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.va-hsale { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); align-items: center; }
.va-hsale svg { width: 24px; height: 24px; }
/* "Seleccionar artículos adicionales" (Nueva cita). */
.na-pad { margin: 4px 32px 8px; }
.na-addg small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-addon { width: 100%; min-height: 88px; margin-bottom: 12px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--db-ffffff, #fff); display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.na-addon:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.na-addon.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.na-addon .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.na-addon b { font: 500 15px/20px var(--font); }
.na-addon small { margin-top: 4px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-plus { width: 36px; height: 36px; flex: none; border: 1px solid var(--border); border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.na-addon.on .na-plus { background: var(--accent); border-color: var(--accent); color: #fff; }
.na-plus svg { width: 20px; height: 20px; }
.na-addf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.na-addf div { display: flex; flex-direction: column; }
.na-addf b { font: 600 17px/24px var(--font); }
.na-addf small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-addf .na-btn { flex: none; padding: 0 24px; }

/* 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;
}
/* Fresha's "− n +" for add-ons that allow several units. */
.na-step { flex: none; display: flex; align-items: center; height: 48px; border: 1px solid var(--border); border-radius: 15px; }
.na-step button { width: 48px; height: 46px; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); border-radius: 15px; }
.na-step button:disabled { color: var(--df-c8c8c8, rgb(200, 200, 200)); cursor: default; }
.na-step button svg { width: 20px; height: 20px; }
.na-step b { min-width: 40px; text-align: center; font: 500 17px/24px var(--font); }
/* "Añadir un tipo de horario no disponible" over the agenda (Fresha's full-screen form). */
.bt-typepage { position: fixed; inset: 0; z-index: 60; background: var(--db-ffffff, #fff); overflow: auto; font-family: var(--font); color: var(--ink); animation: va-up .25s cubic-bezier(0, 0.55, 0.45, 1); }
.bt-tp-top { position: sticky; top: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 32px; background: var(--db-ffffff, #fff); }
.bt-tp-top .na-btn { flex: none; padding: 0 20px; }
.bt-tp-in { width: min(696px, 100% - 32px); margin: 0 auto; padding: 36px 0 48px; }
.bt-tp-in h1 { margin: 0; font: 700 40px/44px var(--font); letter-spacing: -0.5px; }
.bt-tp-lead { margin: 12px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.bt-tp-f { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; font: 600 15px/20px var(--font); }
.bt-tp-in > .bt-tp-f:first-of-type { margin-top: 32px; }
.bt-tp-row { display: flex; gap: 8px; }
.bt-tp-emo { width: 48px; height: 48px; flex: none; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15px; background: var(--db-ffffff, #fff); font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bt-tp-emo svg { width: 24px; height: 24px; }
.bt-tp-f input, .bt-tp-f select { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15px; background-color: var(--db-ffffff, #fff); font: 400 15px/20px var(--font); color: var(--ink); }
.bt-tp-f input:focus, .bt-tp-f select:focus { outline: 0; border-color: var(--accent); }
.bt-tp-f input.bad { border-color: var(--de-d4163a, rgb(212, 22, 58)); }
.bt-tp-emos { margin-top: 8px; display: grid; grid-template-columns: repeat(10, 40px); gap: 4px; padding: 8px; border-radius: 15px; box-shadow: var(--pop-shadow); width: max-content; background: var(--db-ffffff, #fff); }
.bt-tp-emos[hidden] { display: none; }
.bt-tp-emos button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; font-size: 22px; cursor: pointer; }
.bt-tp-emos button:hover { background: var(--db-f2f2f2-h, rgb(242, 242, 242)); }
@media (max-width: 599px) { .bt-tp-in h1 { font-size: 28px; line-height: 36px; } .bt-tp-top { padding: 12px 16px; } .bt-tp-emos { grid-template-columns: repeat(6, 40px); } }
.bt-tp-f select { flex: none; width: 100%; }
/* "Nueva cita" with several services: the outer box only places them; each is its own block. */
.pv.pv-multi { background: none !important; box-shadow: none !important; padding: 0; overflow: visible; }
.pv-multi .pv-part { position: absolute; left: 0; right: 0; animation: none; }
/* "Editar servicio": Fresha's team member picker and its warnings. */
.na-msel { height: 48px; padding: 0 16px 0 8px; border: 1px solid var(--border); border-radius: 15px; background: var(--db-ffffff, #fff); display: flex; align-items: center; gap: 12px; cursor: pointer; font: 400 15px/20px var(--font); color: var(--ink); text-align: left; }
.na-msel b { flex: 1; min-width: 0; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.na-msel svg { width: 20px; height: 20px; }
.na-msel.bad, .na-f select.bad { border-color: var(--de-d3d3d3, rgb(211, 211, 211)); }
.na-av { width: 32px; height: 32px; flex: none; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: flex; align-items: center; justify-content: center; font: 600 11px/16px var(--font); }
.na-dot { width: 12px; height: 12px; flex: none; border-radius: 999px; background: var(--db-ffc00a, rgb(255, 192, 10)); }
.na-warn { margin: 8px 0 0; display: flex; gap: 6px; font: 400 13px/16px var(--font); color: var(--df-b7570b, rgb(183, 87, 11)); }
.na-warn svg { width: 16px; height: 16px; flex: none; }
.na-next { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-radius: 15px; background: var(--db-f7f7f7, rgb(247, 247, 247)); font: 400 13px/16px var(--font); }
.na-next span { margin-right: auto; }
.na-chip { height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); font: 500 13px/16px var(--font); color: var(--accent); cursor: pointer; }
.na-chip:hover { background: var(--db-f0f0ff-h, rgb(240, 240, 255)); }
.na-mlist { position: fixed; z-index: 40; overflow: auto; padding: 8px; border-radius: 20px; background: var(--db-ffffff, #fff); box-shadow: var(--pop-shadow); font-family: var(--font); animation: na-pop .12s ease-out; }
.na-mlist hr { margin: 8px 12px; border: 0; border-top: 1px solid var(--line); }
.na-mh { margin: 12px 12px 4px; font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-mrow { width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 12px; background: none; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; color: var(--ink); }
.na-mrow:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.na-mrow.on { background: var(--db-f0f0ff, rgb(240, 240, 255)); }
.na-mrow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.na-mrow b { font: 400 15px/20px var(--font); }
.na-mrow small { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.na-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.na-tags .na-tag { margin-top: 0; }
.na-tag.warn { gap: 6px; background: var(--db-fff4de, rgb(255, 244, 222)); box-shadow: inset 0 0 0 1px var(--ds-ffe5b5, rgb(255, 229, 181)); color: var(--df-b7570b, rgb(183, 87, 11)); }
.na-tag.warn svg { width: 16px; height: 16px; }
.na-row .na-tag, .na-card .na-tags { align-self: flex-start; }
/* ---------- Phone sheets (public/mobile-nav.js) and "Visualizaciones del calendario" ---------- */
/* Measured on Fresha's phone web: sheet radius 30 on top, × at the top right, title 28/36
   600 at 20px, rows 56px (padding 8 12, radius 15) with a 40px lilac circle and its purple icon. */
.mn-wrap { position: fixed; inset: 0; z-index: 80; font-family: var(--font); color: var(--ink); }
.mn-scrim { position: absolute; inset: 0; background: var(--db-131313-25, rgba(19, 19, 19, .25)); animation: mn-fade .2s ease-out; }
.mn-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100dvh - 48px); overflow: auto; padding: 12px 8px calc(24px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: var(--db-ffffff, #fff); box-shadow: var(--pop-shadow); animation: mn-up .25s cubic-bezier(0, 0.55, 0.45, 1); }
.mn-wrap.is-leaving .mn-sheet { transform: translateY(100%); transition: transform .2s cubic-bezier(0.55, 0, 1, 0.45); }
.mn-wrap.is-leaving .mn-scrim { opacity: 0; transition: opacity .2s; }
@keyframes mn-up { from { transform: translateY(100%); } }
@keyframes mn-fade { from { opacity: 0; } }
.mn-head { display: flex; justify-content: flex-end; padding: 0 4px; }
.mn-title { margin: 8px 12px 16px; font: 600 28px/36px var(--font); }
.mn-x { width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.mn-x svg { width: 24px; height: 24px; }
.mn-list { display: flex; flex-direction: column; }
.mn-item { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px; border-radius: 15px; color: var(--ink); text-decoration: none; }
.mn-item:active, .mn-item:hover { background: var(--db-f7f7f7-h, rgb(247, 247, 247)); }
.mn-ic { width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.mn-ic svg { width: 20px; height: 20px; }
.mn-item b { font: 500 17px/24px var(--font); }
.cv-page { position: fixed; inset: 0; z-index: 80; overflow: auto; padding: 12px 20px 32px; background: var(--db-ffffff, #fff); font-family: var(--font); color: var(--ink); animation: mn-fade .15s ease-out; }
.cv-top { display: flex; justify-content: flex-end; margin-right: -12px; }
.cv-page h1 { margin: 8px 0 24px; font: 700 28px/36px var(--font); }
.cv-views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.cv-view { height: 132px; border: 0; border-radius: 15px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; color: var(--ink); }
.cv-view.on { background: var(--db-f5f5f5, rgb(245, 245, 245)); box-shadow: inset 0 0 0 2px var(--accent); }
.cv-view svg { width: 28px; height: 28px; }
.cv-view b { font: 400 17px/24px var(--font); }
.cv-rows { display: flex; flex-direction: column; }
.cv-rows button { min-height: 72px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; display: flex; align-items: center; gap: 12px; cursor: pointer; color: var(--ink); text-align: left; }
.cv-rows button:last-child { border-bottom: 0; }
.cv-rows b { flex: 1; min-width: 0; font: 400 17px/24px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-rows svg { width: 24px; height: 24px; flex: none; }
/* Phones (Fresha's pick-from-calendar at 402 px): the purple bar sits above the agenda,
   which keeps its own top bar, columns and bottom bar; the bar says "Selecciona una hora"
   on two centred lines, "Ver horarios disponibles" as a white outlined pill and a white ×. */
@media (max-width: 767px) {
  body.booking .app { grid-template-columns: 1fr; grid-template-rows: var(--topbar-h) 1fr auto; padding-top: 64px; box-sizing: border-box; }
  body.booking .float-actions { display: none !important; }
  body.booking .appt { opacity: .45; }
  body.booking .topbar { display: flex; }
  .book-bar { height: 64px; padding: 4px 8px 4px 16px; justify-content: flex-start; gap: 8px; font: 600 17px/22px var(--font); }
  .book-t { flex: 1; min-width: 0; text-align: center; font-size: 0; }
  .book-t::after { content: attr(data-short); display: block; max-width: 120px; margin: 0 auto; font: 600 17px/22px var(--font); }
  .book-bar:has(.book-x) .book-t { font-size: 15px; line-height: 20px; }
  .book-bar:has(.book-x) .book-t::after { content: none; }
  .book-btns { position: static; transform: none; flex: none; gap: 4px; align-items: center; }
  .book-ghost { max-width: 178px; padding: 0 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .book-close { width: 48px; height: 48px; padding: 0; border: 0; background: none; font-size: 0; display: grid; place-items: center; }
  .book-close::after { content: ""; width: 24px; height: 24px; background: var(--db-ffffff, #fff);
    -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; }
  .book-close:hover { background: rgba(255, 255, 255, .14); }
  .book-x { position: static; }
}
/* Phones: the new appointment as Fresha's wizard. "Seleccionar cliente" fills the screen
   (28px title, search, Añadir un nuevo cliente, Sin cita, the clients in 96px rows with
   20px gutters), then the services; the × stays on top of every step. */
@media (max-width: 767px) {
  .na-side { z-index: 6; top: 8px; right: 8px; }
  .na-side .na-fab:first-child { border: 0; box-shadow: none; background: none; }
  .na-cl.wide:has(.na-clh) { position: fixed; inset: 0; z-index: 5; display: flex; background: var(--db-ffffff, #fff); border: 0; }
  .na-clh { padding: 62px 20px 16px; }
  .na-clh p { margin: 0 0 24px; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
  .na-cr { padding: 16px 20px; }
  .na-cll hr { margin: 0 20px; }
  .na-over { overflow-y: auto; background: var(--db-ffffff, #fff); }
  .na-over .na-h1 { margin: 62px 20px 0; }
  .na-over .na-sbox { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 767px) { .na-over .na-list { padding: 0 20px 32px; } }
/* Phones: the summary as Fresha's (24px date title under the ×, the client as a card of
   112 px with "Añadir cliente", then the time, the services and the totals). */
.na-mcl { display: none; }
@media (max-width: 767px) {
  .na-head { padding: 74px 20px 24px; }
  .na-date { font: 600 24px/32px var(--font); }
  .na-mcl { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 24px 0 16px; }
  .na-mclb { width: 100%; min-height: 112px; padding: 24px; display: flex; align-items: center; gap: 16px; border: 0; border-radius: 15.24px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); text-align: left; cursor: pointer; font: inherit; color: inherit; }
  .na-mclb .av { width: 56px; height: 56px; }
  .na-mclb .tx { display: flex; flex-direction: column; min-width: 0; }
  .na-mclb b { font: 500 17px/24px var(--font); letter-spacing: -0.2px; }
  .na-mclb small { font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
  .na-body { padding-left: 20px; padding-right: 20px; }
  .na-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
}
/* Phones: an appointment as Fresha's phone web: the coloured head reaches the top (the ×
   on it in its text colour), 24px date, and the client as a card under it. */
@media (max-width: 767px) {
  .na.va .va-head { padding: 74px 20px 24px; }
  .na.va .va-date { font: 600 24px/32px var(--font); }
  .na.va .na-side .na-fab:first-child { color: #fff; }
  .na.va:has(.va-head.dark) .na-side .na-fab:first-child { color: var(--ink); }
  .va-mcl { padding: 24px 20px 0; }
  .va-mcl .na-cl { width: 100%; border: 0; }
  .va-mcl :is(.na-walk, .na-sel) { width: 100%; min-height: 112px; padding: 24px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; text-align: left; border-radius: 15.24px; background: var(--db-ffffff, #fff); box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
  .va-mcl .na-walk b, .va-mcl .na-sel b { font: 500 17px/24px var(--font); }
  .va-mcl #cpick .av { display: none; }
}
.float-btn[hidden] { display: none; }
/* Phones (Fresha's /calendar/team-and-resources): the team filter fills the screen with a ×
   and the "Equipo y recursos" title. */
.pt-mhead { display: none; }
@media (max-width: 767px) {
  .popover.popover-team { position: fixed; inset: 0 !important; width: auto; max-height: none; padding: 0 12px 24px; border: 0; border-radius: 0; z-index: 40; animation: sheet-in .2s ease-out; }
  .pt-mhead { display: block; padding: 12px 0 8px; }
  .pt-mx { display: grid; place-items: center; width: 48px; height: 48px; margin-left: auto; border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; }
  .pt-mx svg { width: 24px; height: 24px; }
  .pt-mhead h2 { margin: 8px 8px 16px; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
  .popover-team .team-search { height: 48px; border-radius: 15.24px; }
  .popover-team .menu-item { min-height: 48px; font: 500 17px/24px var(--font); }
}
/* Add-ons: the price in black and bold (Fresha), the duration grey. On phones the step has
   only the × (no "Atrás", no lead), as Fresha's wizard. */
.na-addon .tx small em { font-style: normal; font-weight: 600; color: var(--ink); }
@media (max-width: 767px) {
  .na-addv .na-top, .na-addv .na-sub { display: none; }
}
/* Phones: Fresha's summary cards. The client card ends with a lavender 56px user-plus; the
   time card has the date (calendar icon), the start time on the right (clock) and, under a
   line, "No se repite" (repeat icon). */
@media (max-width: 767px) {
  .na-mclb .tx { flex: 1; }
  .na-mic { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); }
  .na-mic svg { width: 24px; height: 24px; }
  .na-mwhen { margin-top: 16px; padding: 20px 24px; border-radius: 15.24px; box-shadow: inset 0 0 0 1px var(--ds-e5e5e5, rgb(229, 229, 229)); }
  .na-mwhen .r { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .na-mwhen .d, .na-mwhen .na-time, .na-mwhen #rep { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/20px var(--font); color: var(--ink); }
  .na-mwhen svg { width: 20px; height: 20px; }
  .na-mwhen hr { margin: 16px 0; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .na-mwhen #rep { padding: 0; border: 0; background: none; text-decoration: none; }
}
.sale-layer.dlg .sale-x { display: none; }
/* A window in the checkout dims the agenda beside it too (the frame's own backdrop covers the rest). */
.sale-layer.dlg { z-index: 30; }
.sale-layer.dlg::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: var(--db-131313-25, rgba(19, 19, 19, .25)); }
/* Phones: the checkout's × as Fresha's (no ring), in the top bar on the right. */
@media (max-width: 1023px) { .sale-layer .sale-x { top: 12px; right: 8px; left: auto; border: 0; box-shadow: none; background: none; } }
@media (min-width: 768px) and (max-width: 1023px) { .sale-layer .sale-x { right: 20px; } }

/* ---------- Month pickers (public/calendar/date-picker.js), measured on the reference ---------- */
/* One month (appointment drawer): padding 8/20/28, 380px month. Two months (agenda bar): padding
   24/36, 353px months 32px apart, then the week chips. Every month: 48px title, 4px, 44px
   weekdays, 4px, 44px rows; the ‹ › buttons sit over the first/last month's title. */
.dp { position: fixed; z-index: 45; box-sizing: border-box; max-width: calc(100vw - 16px); padding: 8px 20px 28px; border: 1px solid transparent; border-radius: 20px; background: var(--db-ffffff, #fff); color: var(--ink);
  font-family: var(--font); box-shadow: 0 0 0 1px rgba(19, 19, 19, 0.1), 0 1px 8px rgba(19, 19, 19, 0.04), 0 4px 20px rgba(19, 19, 19, 0.12); animation: dp-in .1s linear; }
.dp.two { padding: 24px 36px; }
@keyframes dp-in { from { opacity: 0; } }
.dp-cal { position: relative; }
.dp-view { width: 380px; max-width: 100%; overflow: hidden; transition: height .4s cubic-bezier(0.4, 0, 0.2, 1); }
.dp.two .dp-view { width: 738px; }
.dp-track { display: flex; align-items: flex-start; column-gap: 32px; }
.dp-track.go { transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1); }
.dp-month { flex: none; width: 380px; max-width: 100%; }
.dp.two .dp-month { width: 353px; }
.dp-title { height: 48px; margin: 0; display: flex; align-items: center; justify-content: center; font: 600 17px/24px var(--font); }
.dp-nav { position: absolute; top: 0; width: 48px; height: 48px; border: 0; border-radius: 999px; background: none; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dp-nav.prev { left: 0; }
.dp-nav.next { right: 0; }
.dp-nav:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
.dp-nav:active { transform: scale(0.96); }
.dp-nav svg { width: 20px; height: 20px; }
.dp-week, .dp-days { display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 4px; }
.dp-week { height: 44px; margin: 4px 0; align-items: center; text-align: center; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.dp-week abbr { text-decoration: none; }
.dp-days { grid-auto-rows: 44px; }
.dp-day { position: relative; border: 0; padding: 0; background: none; color: var(--ink); cursor: pointer; font: 500 15px/20px var(--font); display: flex; align-items: center; justify-content: center; }
.dp-day i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 13px; transition: background-color .15s, box-shadow .15s; }
.dp-day b { position: relative; font: inherit; }
.dp-day:hover i { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); box-shadow: 0 0 0 2px rgba(19, 19, 19, 0.04); }
.dp-day.today i { box-shadow: inset 0 0 0 1px var(--ds-bfbfbf, rgb(191, 191, 191)); }
.dp-day.on i { background: var(--accent); box-shadow: inset 0 0 0 1px var(--ds-ffffff, #fff), 0 0 0 2px var(--accent); }
.dp-day.on { color: #fff; }
.dp-day:focus-visible { outline: none; }
.dp-day:focus-visible i { box-shadow: 0 0 0 2px var(--accent); }
/* "En 1 semana … En 5 semanas" + "Más ⌄", 36px pills 8px apart, 36px under the months. */
.dp-chips { display: flex; gap: 8px; margin-top: 36px; overflow-x: auto; scrollbar-width: none; width: 0; min-width: 100%; }
.dp-chips::-webkit-scrollbar { display: none; }
/* One month with the chips (agenda bar on tablets): the chips scroll inside the card. */
.dp:not(.two) .dp-chips { margin-top: 16px; }
.dp-chip { height: 36px; padding: 0 15px; flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--db-ffffff, #fff); color: var(--ink); cursor: pointer; font: 500 15px/20px var(--font); white-space: nowrap; }
.dp-chip:hover { background: var(--db-f4f4f4-h, #f4f4f4); }
.dp-chip svg { width: 20px; height: 20px; margin-right: -1px; }
.dp-more { margin-left: auto; }
.dp-menu { position: absolute; width: 200px; box-sizing: border-box; padding: 8px; border-radius: 20px; background: var(--db-ffffff, #fff); display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(19, 19, 19, 0.1), 0 1px 8px rgba(19, 19, 19, 0.04), 0 4px 20px rgba(19, 19, 19, 0.12); animation: dp-in .1s linear; }
.dp-menu button { height: 40px; padding: 8px 12px; border: 0; border-radius: 15px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: 400 15px/20px var(--font); }
.dp-menu button:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, 0.04)); }
/* Phones: the same card, as wide as the screen; the chips scroll sideways. */
@media (max-width: 767px) {
  .dp, .dp.two { padding: 8px 12px 16px; }
  .dp-view, .dp.two .dp-view, .dp-month, .dp.two .dp-month { width: calc(100vw - 42px); }
  .dp.two .dp-track { column-gap: 0; }
  .dp-chips { overflow-x: auto; scrollbar-width: none; margin-top: 16px; }
  .dp-chips::-webkit-scrollbar { display: none; }
}

/* AI buttons ("Generar con IA", "Mejorar"), as Fresha's: white pill with a thin violet →
   blue → pink gradient edge, a soft lilac glow and the gradient sparkle (aiIcon in icons.js). */
.ai-btn { position: relative; isolation: isolate; height: 36px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: none;
  box-shadow: var(--ds-dbddff, rgb(219, 221, 255)) 0 0 6px 4px; color: var(--ink); font: 500 15px/20px var(--font); letter-spacing: -0.1px; white-space: nowrap; cursor: pointer; transition: box-shadow .15s, transform .1s; }
.ai-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--db-ffffff, #fff); transition: background .15s; }
.ai-btn::after { content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; opacity: .4;
  background: radial-gradient(90% 120% at 85% 15%, #ff94c8, transparent 60%), radial-gradient(80% 120% at 20% 0%, #52c8ff, transparent 60%), linear-gradient(135deg, #b48cff, #7802ee); }
.ai-btn:hover::before { background: var(--db-faf9ff-h, rgb(250, 249, 255)); }
.ai-btn:hover { box-shadow: var(--ds-cfd2ff, rgb(207, 210, 255)) 0 0 8px 5px; }
.ai-btn:active { transform: scale(.96); }
.ai-btn svg { width: 20px; height: 20px; flex: none; }

/* Top bar counters (public/badges.js), measured in Fresha: a 20 px red pill with the number in
   white (13 px semibold) and a 2 px white ring, centred on the icon's top right corner. */
.topbar .icon-btn[data-badge] { position: relative; }
.topbar .icon-btn[data-badge]::after { content: attr(data-badge); position: absolute; left: calc(50% + 7px); top: 12px; transform: translate(-50%, -50%);
  min-width: 8px; height: 20px; padding: 0 6px; box-sizing: content-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: rgb(212, 22, 58); color: #fff; box-shadow: 0 0 0 2px var(--ds-ffffff, #fff); font: 600 13px/16px var(--font); pointer-events: none; }

/* Nueva cita › Editar servicio: Fresha's heart beside the team member ("Miembro preferente
   del equipo"): 48 px square, outline heart when there is no preference, filled when asked for. */
.na-erow { display: flex; gap: 8px; }
.na-erow .na-msel { flex: 1; min-width: 0; }
.na-heart { flex: none; width: 48px; height: 48px; border: 1px solid var(--de-d3d3d3, rgb(211, 211, 211)); border-radius: 15px; background: var(--db-ffffff, #fff); color: var(--df-0d0d0d, rgb(13, 13, 13)); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .1s ease-out, background-color .15s; }
.na-heart:hover { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.na-heart:active { transform: scale(.96); }
.na-heart svg { width: 20px; height: 20px; }

/* Fresha's table inside a card: on a narrow screen it scrolls sideways inside the card, with a
   light grey shadow on the side that still has more, fading out at its top and bottom (and
   when that edge is reached), never
   pushing the page. Wrap the <table> in it; the card clips it (overflow: hidden). */
.tscroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  background: linear-gradient(to right, var(--db-ffffff, #fff) 40%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--db-ffffff, #fff) 40%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='100'%20viewBox='0%200%2016%20100'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='h'%20x1='0'%20x2='1'%20y1='0'%20y2='0'%3E%3Cstop%20offset='0'%20stop-color='%23131313'%20stop-opacity='.09'/%3E%3Cstop%20offset='1'%20stop-color='%23131313'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='v'%20x1='0'%20x2='0'%20y1='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3Cstop%20offset='.15'%20stop-color='%23fff'/%3E%3Cstop%20offset='.85'%20stop-color='%23fff'/%3E%3Cstop%20offset='1'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask%20id='m'%3E%3Crect%20width='16'%20height='100'%20fill='url%28%23v%29'/%3E%3C/mask%3E%3C/defs%3E%3Crect%20width='16'%20height='100'%20fill='url%28%23h%29'%20mask='url%28%23m%29'/%3E%3C/svg%3E") left center / 16px 100% no-repeat scroll,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='100'%20viewBox='0%200%2016%20100'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='h'%20x1='1'%20x2='0'%20y1='0'%20y2='0'%3E%3Cstop%20offset='0'%20stop-color='%23131313'%20stop-opacity='.09'/%3E%3Cstop%20offset='1'%20stop-color='%23131313'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='v'%20x1='0'%20x2='0'%20y1='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3Cstop%20offset='.15'%20stop-color='%23fff'/%3E%3Cstop%20offset='.85'%20stop-color='%23fff'/%3E%3Cstop%20offset='1'%20stop-color='%23fff'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask%20id='m'%3E%3Crect%20width='16'%20height='100'%20fill='url%28%23v%29'/%3E%3C/mask%3E%3C/defs%3E%3Crect%20width='16'%20height='100'%20fill='url%28%23h%29'%20mask='url%28%23m%29'/%3E%3C/svg%3E") right center / 16px 100% no-repeat scroll; }
.tscroll > table { width: max-content; min-width: 100%; }
/* The client's booking note in the appointment, with the pictures attached when booking online. */
.va-nh { margin-top: 24px; }
.va-cnote { padding: 16px; 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)); display: flex; flex-direction: column; gap: 12px; }
.va-ctext { margin: 0; font: 400 15px/20px var(--font); white-space: pre-line; overflow-wrap: anywhere; }
.va-cimgs { display: flex; gap: 8px; flex-wrap: wrap; }
.va-cimg { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; display: block; background: var(--db-e5e5e5, rgb(229, 229, 229)); }
.va-cimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.va-cby { font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }

/* ---------- «Notificaciones» (Fresha's bell: a 613 px drawer, measured at 1470 and 402) ---------- */
.nt-wrap { position: fixed; top: 0; right: 0; bottom: 0; z-index: 56; display: flex; align-items: flex-start; gap: 11px; pointer-events: none; animation: na-slide .3s cubic-bezier(0, 0.55, 0.45, 1); }
.nt-wrap > * { pointer-events: auto; }
.nt-wrap.is-leaving { transform: translateX(100%); transition: transform .22s cubic-bezier(0.55, 0, 1, 0.45); }
.nt-wrap.is-leaving .nt-side { visibility: hidden; }
.nt-side { padding-top: 12px; }
.nt { width: 613px; height: 100%; display: grid; grid-template-columns: 133px minmax(0, 1fr); background: var(--db-f5f5f5, rgb(245, 245, 245)); box-shadow: rgba(19, 19, 19, .16) 0 8px 32px; }
.nt-rail { padding: 20px 8px; display: flex; flex-direction: column; background: var(--db-ffffff, #fff); border-right: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.nt-rail button { position: relative; min-height: 75px; padding: 12px 8px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; border-radius: 15.24px; color: var(--df-767676, rgb(118, 118, 118)); text-align: left; }
.nt-rail button:hover { background: var(--db-131313-4-h, rgba(19, 19, 19, .04)); }
.nt-count { position: absolute; left: 20px; top: 8px; z-index: 1; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--ds-ffffff, #fff); display: grid; place-items: center; font: 600 13px/16px var(--font); font-style: normal; }
.nt-rail button svg { width: 24px; height: 24px; }
.nt-rail button span { font: 500 15px/20px var(--font); }
.nt-rail button.on { color: var(--accent); }
.nt-rail button.on::before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 4px; border-radius: 999px; background: var(--accent); }
.nt-main { overflow-y: auto; padding: 32px 32px 40px; }
.nt-top { min-height: 36px; display: flex; align-items: center; gap: 12px; }
.nt-top .sp { flex: 1; }
.nt-top h1 { margin: 0; font: 600 28px/36px var(--font); }
.nt-gear { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); }
.nt-gear:hover { background: var(--db-131313-5-h, rgba(19, 19, 19, .05)); }
.nt-gear svg { width: 20px; height: 20px; }
.nt-link { color: var(--accent); font: 500 14px/16px var(--font); text-decoration: none; padding: 12px 8px; }
.nt-link:hover { text-decoration: underline; }
.nt-filter { flex: none; height: 36px; padding: 0 15px; gap: 4px; border-radius: 999px; white-space: nowrap; }
.nt-filter svg { width: 16px; height: 16px; }
.nt-h2 { margin: 32px 0 16px; font: 600 20px/28px var(--font); }
.nt-list { display: flex; flex-direction: column; gap: 16px; }
.nt-card { width: 100%; padding: 20px; display: flex; align-items: flex-start; gap: 16px; background: var(--db-ffffff, #fff); border-radius: 20.32px; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); text-align: left; color: var(--ink); }
.nt-card:hover { background: var(--db-fafafa-h, rgb(250, 250, 250)); }
.nt-card { position: relative; }
.nt-dot { position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; border-radius: 999px; background: var(--accent); }
.nt-tx { flex: 1; min-width: 0; padding-top: 4px; }
.nt-tx b { display: block; font: 600 17px/24px var(--font); }
.nt-tx small { display: block; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.nt-tx p { margin: 16px 0 0; font: 400 15px/20px var(--font); }
.nt-av { position: relative; flex: none; width: 48px; height: 48px; border-radius: 999px; background: var(--db-f0f0ff, rgb(240, 240, 255)); color: var(--accent); display: grid; place-items: center; font: 600 16px/24px var(--font); }
.nt-av i { position: absolute; left: 31px; top: 30px; width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; color: #fff; box-shadow: 0 0 0 2px var(--ds-ffffff, #fff); }
.nt-av i svg { width: 12px; height: 12px; }
.nt-av i.accent { background: var(--accent); }
.nt-av i.danger { background: rgb(212, 22, 58); }
.nt-empty { margin-top: 24px; min-height: calc(100dvh - 140px); padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--db-ffffff, #fff); border-radius: 20.32px; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1); }
.nt-empty b { margin-top: 16px; font: 600 20px/28px var(--font); }
.nt-empty p { margin: 4px 0 0; max-width: 320px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
/* A file with a magnifier in the accent colours, in place of Fresha's picture. */
.nt-ill { position: relative; width: 64px; height: 64px; }
.nt-ill::before { content: ""; position: absolute; left: 14px; top: 8px; width: 32px; height: 42px; border-radius: 6px; background: linear-gradient(160deg, rgb(160, 142, 255), rgb(105, 80, 243)); transform: rotate(-8deg); }
.nt-ill::after { content: ""; position: absolute; left: 30px; top: 28px; width: 18px; height: 18px; border-radius: 999px; border: 4px solid rgb(66, 41, 199); background: var(--db-ffffff-85, rgba(255, 255, 255, .85)); }
.nt-load { display: grid; place-items: center; padding: 80px 0; }
@media (max-width: 767px) {
  .nt-wrap { left: 0; gap: 0; }
  .nt.nt-phone { width: 100%; display: flex; flex-direction: column; box-shadow: none; }
  .nt-ph { flex: none; height: 60px; padding: 0 8px; display: flex; align-items: center; gap: 4px; background: var(--db-ffffff, #fff); }
  .nt-ph .icon-btn { width: 48px; height: 48px; }
  .nt-ph h1 { flex: 1; margin: 0; font: 600 20px/28px var(--font); }
  .nt-phone .nt-rail { flex: none; flex-direction: row; gap: 24px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
  .nt-phone .nt-rail button { min-height: 52px; padding: 16px 0; flex-direction: row; border-radius: 0; color: var(--ink); white-space: nowrap; }
  .nt-phone .nt-rail button:hover { background: none; }
  .nt-phone .nt-rail button svg { display: none; }
  .nt-phone .nt-count { position: static; order: 1; margin-left: 4px; box-shadow: none; }
  .nt-phone .nt-rail button span { font-weight: 600; }
  .nt-phone .nt-rail button.on { color: var(--ink); }
  .nt-phone .nt-rail button.on::before { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px; border-radius: 0; background: var(--ink); }
  .nt-pex { padding: 16px 20px 0; display: flex; }
  .nt-phone .nt-body { flex: 1; overflow-y: auto; padding: 0 20px 40px; }
  .nt-phone .nt-h2:first-child { margin-top: 24px; }
  .nt-empty { min-height: calc(100dvh - 180px); }
}

/* ---------- «Preferencias de notificación» (Fresha's edit-workspace-notifications-modal) ---------- */
.np-wrap { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--db-ffffff, #fff); animation: np-in .2s ease-out; }
@keyframes np-in { from { opacity: 0; transform: translateY(12px); } }
.np-bar { position: sticky; top: 0; z-index: 2; height: 72px; padding: 0 32px; display: flex; align-items: center; gap: 8px; background: var(--db-ffffff, #fff); }
.np-wrap.scrolled .np-bar { box-shadow: 0 1px 0 var(--ds-e5e5e5, rgb(229, 229, 229)); }
.np-bar .sp { flex: 1; }
.np-small { font: 600 20px/28px var(--font); opacity: 0; transition: opacity .15s; }
.np-wrap.scrolled .np-small { opacity: 1; }
.np-bar .tbtn.lg { height: 48px; padding: 0 20px; font: 600 17px/24px var(--font); }
.np-main { max-width: 632px; margin: 0 auto; padding: 36px 0 80px; }
.np-main h1 { margin: 0; font: 700 40px/44px var(--font); }
.np-lead { margin: 12px 0 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.np-lead a, .np-row a { color: var(--accent); text-decoration: none; }
.np-card { margin-top: 32px; padding: 32px 40px; background: var(--db-ffffff, #fff); border-radius: 20.32px; box-shadow: 0 0 0 1px rgba(19, 19, 19, .1), 0 2px 8px rgba(19, 19, 19, .04); }
.np-card h2 { margin: 0; font: 600 20px/28px var(--font); }
.np-card .g { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.np-h { display: flex; align-items: center; gap: 12px; }
.np-h .sp { flex: 1; }
.np-pill { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; 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); }
.np-pill.off { background: var(--db-f2f2f2, rgb(242, 242, 242)); color: var(--df-767676, rgb(118, 118, 118)); }
.np-sel { width: 100%; height: 48px; margin-top: 16px; }
.np-help { margin: 6px 0 0; font: 400 13px/16px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.np-lab { display: block; margin-top: 24px; font: 600 15px/20px var(--font); }
.np-lab + .np-sel { margin-top: 8px; }
.np-grp { margin-top: 32px; }
.np-gh, .np-row { display: grid; grid-template-columns: minmax(0, 1fr) 60px 72px 64px; gap: 8px; align-items: end; }
.np-gh b { display: block; font: 600 17px/24px var(--font); }
.np-gh small { display: block; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.np-gh > span { font: 500 13px/16px var(--font); text-align: center; }
.np-row { margin-top: 20px; align-items: center; }
.np-row h3 { margin: 0; font: 600 15px/20px var(--font); }
.np-row p { margin: 0; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.np-c { display: flex; justify-content: center; }
.np-none { color: var(--df-acacac, rgb(172, 172, 172)); font: 400 15px/20px var(--font); }
@media (max-width: 767px) {
  .np-bar { padding: 0 16px; }
  .np-main { padding: 16px 16px 60px; }
  .np-main h1 { font: 700 28px/36px var(--font); }
  .np-card { padding: 24px 20px; }
  .np-gh, .np-row { grid-template-columns: minmax(0, 1fr) 44px 56px 56px; gap: 4px; }
  .np-gh > span { font-size: 12px; line-height: 14px; }
}
/* The label over a tile's icon (Fresha: black, white text, at once). */
.appt-tip { position: fixed; z-index: 90; padding: 8px 12px; border-radius: 12px; background: var(--db-0d0d0d, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); font: 400 15px/20px var(--font); white-space: nowrap; pointer-events: none; }
.appt-tag { pointer-events: auto; }
.dp-day:disabled { color: var(--df-bfbfbf, rgb(191, 191, 191)); cursor: default; } .dp-day:disabled i { background: none !important; box-shadow: none !important; }
/* Menu items with an icon on the right (Fresha's «Subir ˄» / «Bajar ˅»), and greyed items. */
.menu-item .menu-trail { display: flex; margin-left: auto; }
.menu-item[aria-disabled="true"] { color: var(--df-acacac, rgb(172, 172, 172)); cursor: default; }
@media (hover: hover) { .menu-item[aria-disabled="true"]:hover { background: none; } }
/* «Razones de cancelación» › Acciones (Fresha, 1200): 200 px wide, 40 px rows, text 15/20 500. */
.team-menu.rs-menu { width: 200px; min-width: 0; box-sizing: border-box; }
.team-menu.rs-menu .menu-item { min-height: 40px; font: 500 15px/20px var(--font); }
/* Ajustes (Fresha, from 1024 px): the 1024 px column keeps 32 px inside on each side, so the
   «Atrás» row, the menu and the content start 32 px further in and the content is 632 px wide
   at 1200 (it was 696 before 0.62.130). team.css holds .setup-wrap; this only adds the sides. */
@media (min-width: 1024px) { .setup-wrap { box-sizing: border-box; padding-left: 32px; padding-right: 32px; } }
/* Fechas de cierre: 25 px between the lead and the first card, as Fresha. */
.sc-list:has(> .cp-row) { margin-top: 25px; }
/* Razones de cancelación (Fresha): a reason with «Acciones» is 76 px high; the fixed one (lock) 81. */
.sc-row.sc-reason:has(> [data-acts]) { min-height: 76px; }

/* The menu of a team member's head in the agenda (Fresha at 1470: 249 wide, rows of 40). */
.resource, .agrid-res { cursor: pointer; }
.resource.is-open .resource-chevron { opacity: 1; transform: translateY(-50%) rotate(180deg); }
.popover-lane { width: 251px; box-sizing: border-box; padding: 8px; border-radius: 20px; }
.popover-lane .menu { margin: 0; padding: 0; list-style: none; }
.popover-lane .menu-item { width: 100%; min-height: 40px; box-sizing: border-box; padding: 8px 12px; gap: 8px; border-radius: 15px; font: 500 15px/20px var(--font); white-space: nowrap; }
.popover-lane hr { margin: 8px 12px; border: 0; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.lane-menu-h { margin: 0; padding: 8px 12px 4px; font: 600 17px/24px var(--font); }

/* «Noticias» of the rocket (Fresha at 1470: side bar 112, content 480 with 32 inside). */
.am-support .am-snav { width: 112px; padding: 20px 0; gap: 0; }
.am-support .am-snav button { width: 112px; height: 75px; padding: 0 8px; justify-content: center; }
.am-support .am-smain { padding: 32px; }
.am-smain .nw-h1 { margin: 0 0 32px; font: 600 28px/36px var(--font); letter-spacing: -0.2px; }
.nw-item + .nw-item { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.nw-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.nw-card.has-img { grid-template-columns: minmax(0, 1fr) 140px; }
.nw-text { min-width: 0; }
.am-smain .nw-t { margin: 0; font: 600 17px/24px var(--font); color: var(--ink); overflow-wrap: anywhere; }
.nw-when { margin: 0 0 12px; font: 400 15px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }
.nw-body { font: 400 15px/20px var(--font); color: var(--ink); overflow-wrap: anywhere; }
.nw-body p { margin: 0 0 8px; }
.nw-body p:last-child { margin-bottom: 0; }
.nw-body ul, .nw-body ol { margin: 0 0 8px; padding-left: 20px; }
.nw-body a { color: var(--accent); text-decoration: none; }
.nw-cta { display: inline-flex; align-items: center; height: 36px; box-sizing: border-box; margin-top: 20px; padding: 0 16px; 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(--ink); text-decoration: none; }
.nw-cta:hover { background: var(--db-f4f4f4-h, rgb(244, 244, 244)); }
.nw-img { display: block; width: 140px; height: 187px; object-fit: cover; border-radius: 12px; }
.nw-video { display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 16px; border: 0; border-radius: 12px; background: var(--db-0d0d0d, rgb(13, 13, 13)); }
@media (max-width: 767px) {
  .am-support .am-snav { width: 72px; }
  .am-support .am-snav button { width: 72px; }
  .am-support .am-smain { padding: 24px 20px; }
  .nw-card.has-img { grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; }
  .nw-img { width: 96px; height: 128px; }
}
.is-narrow .resource-chevron { display: none; }
/* The member's drawer while its page loads. */
.member-wait { position: fixed; top: 0; right: 0; bottom: 0; z-index: 59; display: grid; place-items: center; width: min(801px, 100vw); background: var(--db-ffffff, #fff); box-shadow: -8px 0 32px rgba(13, 13, 13, .12); animation: member-wait-in .2s ease-out; }
.member-wait-spin { width: 32px; height: 32px; border: 3px solid var(--de-e5e5e5, rgb(229, 229, 229)); border-top-color: var(--accent); border-radius: 50%; animation: member-wait-turn .8s linear infinite; }
@keyframes member-wait-in { from { transform: translateX(40px); opacity: 0; } }
@keyframes member-wait-turn { to { transform: rotate(360deg); } }
html.mbr-embed .drawer.mbr-drawer { animation: none; }

/* The chat of the top bar is a link now (/connect): it keeps the icons' colour. */
.topbar a.icon-btn { color: inherit; }

/* Phones: the Noticias / Ayuda / Guías drawer takes the whole screen, so its X goes at the foot of the rail. */
@media (max-width: 767px) { .am-wrap:has(.am-support) .am-x { display: grid; top: auto; right: auto; left: 12px; bottom: 16px; } }

/* In the first paint, so it does not blink between pages (public/guide-pill.js). */
.gd-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-right: 8px; padding: 0 12px; border: 0; border-radius: 999px; background: rgb(105, 80, 243); color: #fff; font: 600 15px/20px var(--font); white-space: nowrap; cursor: pointer; }
.gd-pill:hover { background: rgb(89, 66, 224); }
.gd-pill svg { width: 22px; height: 22px; flex: none; }
.gd-pill svg:last-child { width: 18px; height: 18px; }
@media (max-width: 767px) { .gd-pill { display: none; } }
.topbar .icon-btn.gd-dot { position: relative; }
.topbar .icon-btn.gd-dot::before { content: ""; position: absolute; left: calc(50% + 6px); top: 9px; width: 8px; height: 8px; border-radius: 50%; background: rgb(105, 80, 243); box-shadow: 0 0 0 2px var(--ds-ffffff, #fff); }

/* Planes de pago (public/plan-trial.js). Here and not injected by the script: the saved copy of a page paints before any script runs. */
.pt-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-right: 8px; padding: 0 12px; border-radius: 999px; background: var(--db-ffc00a, rgb(255, 192, 10)); color: var(--df-0d0d0d, rgb(13, 13, 13)); text-decoration: none; font: 600 15px/20px var(--font); white-space: nowrap; }
.pt-pill:hover { background: rgb(245, 182, 0); }
.pt-pill svg { width: 24px; height: 24px; flex: none; }
@media (max-width: 767px) { .pt-pill { display: none; } }
.pt-toast { position: fixed; right: 20px; bottom: 12px; z-index: 900; width: 320px; box-sizing: border-box; padding: 20px; border-radius: 20px; background: var(--db-0d0d0d, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); animation: pt-in .25s ease-out; }
@keyframes pt-in { from { opacity: 0; transform: translateY(8px); } }
.pt-toast h3 { margin: 0 40px 4px 0; font: 600 17px/24px var(--font); }
.pt-toast p { margin: 0; font: 400 15px/20px var(--font); }
.pt-toast .pt-x { position: absolute; top: 8px; right: 8px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: #fff; cursor: pointer; }
.pt-toast .pt-x:hover { background: rgba(255, 255, 255, .1); }
.pt-toast .pt-x svg { width: 24px; height: 24px; }
.pt-toast .pt-light { display: inline-flex; align-items: center; height: 36px; margin-top: 24px; padding: 0 16px; border-radius: 999px; background: var(--db-ffffff, #fff); color: var(--df-0d0d0d, rgb(13, 13, 13)); text-decoration: none; font: 500 15px/20px var(--font); }
@media (max-width: 767px) { .pt-toast { display: none; } }
.pt-banner { display: flex; align-items: center; gap: 16px; box-sizing: border-box; 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)); }
.pt-banner p { flex: 1; max-width: 600px; margin: 0; padding: 2px 0; font: 400 15px/20px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); }
.pt-banner .pt-dark { margin-left: auto; }
.pt-banner strong { font-weight: 700; }
.pt-banner.tm-trial { margin: 32px 0 16px; }
.pt-dark { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--db-0d0d0d, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); text-decoration: none; font: 500 15px/20px var(--font); white-space: nowrap; }

/* Address suggestions of plain fields (public/address-suggest.js). */
.place-pop { position: fixed; z-index: 100001; box-sizing: border-box; margin: 0; padding: 8px; list-style: none; border-radius: 12px; background: var(--db-ffffff, #fff); box-shadow: 0 8px 24px rgba(13, 13, 13, .16); }
.place-pop li { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.place-pop li:hover, .place-pop li[aria-selected="true"] { background: var(--db-f5f5f5-h, rgb(245, 245, 245)); }
.place-pop b { font: 600 15px/20px var(--font); color: var(--df-0d0d0d, rgb(13, 13, 13)); }
.place-pop small { font: 400 14px/20px var(--font); color: var(--df-767676, rgb(118, 118, 118)); }

/* Google's terms: its name goes with its suggestions. Untranslated, in one line (docs/GOOGLE-MAPS.md). */
html.geo-google :is(.suggestions, .addr-sug, .place-pop, ul:has(> li[data-hit]), ul:has(> li > [data-hit]))::after { content: "Google Maps"; display: block; padding: 8px 12px 4px; text-align: right; font: 400 12px/16px Roboto, sans-serif; white-space: nowrap; color: var(--df-5e5e5e, #5e5e5e); }

/* TEMPORARY, remove before launch with public/dev-errors.js: the errors button, only on localhost. */
.dev-err { position: relative; border: 0; background: none; color: #fff; cursor: pointer; }
.dev-err.nav-item { margin-top: auto; }
.dev-err.nav-item + #help-btn { margin-top: 0; }
.dev-err.dev-float svg { width: 24px; height: 24px; }
.dev-err::after { content: attr(data-count); position: absolute; top: 6px; right: 14px; min-width: 10px; height: 10px; box-sizing: content-box; border-radius: 999px; background: rgb(46, 160, 67); color: #fff; font: 600 11px/10px var(--font); text-align: center; }
.dev-err[data-state="warn"]::after { min-width: 12px; height: 16px; padding: 0 2px; line-height: 16px; background: rgb(217, 138, 0); }
.dev-err[data-state="error"]::after { min-width: 12px; height: 16px; padding: 0 2px; line-height: 16px; background: rgb(214, 40, 57); }
.dev-err.dev-float { position: fixed; left: 10px; bottom: 76px; z-index: 100002; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--db-0d0d0d, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); box-shadow: 0 4px 12px rgba(13, 13, 13, .25); }
.dev-panel { position: fixed; left: 76px; bottom: 16px; z-index: 100003; display: flex; flex-direction: column; width: 440px; max-width: calc(100vw - 32px); max-height: 70vh; border-radius: 16px; background: var(--db-ffffff, #fff); color: var(--df-0d0d0d, rgb(13, 13, 13)); box-shadow: 0 12px 36px rgba(13, 13, 13, .28); font: 400 14px/20px var(--font); }
.dev-panel header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.dev-panel header b { font-weight: 600; font-size: 15px; }
.dev-panel .x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; font-size: 22px; line-height: 1; cursor: pointer; }
.dev-panel .body { flex: 1; min-height: 0; overflow: auto; padding: 8px 16px; }
.dev-panel .none { margin: 16px 0; color: var(--df-767676, rgb(118, 118, 118)); }
.dev-panel article { padding: 10px 0 10px 12px; margin: 4px 0; border-left: 3px solid rgb(214, 40, 57); }
.dev-panel article.warn { border-left-color: rgb(217, 138, 0); }
.dev-panel p { margin: 0; overflow-wrap: anywhere; }
.dev-panel .k { font-weight: 600; }
.dev-panel .m { font-size: 12px; line-height: 16px; color: var(--df-767676, rgb(118, 118, 118)); }
.dev-panel pre { max-height: 180px; margin: 4px 0 0; overflow: auto; padding: 8px; border-radius: 8px; background: var(--db-f5f5f5, rgb(245, 245, 245)); font: 12px/16px ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.dev-panel summary { font-size: 13px; color: var(--df-6950f3, rgb(105, 80, 243)); cursor: pointer; }
.dev-panel .one { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--df-6950f3, rgb(105, 80, 243)); font: 500 13px/18px var(--font); cursor: pointer; }
.dev-panel footer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--de-e5e5e5, rgb(229, 229, 229)); }
.dev-panel footer button { height: 36px; padding: 0 14px; border: 1px solid var(--de-cbcbcb, rgb(203, 203, 203)); border-radius: 999px; background: var(--db-ffffff, #fff); font: 500 14px/20px var(--font); cursor: pointer; }
.dev-panel #dev-copy { border: 0; background: var(--db-0d0d0d, rgb(13, 13, 13)); color: var(--do-ffffff, #fff); }
.dev-panel button:disabled { opacity: .4; cursor: default; }
@media (max-width: 767px) { .dev-panel { left: 16px; bottom: 128px; } }

/* «Parece que no tienes conexión.» (public/offline-toast.js), Fresha's danger toast measured
   7 Nov 2026: 16 px from the top, centred, 400 px at most (the screen less 16 px a side on a
   phone), comes down with a bounce of 8.5 px in 610 ms and fades out in 240 ms. */
.off-toasts { position: fixed; top: 16px; left: 0; right: 0; z-index: 10000; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.off-toast { display: flex; align-items: center; width: max-content; max-width: min(calc(100vw - 32px), 400px); padding: 4px; border: 1px solid transparent; border-radius: 16px;
  background: rgb(212, 22, 58); color: #fff; box-shadow: rgba(19, 19, 19, 0.08) 0 2px 8px 0, rgba(19, 19, 19, 0.12) 0 4px 20px 0; pointer-events: auto;
  animation: off-in 610ms linear both; }
.off-msg { flex: 1 1 auto; min-width: 0; padding: 8px 12px; overflow-wrap: break-word; }
.off-msg p { margin: 0; font: 400 15px/20px var(--font); letter-spacing: -0.1px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.off-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; transition: background-color .15s ease-out; }
@media (hover: hover) and (pointer: fine) { .off-x:hover { background: rgb(186, 16, 48); } }
.off-x:focus-visible { outline: 2px solid var(--de-ffffff, #fff); outline-offset: 1px; }
.off-toasts.is-leaving { opacity: 0; transition: opacity 240ms linear; }
@keyframes off-in {
  0% { transform: translateY(-162px); } 9.2% { transform: translateY(-135.6px); } 17.5% { transform: translateY(-95.8px); }
  25.7% { transform: translateY(-57.8px); } 33.8% { transform: translateY(-24.6px); } 39.3% { transform: translateY(-7.3px); }
  44.8% { transform: translateY(3.2px); } 50.3% { transform: translateY(7.7px); } 55.7% { transform: translateY(8.5px); }
  63.9% { transform: translateY(6.9px); } 72.1% { transform: translateY(4.5px); } 80.3% { transform: translateY(2.4px); }
  88.5% { transform: translateY(0.9px); } 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .off-toast { animation: none; } }

/* DARK THEME START: written by scripts/theme-dark.py, do not edit. Screen only, so printing stays light. */
@media screen {
html[data-theme="dark"] {
  color-scheme: dark;
  --db-000000: #ffffff;
  --db-000000-20: rgba(255, 255, 255, 0.2);
  --db-000000-24: rgba(255, 255, 255, 0.24);
  --db-000000-40: rgba(51, 51, 51, 0.64);
  --db-0d0d0d: #ffffff;
  --db-0d0d0d-22: rgba(255, 255, 255, 0.22);
  --db-0d0d0d-25: rgba(255, 255, 255, 0.25);
  --db-0d0d0d-30: rgba(51, 51, 51, 0.64);
  --db-0d0d0d-32: rgba(51, 51, 51, 0.64);
  --db-0d0d0d-70: rgba(51, 51, 51, 0.64);
  --db-0d0d0d-90: rgba(51, 51, 51, 0.64);
  --db-0d0d0d-92: rgba(51, 51, 51, 0.64);
  --db-0d0d0d-h: #ffffff;
  --db-131313-05: rgba(255, 255, 255, 0.05);
  --db-131313-17: rgba(255, 255, 255, 0.17);
  --db-131313-25: rgba(255, 255, 255, 0.25);
  --db-131313-25-h: rgba(255, 255, 255, 0.25);
  --db-131313-3-h: rgba(255, 255, 255, 0.03);
  --db-131313-4: rgba(255, 255, 255, 0.04);
  --db-131313-4-h: rgba(255, 255, 255, 0.04);
  --db-131313-40: rgba(51, 51, 51, 0.64);
  --db-131313-5: rgba(255, 255, 255, 0.05);
  --db-131313-5-h: rgba(255, 255, 255, 0.05);
  --db-131313-6: rgba(255, 255, 255, 0.06);
  --db-131313-6-h: rgba(255, 255, 255, 0.06);
  --db-131313-8-h: rgba(255, 255, 255, 0.08);
  --db-131313-9: rgba(255, 255, 255, 0.09);
  --db-232323: #f2f2f2;
  --db-262626: #f2f2f2;
  --db-262626-h: #f2f2f2;
  --db-2b2b2b-h: #f2f2f2;
  --db-333333-h: #f2f2f2;
  --db-767676: #bfbfbf;
  --db-9e9e9e: #626262;
  --db-a0a0a0: #626262;
  --db-a3a3a3: #626262;
  --db-a6a6a6: #626262;
  --db-acacac: #626262;
  --db-beb4ff: #140e39;
  --db-bef0eb: #0e3935;
  --db-bfbfbf: #4a4a4a;
  --db-c4b5fd: #170e39;
  --db-c8c8c8: #404040;
  --db-c9dcff: #0e1d39;
  --db-ceeffd: #03344a;
  --db-cfd6e2: #1b212d;
  --db-cfe9de: #163126;
  --db-d2f5be: #1e390e;
  --db-d3d3d3: #404040;
  --db-d6c4ff: #1b0e39;
  --db-d6ceff: #150e39;
  --db-d6d6d6: #404040;
  --db-d6d6ff: #0e0e39;
  --db-d6f5cf: #16390e;
  --db-d9b6f7: #250e39;
  --db-dcdcdc: #404040;
  --db-dcebf6: #0f2739;
  --db-e2e2e2: #333333;
  --db-e3e3ff-h: #0e0e39;
  --db-e3f8e8: #0e3918;
  --db-e4c8fa: #260e39;
  --db-e5e5e5: #333333;
  --db-e5e5e5-h: #333333;
  --db-e5f6e5: #123512;
  --db-e6f4ff: #0e2639;
  --db-e6f7fe: #0e2d39;
  --db-e7c4f7: #2c0e39;
  --db-e7dcff: #1c0e39;
  --db-e7e2df: #333333;
  --db-e7f6e2: #1a3611;
  --db-e8e8e8-h: #333333;
  --db-e8ecf0: #333333;
  --db-e8f7ee: #123520;
  --db-e9e4ff: #160e39;
  --db-e9e6e3: #333333;
  --db-e9e9e9-h: #333333;
  --db-e9f1fe: #0e1f39;
  --db-eaf1fd: #133263;
  --db-eaf3ff: #0e2139;
  --db-ebebeb: #333333;
  --db-ebebeb-h: #333333;
  --db-ebeeff: #0e1539;
  --db-ebf3ff: #0e1f39;
  --db-ebf8fe: #022231;
  --db-ecd2ff: #270e39;
  --db-ededed-h: #333333;
  --db-edf7ff: #0e2639;
  --db-edfbe9: #182914;
  --db-eef1f6: #262626;
  --db-eefbe9: #1a390e;
  --db-efe7de: #302417;
  --db-efeaff: #180e39;
  --db-efedfe: #130e39;
  --db-f0c3e6: #390e30;
  --db-f0eefe: #140e39;
  --db-f0f0f0: #262626;
  --db-f0f0ff: #201e45;
  --db-f0f0ff-h: #201e45;
  --db-f1d7c6: #391f0e;
  --db-f1e2d6: #352212;
  --db-f1e8ef: #2c1b29;
  --db-f2efe9: #2d271b;
  --db-f2f2f2: #262626;
  --db-f2f2f2-h: #262626;
  --db-f2f2f7: #131313;
  --db-f3e7d8: #372611;
  --db-f3f3f3: #131313;
  --db-f4edff: #180033;
  --db-f4f4f4-h: #1d1d1d;
  --db-f5f5f5: #131313;
  --db-f5f5f5-h: #1d1d1d;
  --db-f6c6ff: #320e39;
  --db-f6d4ea: #390e2a;
  --db-f6dcef: #390f2d;
  --db-f6dede: #380f0f;
  --db-f6f7f9: #131313;
  --db-f7d9d3: #39150e;
  --db-f7e1e3: #380f13;
  --db-f7f7f7: #131313;
  --db-f7f7f7-h: #131313;
  --db-f8e1ea: #390e1f;
  --db-f9f9f9: #131313;
  --db-f9f9f9-h: #131313;
  --db-fac8fa: #390e39;
  --db-faebf7: #290a23;
  --db-faf9ff-h: #131313;
  --db-fafafa: #131313;
  --db-fafafa-h: #131313;
  --db-fbe3f2: #390e29;
  --db-fbf1cf: #392f0e;
  --db-fde8e8: #390e0e;
  --db-fdecee: #390e13;
  --db-fdecef: #390e16;
  --db-feeceb: #421015;
  --db-ffbef0: #390e2f;
  --db-ffc00a: #b7570b;
  --db-ffd3f4: #390e2e;
  --db-ffd6dd: #390e16;
  --db-ffd6e7: #390e20;
  --db-ffe4c4: #39260e;
  --db-ffebee: #390e15;
  --db-fff3d6: #392d0e;
  --db-fff4de: #392b0e;
  --db-fff5d2: #39300e;
  --db-fff7db: #371c0c;
  --db-ffffff: #181818;
  --db-ffffff-50: rgba(13, 13, 13, 0.5);
  --db-ffffff-55: rgba(13, 13, 13, 0.55);
  --db-ffffff-60: rgba(13, 13, 13, 0.6);
  --db-ffffff-70: rgba(13, 13, 13, 0.7);
  --db-ffffff-85: rgba(13, 13, 13, 0.85);
  --db-ffffff-92: rgba(13, 13, 13, 0.92);
  --db-ffffff-95: rgba(13, 13, 13, 0.95);
  --db-ffffff-96: rgba(13, 13, 13, 0.96);
  --db-ffffff-h: #181818;
  --de-0d0d0d: #ffffff;
  --de-404040: #bfbfbf;
  --de-767676: #bfbfbf;
  --de-9e9e9e: #767676;
  --de-a0a0a0: #767676;
  --de-a5a5a5: #767676;
  --de-a6a6a6: #767676;
  --de-acacac: #767676;
  --de-bfbfbf: #626262;
  --de-c9bdff: #23165a;
  --de-cbcbcb: #404040;
  --de-d3d3d3: #404040;
  --de-d4163a: #ff4360;
  --de-d6d6d6: #404040;
  --de-dbddff: #2b2660;
  --de-e5e5e5: #333333;
  --de-e7e8e9: #333333;
  --de-ebebeb: #333333;
  --de-eeeeee: #262626;
  --de-f0f0f0: #262626;
  --de-f0f0ff: #16165a;
  --de-f2f2f2: #262626;
  --de-ffffff: #181818;
  --df-000000: #f5f5f5;
  --df-0075a8: #00a0e5;
  --df-008038: #8de2b2;
  --df-0b7a34: #8de2ac;
  --df-0d0d0d: #f5f5f5;
  --df-0d3b66: #8db9e2;
  --df-131313: #f5f5f5;
  --df-1f3f8f: #8da5e2;
  --df-1f8900: #45b020;
  --df-281e6e: #998fe0;
  --df-2d76ec: #5791f0;
  --df-2d823c: #95daa1;
  --df-2e7d32: #97d99a;
  --df-3c3278: #a39ad5;
  --df-555555: #bfbfbf;
  --df-5e5e5e: #bfbfbf;
  --df-666666: #bfbfbf;
  --df-6950f3: #8880ff;
  --df-767676: #bfbfbf;
  --df-7b48d5: #966ede;
  --df-808080: #bfbfbf;
  --df-9e5c00: #e2bf8d;
  --df-a06e00: #e2c88d;
  --df-a0a0a0: #767676;
  --df-a3a3a3: #767676;
  --df-a5a5a5: #767676;
  --df-a6a6a6: #767676;
  --df-acacac: #767676;
  --df-b03b96: #c85bb0;
  --df-b0b0b8: #767676;
  --df-b5b5b5: #626262;
  --df-b7570b: #f19101;
  --df-bdbdbd: #626262;
  --df-bebebe: #626262;
  --df-bfbfbf: #626262;
  --df-c8c8c8: #404040;
  --df-d3d3d3: #404040;
  --df-d4163a: #ff4360;
  --df-e5e5e5: #404040;
  --do-0d0d0d: #f5f5f5;
  --do-f5f5f5: #131313;
  --do-ffffff: #131313;
  --ds-0d0d0d: #ffffff;
  --ds-2f2f2f: #ffffff;
  --ds-a5a5a5: #767676;
  --ds-a6a6a6: #767676;
  --ds-bfbfbf: #626262;
  --ds-c3e9fb: #16445a;
  --ds-c6bdfb: #20165a;
  --ds-c9c0fc: #21165a;
  --ds-cce0ff: #194182;
  --ds-cfd2ff: #161b5a;
  --ds-d0e0fb: #162f5a;
  --ds-d2f6c9: #18390e;
  --ds-d3d3d3: #404040;
  --ds-d4163a: #ff4360;
  --ds-d5e4fb: #16315a;
  --ds-d6cdff: #23165a;
  --ds-d6d6d6: #404040;
  --ds-d6ecff: #163b5a;
  --ds-dbddff: #2b2660;
  --ds-dddddd: #404040;
  --ds-def5d6: #285a16;
  --ds-e0dcfd: #1f165a;
  --ds-e1dcff: #20165a;
  --ds-e1deff: #1d165a;
  --ds-e5e5e5: #333333;
  --ds-edfbe9: #255a16;
  --ds-f0f0ff: #16165a;
  --ds-f2f2f2: #262626;
  --ds-fee3e2: #5a1019;
  --ds-ffe5b5: #5a4216;
  --ds-ffefb2: #4d2305;
  --ds-ffffff: #181818;
}
}
/* Hand-written part of the dark theme, added to styles.css by scripts/theme-dark.py. From Fresha's tokens. */
@media screen {
html[data-theme="dark"] {
  --ink: #f5f5f5;
  --ink-2: #bfbfbf;
  --bg: #0d0d0d;
  --line: #333333;
  --line-soft: #262626;
  --border: #404040;
  --toolbar: #131313;
  --sidebar: #0d0d0d;
  --avatar-bg: #022231;
  --avatar-ink: #00a0e5;
  --off: #262626;
  --off-stripe: rgba(51, 51, 51, 0.7);
  --now: #ff4360;
  --appt: #61b4d2;
  --appt-hover: #6dbdda;
  --picked: #201e45;
  --pop-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.6);
  --appt-ink: #0d0d0d;
  --danger: #ff4360;
  --success: #45b020;
  --ink-3: #8a8a8a;
  --t-soft: #131313;
  --t-row: #333333;
  --t-lav: #201e45;
  --t-grey: #bfbfbf;
  --t-border: #404040;
  --hm-line: #333333;
  --hm-grey: #bfbfbf;
  --busy-ink: #bfbfbf;
}
html[data-theme="dark"] body { background: #0d0d0d; color: #f5f5f5; }
html[data-theme="dark"] .topbar { background: #0d0d0d; border-bottom-color: #262626; }
html[data-theme="dark"] .sidebar { background: #0d0d0d; border-right: 1px solid #262626; }
html[data-theme="dark"] :is(.tbtn.dark, .pill.pill-primary, .rp-addbtn, .cd-pill.on, .btn-dark) { background: #fff; }
html[data-theme="dark"] .va-head.dark, html[data-theme="dark"] .va-head.dark :is(.va-date, .va-when, .va-pill, span) { color: #0d0d0d; }
html[data-theme="dark"] .va-head.dark .va-pill { border-color: rgba(13, 13, 13, 0.4); }
/* Text over a black button that is white here, when the text is set in another rule than the button. */
html[data-theme="dark"] .ws-pill.on { color: #131313; }
html[data-theme="dark"] .cd-pill.on .cd-pill-n { background: rgba(19, 19, 19, 0.12); color: #131313; }
html[data-theme="dark"] .ob-tabs li[aria-selected="true"] .n { background: rgba(19, 19, 19, 0.12); color: #131313; }
html[data-theme="dark"] .pt-toast .pt-x { color: #131313; }
html[data-theme="dark"] .pt-toast .pt-x:hover { background: rgba(19, 19, 19, 0.08); }
html[data-theme="dark"] .pk-ei i.dark { color: #131313; }
html[data-theme="dark"] :is(.tbtn.dark, .pill.pill-primary, .rp-addbtn, .btn-dark):hover { background: #f2f2f2; }
html[data-theme="dark"] :is(.tbtn.dark, .btn-dark, .ad-top .tbtn.lg):is(:disabled, [disabled]) { background: #404040; color: #767676; }
/* Screens that are dark in both themes. */
html[data-theme="dark"] .ob-over.dark, html[data-theme="dark"] .gd-intro, html[data-theme="dark"] .mk-tools-col { background-color: #0d0d0d; color: #fff; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color: #f5f5f5; }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #767676; }
html[data-theme="dark"] img.keep-light, html[data-theme="dark"] .leaflet-container { color-scheme: light; }
}
/* The phones drawn in Presencia online's banner keep their black frame: it is part of the drawing. */
html[data-theme="dark"] .ma-ph { border-color: rgb(13, 13, 13); }

/* Dark windows and menus, as Fresha: windows #0d0d0d, menus #1d1d1d (cards stay #181818). */
@media screen {
html[data-theme="dark"] .team-dialog { background: #0d0d0d; }
html[data-theme="dark"] :is(.popover.team-menu, .team-menu) { background: #1d1d1d; }
}

/* Client views (email previews) stay light in the dark theme. */
@media screen {
html[data-theme="dark"] :is(.mk-browser, .keep-light) {
  color-scheme: light;
  color: var(--ink);
  --db-000000: initial;
  --db-000000-20: initial;
  --db-000000-24: initial;
  --db-000000-40: initial;
  --db-0d0d0d: initial;
  --db-0d0d0d-22: initial;
  --db-0d0d0d-25: initial;
  --db-0d0d0d-30: initial;
  --db-0d0d0d-32: initial;
  --db-0d0d0d-70: initial;
  --db-0d0d0d-90: initial;
  --db-0d0d0d-92: initial;
  --db-0d0d0d-h: initial;
  --db-131313-05: initial;
  --db-131313-17: initial;
  --db-131313-25: initial;
  --db-131313-25-h: initial;
  --db-131313-3-h: initial;
  --db-131313-4: initial;
  --db-131313-4-h: initial;
  --db-131313-40: initial;
  --db-131313-5: initial;
  --db-131313-5-h: initial;
  --db-131313-6: initial;
  --db-131313-6-h: initial;
  --db-131313-8-h: initial;
  --db-131313-9: initial;
  --db-232323: initial;
  --db-262626: initial;
  --db-262626-h: initial;
  --db-2b2b2b-h: initial;
  --db-333333-h: initial;
  --db-767676: initial;
  --db-9e9e9e: initial;
  --db-a0a0a0: initial;
  --db-a3a3a3: initial;
  --db-a6a6a6: initial;
  --db-acacac: initial;
  --db-beb4ff: initial;
  --db-bef0eb: initial;
  --db-bfbfbf: initial;
  --db-c4b5fd: initial;
  --db-c8c8c8: initial;
  --db-c9dcff: initial;
  --db-ceeffd: initial;
  --db-cfd6e2: initial;
  --db-cfe9de: initial;
  --db-d2f5be: initial;
  --db-d3d3d3: initial;
  --db-d6c4ff: initial;
  --db-d6ceff: initial;
  --db-d6d6d6: initial;
  --db-d6d6ff: initial;
  --db-d6f5cf: initial;
  --db-d9b6f7: initial;
  --db-dcdcdc: initial;
  --db-dcebf6: initial;
  --db-e2e2e2: initial;
  --db-e3e3ff-h: initial;
  --db-e3f8e8: initial;
  --db-e4c8fa: initial;
  --db-e5e5e5: initial;
  --db-e5e5e5-h: initial;
  --db-e5f6e5: initial;
  --db-e6f4ff: initial;
  --db-e6f7fe: initial;
  --db-e7c4f7: initial;
  --db-e7dcff: initial;
  --db-e7e2df: initial;
  --db-e7f6e2: initial;
  --db-e8e8e8-h: initial;
  --db-e8ecf0: initial;
  --db-e8f7ee: initial;
  --db-e9e4ff: initial;
  --db-e9e6e3: initial;
  --db-e9e9e9-h: initial;
  --db-e9f1fe: initial;
  --db-eaf1fd: initial;
  --db-eaf3ff: initial;
  --db-ebebeb: initial;
  --db-ebebeb-h: initial;
  --db-ebeeff: initial;
  --db-ebf3ff: initial;
  --db-ebf8fe: initial;
  --db-ecd2ff: initial;
  --db-ededed-h: initial;
  --db-edf7ff: initial;
  --db-edfbe9: initial;
  --db-eef1f6: initial;
  --db-eefbe9: initial;
  --db-efe7de: initial;
  --db-efeaff: initial;
  --db-efedfe: initial;
  --db-f0c3e6: initial;
  --db-f0eefe: initial;
  --db-f0f0f0: initial;
  --db-f0f0ff: initial;
  --db-f0f0ff-h: initial;
  --db-f1d7c6: initial;
  --db-f1e2d6: initial;
  --db-f1e8ef: initial;
  --db-f2efe9: initial;
  --db-f2f2f2: initial;
  --db-f2f2f2-h: initial;
  --db-f2f2f7: initial;
  --db-f3e7d8: initial;
  --db-f3f3f3: initial;
  --db-f4edff: initial;
  --db-f4f4f4-h: initial;
  --db-f5f5f5: initial;
  --db-f5f5f5-h: initial;
  --db-f6c6ff: initial;
  --db-f6d4ea: initial;
  --db-f6dcef: initial;
  --db-f6dede: initial;
  --db-f6f7f9: initial;
  --db-f7d9d3: initial;
  --db-f7e1e3: initial;
  --db-f7f7f7: initial;
  --db-f7f7f7-h: initial;
  --db-f8e1ea: initial;
  --db-f9f9f9: initial;
  --db-f9f9f9-h: initial;
  --db-fac8fa: initial;
  --db-faebf7: initial;
  --db-faf9ff-h: initial;
  --db-fafafa: initial;
  --db-fafafa-h: initial;
  --db-fbe3f2: initial;
  --db-fbf1cf: initial;
  --db-fde8e8: initial;
  --db-fdecee: initial;
  --db-fdecef: initial;
  --db-feeceb: initial;
  --db-ffbef0: initial;
  --db-ffc00a: initial;
  --db-ffd3f4: initial;
  --db-ffd6dd: initial;
  --db-ffd6e7: initial;
  --db-ffe4c4: initial;
  --db-ffebee: initial;
  --db-fff3d6: initial;
  --db-fff4de: initial;
  --db-fff5d2: initial;
  --db-fff7db: initial;
  --db-ffffff: initial;
  --db-ffffff-50: initial;
  --db-ffffff-55: initial;
  --db-ffffff-60: initial;
  --db-ffffff-70: initial;
  --db-ffffff-85: initial;
  --db-ffffff-92: initial;
  --db-ffffff-95: initial;
  --db-ffffff-96: initial;
  --db-ffffff-h: initial;
  --de-0d0d0d: initial;
  --de-404040: initial;
  --de-767676: initial;
  --de-9e9e9e: initial;
  --de-a0a0a0: initial;
  --de-a5a5a5: initial;
  --de-a6a6a6: initial;
  --de-acacac: initial;
  --de-bfbfbf: initial;
  --de-c9bdff: initial;
  --de-cbcbcb: initial;
  --de-d3d3d3: initial;
  --de-d4163a: initial;
  --de-d6d6d6: initial;
  --de-dbddff: initial;
  --de-e5e5e5: initial;
  --de-e7e8e9: initial;
  --de-ebebeb: initial;
  --de-eeeeee: initial;
  --de-f0f0f0: initial;
  --de-f0f0ff: initial;
  --de-f2f2f2: initial;
  --de-ffffff: initial;
  --df-000000: initial;
  --df-0075a8: initial;
  --df-008038: initial;
  --df-0b7a34: initial;
  --df-0d0d0d: initial;
  --df-0d3b66: initial;
  --df-131313: initial;
  --df-1f3f8f: initial;
  --df-1f8900: initial;
  --df-281e6e: initial;
  --df-2d76ec: initial;
  --df-2d823c: initial;
  --df-2e7d32: initial;
  --df-3c3278: initial;
  --df-555555: initial;
  --df-5e5e5e: initial;
  --df-666666: initial;
  --df-6950f3: initial;
  --df-767676: initial;
  --df-7b48d5: initial;
  --df-808080: initial;
  --df-9e5c00: initial;
  --df-a06e00: initial;
  --df-a0a0a0: initial;
  --df-a3a3a3: initial;
  --df-a5a5a5: initial;
  --df-a6a6a6: initial;
  --df-acacac: initial;
  --df-b03b96: initial;
  --df-b0b0b8: initial;
  --df-b5b5b5: initial;
  --df-b7570b: initial;
  --df-bdbdbd: initial;
  --df-bebebe: initial;
  --df-bfbfbf: initial;
  --df-c8c8c8: initial;
  --df-d3d3d3: initial;
  --df-d4163a: initial;
  --df-e5e5e5: initial;
  --do-0d0d0d: initial;
  --do-f5f5f5: initial;
  --do-ffffff: initial;
  --ds-0d0d0d: initial;
  --ds-2f2f2f: initial;
  --ds-a5a5a5: initial;
  --ds-a6a6a6: initial;
  --ds-bfbfbf: initial;
  --ds-c3e9fb: initial;
  --ds-c6bdfb: initial;
  --ds-c9c0fc: initial;
  --ds-cce0ff: initial;
  --ds-cfd2ff: initial;
  --ds-d0e0fb: initial;
  --ds-d2f6c9: initial;
  --ds-d3d3d3: initial;
  --ds-d4163a: initial;
  --ds-d5e4fb: initial;
  --ds-d6cdff: initial;
  --ds-d6d6d6: initial;
  --ds-d6ecff: initial;
  --ds-dbddff: initial;
  --ds-dddddd: initial;
  --ds-def5d6: initial;
  --ds-e0dcfd: initial;
  --ds-e1dcff: initial;
  --ds-e1deff: initial;
  --ds-e5e5e5: initial;
  --ds-edfbe9: initial;
  --ds-f0f0ff: initial;
  --ds-f2f2f2: initial;
  --ds-fee3e2: initial;
  --ds-ffe5b5: initial;
  --ds-ffefb2: initial;
  --ds-ffffff: initial;
  --ink: #0d0d0d;
  --ink-2: #5c5c5c;
  --bg: #ffffff;
  --line: #e5e5e5;
  --line-soft: #f2f2f2;
  --border: #d3d3d3;
  --toolbar: #f9f9f9;
  --sidebar: #0d0d0d;
  --avatar-bg: #ebf8fe;
  --avatar-ink: #0075a8;
  --off: #f2f2f2;
  --off-stripe: rgba(222, 222, 222, 0.8);
  --now: #d4163a;
  --appt: #9bbdfd;
  --appt-hover: #8aaffb;
  --picked: #f0f0ff;
  --pop-shadow: 0 0 0 1px rgba(19, 19, 19, 0.1), 0 1px 8px rgba(19, 19, 19, 0.04), 0 4px 20px rgba(19, 19, 19, 0.12);
  --appt-ink: #0d0d0d;
  --danger: #d4163a;
  --success: #12a150;
}
}