/* hpescrm project styles. Base design system = ui.css (ported from hpua, keep it as-is).
   Only project-specific additions live here — check both files for an existing class first. */

/* ---- Brand: House Party España = teal (hp.es brand #51ABB2), so the CRM never looks like the black-and-white
   Ukrainian one. --accent is the readable (AA) shade for buttons/links, --accent-2 the brand tint for dots. ---- */
:root {
  --accent: #1F7A80;
  --accent-hover: #196A6F;
  --accent-2: #51ABB2;
  --accent-bg: #EAF5F6;
}
.btn--dark { background: var(--accent); color: #fff; }
.btn--dark:hover { background: var(--accent-hover); }
.hp-nav a.active { background: var(--accent-bg); color: var(--accent); }
.hp-nav a.active .ico { color: var(--accent); }
.otab--on { color: var(--accent); }
.otab-badge { background: var(--accent-bg); color: var(--accent); }
.field:focus, .app-ta:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-bg); }
::selection { background: var(--accent-2); color: #fff; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.brand-name { font-weight: 700; font-size: 15px; }
.brand-name span { color: var(--accent); }

/* ---- Topbar ---- */
.app-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.app-topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.app-lang { display: inline-flex; background: var(--bg-page); border-radius: var(--r-pill); padding: 3px; }
.app-lang-btn { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--muted); padding: 4px 10px; border-radius: var(--r-pill); }
.app-lang-btn.is-on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.app-logout { margin: 0; }
.app-link-btn { border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); padding: 4px; }
.app-link-btn:hover { color: var(--text); }

/* ---- Cards / text ---- */
.app-card { max-width: 720px; }
.app-muted { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.app-hint { color: var(--faint); font-size: 12px; margin: 6px 0 0; }
.app-btn-block { width: 100%; justify-content: center; margin-top: 18px; }
.app-login-logo { padding: 0 0 8px; }
.app-error-code { font-size: 44px; font-weight: 800; letter-spacing: -.03em; }
.app-alert { margin-top: 10px; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.app-alert--error { background: var(--danger-bg); border: 1px solid var(--danger-bd); color: var(--danger); }

/* ---- Confirm modal (replaces native confirm/alert) ---- */
.app-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.app-modal[hidden] { display: none; }
.app-modal-card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-modal);
  max-width: 400px; width: 100%; padding: 22px; }
.app-modal-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.app-modal-msg { font-size: 13.5px; color: var(--text-3); margin-bottom: 18px; line-height: 1.45; }
.app-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---- Mobile: bottom tab bar instead of the sidebar (ui.css hides the sidebar ≤860px) ---- */
.app-tabbar { display: none; }
@media (max-width: 860px) {
  #hpToast { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }   /* above the tab bar (ui.js sets 24px inline) */
  .hp-topbar { height: 56px; padding: 0 16px; gap: 10px; }
  .app-title { font-size: 18px; }
  .hp-content { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .app-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .app-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 4px; border-radius: var(--r-btn); color: var(--muted); font-size: 11px; font-weight: 600; }
  .app-tabbar a.active { color: var(--accent); background: var(--accent-bg); }
  .app-tabbar svg { width: 22px; height: 22px; }
}

/* ======================= Leads / calls ======================= */
.ov { z-index: 1000; }                 /* above the mobile tab bar (900) and call bar (850) */
.ov[hidden] { display: none; }
.modal { max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal-b { overflow-y: auto; }
.app-h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.app-empty { text-align: center; color: var(--muted); padding: 32px 16px; }

/* inbox: search + filters (the server marks set filters with .is-set; the enhanced trigger inherits it) */
.inbox-filters { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.inbox-filters .field { margin-top: 0; height: 38px; font-size: 13.5px; }
.inbox-q { flex: 1 1 220px; max-width: 340px; }
.inbox-facets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1 1 480px; min-width: 0; }
.inbox-facets .hp-sel-trig { width: auto; min-width: 140px; max-width: 250px; }
.inbox-facets .hp-sel-trig.is-set { border-color: var(--accent-2); background: var(--accent-bg); color: var(--accent); }
.hp-sel-trig.app-sort .hp-sel-txt::before { content: '⇅ '; color: var(--muted); }
.inbox-more-btn { height: 38px; padding: 0 8px; white-space: nowrap; }
.inbox-more-btn.is-set { color: var(--accent); font-weight: 600; }
.inbox-more-grid { flex: 1 0 100%; display: flex; gap: 8px; flex-wrap: wrap; }
.inbox-more-grid[hidden] { display: none; }
.inbox-clear { font-size: 13px; color: var(--muted); padding: 0 4px; white-space: nowrap; }
.inbox-clear:hover { color: var(--text); }
.inbox-apply { display: none; }   /* Enter submits; filters apply as they change */
.inbox-count { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.inbox-note { margin: 0 0 8px; font-size: 13px; color: var(--text-3); }
.inbox-more { display: flex; justify-content: center; padding: 14px 0 4px; }
.inbox-more[hidden] { display: none; }
#inbox[aria-busy="true"] #inboxList { opacity: .55; transition: opacity .15s; }

/* inbox: floating selection bar (bulk ops) */
.inbox-sel { position: fixed; left: 0; right: 0; bottom: 20px; margin: 0 auto; width: max-content; z-index: 850;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.18); }
.inbox-sel[hidden] { display: none; }
.inbox-sel-n { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.inbox-sel-pick { white-space: nowrap; }
.inbox-sel-actions { display: flex; gap: 6px; }
.inbox-sel-actions [hidden] { display: none; }
.inbox-sel-x { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); padding: 6px 8px; cursor: pointer; }
.inbox-sel-x:hover { color: var(--text); }
body.has-sel .hp-content { padding-bottom: 96px; }
body.has-sel #hpToast { bottom: 84px !important; }

/* inbox rows: a table on desktop, stacked cards on phones */
.app-rows { display: flex; flex-direction: column; }
.app-row { display: grid; grid-template-columns: 80px minmax(180px, 2fr) minmax(100px, 1fr) minmax(100px, 1.2fr) 80px minmax(130px, 1fr);
  gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--divider); font-size: 13.5px; }
.app-row--sel { grid-template-columns: 24px 80px minmax(180px, 2fr) minmax(100px, 1fr) minmax(100px, 1.2fr) 80px minmax(130px, 1fr); }
.app-row:last-child { border-bottom: 0; }
.app-row:not(.app-row--head):hover { background: var(--bg-content); }
.app-row--head { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.app-row-main { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; }
.app-row-main strong { font-weight: 600; }
.app-row-sub { display: block; width: 100%; font-size: 12px; color: var(--muted); }
.app-row-services { color: var(--text-3); }
.app-row-when { font-size: 12.5px; }
.app-rows--nostage .app-row { grid-template-columns: 80px minmax(200px, 2.2fr) minmax(120px, 1.2fr) minmax(100px, 1.2fr) 90px; }
.app-rows--nostage .app-row--sel { grid-template-columns: 24px 80px minmax(200px, 2.2fr) minmax(120px, 1.2fr) minmax(100px, 1.2fr) 90px; }
.app-row-check { display: flex; align-items: center; justify-content: center; align-self: stretch; cursor: pointer; user-select: none; -webkit-user-select: none; }
.app-row-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.app-row.is-sel, .app-row.is-sel:hover { background: var(--accent-bg); }
.app-row-event.is-past { color: var(--muted); }
.wa-turn { color: var(--text); font-weight: 600; }

/* lead card */
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.app-col-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.app-col-side { position: sticky; top: 16px; }
.app-head-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.app-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.app-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 18px; margin-top: 14px; }
.app-kv > div > span { display: block; font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.app-kv b { font-weight: 600; }
.app-kv a { text-decoration: underline; text-underline-offset: 2px; }
.app-kv-wide { grid-column: 1 / -1; }
.app-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.app-quote { margin-top: 12px; background: var(--bg-content); border: 1px solid var(--divider); border-radius: 10px;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.5; }
.app-pre { white-space: pre-wrap; word-break: break-word; }
.app-quote-h { display: block; font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.app-docs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.app-docs .app-quote-h { width: 100%; }
.app-ta { height: auto; padding: 10px 12px; line-height: 1.45; resize: vertical; font: inherit; font-size: 14px; }
form[data-texts] .btn { margin-top: 10px; }
.app-next { margin: 0 0 10px; font-weight: 600; color: var(--warn); }
.app-calls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.app-call { border: 1px solid var(--divider); border-radius: 10px; padding: 10px 12px; background: var(--bg-content); }
.app-call-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.app-call-q { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.app-call-note { margin-top: 6px; font-size: 13.5px; }
.app-siblings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.app-siblings li { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13.5px; }
.app-script summary { cursor: pointer; list-style: none; margin: 0; }
.app-script summary::-webkit-details-marker { display: none; }
.app-script[open] summary { margin-bottom: 8px; }
.app-script-body { font-size: 13.5px; line-height: 1.5; }
.app-script-body h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin: 14px 0 4px; }
.app-script-body p, .app-script-body ul, .app-script-body ol { margin: 0 0 6px; }
.app-script-body ul, .app-script-body ol { padding-left: 18px; }
.app-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--warn-bg); border: 1px solid var(--warn-bd); color: var(--warn); border-radius: var(--r-card);
  padding: 12px 14px; margin-bottom: 14px; font-weight: 600; }
.app-callbar { display: none; }

/* call result form: big tap targets */
.app-choice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.app-choice--grid { display: grid; grid-template-columns: 1fr 1fr; }
.app-choice label { position: relative; cursor: pointer; }
.app-choice input { position: absolute; opacity: 0; pointer-events: none; }
.app-choice span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 42px;
  padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-btn); font-size: 13.5px; font-weight: 600;
  background: var(--surface); color: var(--text-2); }
.app-choice input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); }
.app-choice input:focus-visible + span { outline: 2px solid var(--info); outline-offset: 2px; }
.app-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-result { width: 520px; }

/* my calls */
.app-today { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; }
.app-section-h { font-size: 15px; font-weight: 700; color: var(--text); margin: 18px 0 8px; }
.app-qlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.app-qitem { display: flex; flex-direction: column; gap: 6px; }
.app-qitem:hover { border-color: var(--border-strong); }
.app-qitem--now { border-left: 3px solid var(--accent-2); }
.app-qitem-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.app-qitem-sub { font-size: 13px; color: var(--text-3); }
.app-qitem-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.app-due { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.app-due--now { color: var(--accent); }

@media (max-width: 1100px) {
  .app-grid { grid-template-columns: 1fr; }
  .app-col-side { position: static; }
}
@media (max-width: 1100px) {
  /* inbox rows become cards with named areas (no horizontal overflow on laptops/tablets/phones) */
  .app-row--head { display: none; }
  .app-row { grid-template-columns: 1fr auto; grid-template-areas: "main amount" "event stage" "services when";
    gap: 4px 12px; align-items: start; padding: 12px 14px; }
  .app-row--sel { grid-template-columns: 24px 1fr auto; grid-template-areas: "check main amount" "check event stage" "check services when"; }
  .app-row-check { grid-area: check; }
  .app-row-main { grid-area: main; }
  .app-row-amount { grid-area: amount; font-weight: 700; }
  .app-row-event { grid-area: event; font-size: 13px; }
  .app-row-event .app-row-sub { display: inline; width: auto; margin-left: 6px; }
  .app-row-stage { grid-area: stage; justify-self: end; text-align: right; }
  .app-row-services { grid-area: services; font-size: 12.5px; }
  .app-row-when { grid-area: when; justify-self: end; }
  .app-rows--nostage .app-row { grid-template-columns: 1fr auto; grid-template-areas: "main amount" "event when" "services services"; }
  .app-rows--nostage .app-row--sel { grid-template-columns: 32px 1fr auto; grid-template-areas: "check main amount" "check event when" "check services services"; }
  .app-row--sel { grid-template-columns: 32px 1fr auto; }
  .app-row-check input { width: 18px; height: 18px; }
}
@media (max-width: 860px) {
  .hp-dd-menu { max-width: calc(100vw - 16px); }
  .hp-dd-item { white-space: normal; }
  .inbox-q { flex: 1 1 100%; max-width: none; }
  .inbox-facets { display: grid; grid-template-columns: 1fr 1fr; flex: 1 1 100%; }
  .inbox-facets .hp-sel-trig { width: 100%; min-width: 0; max-width: none; }
  .inbox-more-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .inbox-more-btn, .inbox-clear { justify-self: start; }
  .inbox-sel { left: 8px; right: 8px; width: auto; max-width: none; bottom: calc(70px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n pick x" "act act act"; gap: 6px 8px; padding: 8px 8px 10px 14px; }
  .inbox-sel-n { grid-area: n; }
  .inbox-sel-pick { grid-area: pick; justify-self: start; }
  .inbox-sel-x { grid-area: x; }
  .inbox-sel-actions { grid-area: act; }
  .inbox-sel-actions .btn { flex: 1 1 0; justify-content: center; height: 40px; }
  body.has-sel .hp-content { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
  body.has-sel #hpToast { bottom: calc(172px + env(safe-area-inset-bottom)) !important; }
  .app-head-top .app-call-btn { display: none; }
  .app-callbar { display: block; position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 850;
    padding: 8px 16px; background: linear-gradient(to top, var(--bg-content) 70%, transparent); }
  .app-callbar .btn { width: 100%; justify-content: center; height: 48px; font-size: 15px; }
  .app-lead { padding-bottom: 64px; }
  .modal { width: 100%; max-width: 100%; border-radius: 18px 18px 0 0; align-self: end; max-height: 92vh; }
  .ov { place-items: end center; }
  .app-kv { grid-template-columns: 1fr 1fr; }
}

/* ======================= Compensation (panel / team) — calm (v2) ======================= */
.app-month { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.app-month strong { font-size: 16px; min-width: 150px; text-align: center; text-transform: capitalize; }
.app-month .btn { width: 36px; height: 36px; justify-content: center; padding: 0; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 6px; }
.stat { padding: 4px 16px 12px; border-left: 1px solid var(--divider); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.money { margin-top: 6px; border-top: 1px solid var(--divider); }
.dl.money > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }   /* label left, amount right */
.dl.money dd { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dl.money .money-total dt { color: var(--text); font-weight: 600; }
.dl.money .money-total dd { color: var(--accent); font-weight: 800; font-size: 18px; }
.app-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.app-block { margin-bottom: 16px; }
.person-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.person-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.person-lists { margin-top: 18px; }
.sub-h { font-size: 13px; font-weight: 700; margin: 0 0 6px; color: var(--text-3); }
.row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 220px; }   /* actions wrap below on narrow screens */
.row-sub { font-size: 12.5px; color: var(--muted); }
.row-end { display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: 0 0 auto; }
.row-off { opacity: .5; }
.row-off b { text-decoration: line-through; }
.row-check { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.row-check input { accent-color: var(--accent); }
.status { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--text-3); }
.status--pendiente .dot { background: var(--warn-2); }
.status--aprobado .dot { background: var(--ok); }
.app-amt { width: 90px; height: 32px; margin-top: 0; text-align: right; }
@media (max-width: 860px) {
  .app-two { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .stat { padding: 2px 10px 8px; }
  .stat:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .stat b { font-size: 22px; }
}

/* ======================= Profile / users ======================= */
.app-narrow { max-width: 640px; }
.app-me { display: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; align-items: center; justify-content: center; }
.app-copy { display: flex; gap: 8px; }
.app-copy .field { margin-top: 0; }
.app-passform { max-width: 320px; }
.app-passform .btn { margin-top: 12px; }
.app-users .app-ledger-row { padding: 12px 16px; }
a.hp-user:hover { background: var(--bg-page); }
@media (max-width: 860px) { .app-me { display: inline-flex; } }

/* ======================= Lead card — calm layout (v2, 2026-09-23) =======================
   One pill-free meta line, a big phone, label/value rows instead of UPPERCASE micro-labels,
   a timeline instead of boxed calls. Colour = small dots only. */
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.app-back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  margin-left: -8px; border-radius: 8px; color: var(--text-3); flex: 0 0 auto; }
.app-back svg { width: 20px; height: 20px; }
.app-back:hover { background: var(--bg-page); color: var(--text); }

.lead-alert { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--warn-2);
  border-radius: var(--r-card); padding: 10px 12px 10px 14px; margin-bottom: 14px; font-size: 14px; color: var(--text-2); }

.lead-head { padding: 20px; }
.lead-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lead-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.lead-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 13px; color: var(--muted); }
.lead-meta > span + span::before { content: '·'; margin: 0 8px; color: var(--empty); }
.lead-stage, .lead-int { display: inline-flex; align-items: center; font-weight: 600; }
.lead-stage { color: var(--text-2); }
.lead-int { color: var(--text-3); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); margin-right: 6px; flex: 0 0 auto; }
.lead-stage--asignado .dot, .lead-stage--presupuesto_enviado .dot { background: var(--info); }
.lead-stage--en_contacto .dot, .lead-stage--contactado .dot { background: var(--warn-2); }
.lead-stage--para_presupuesto .dot { background: var(--done); }
.lead-stage--reservado { color: var(--ok); }
.lead-stage--reservado .dot { background: var(--ok); }
.lead-stage--perdido, .lead-stage--no_disponible, .lead-stage--archivado { color: var(--muted); }
.lead-int--caliente .dot { background: var(--danger); }
.lead-int--tibio .dot { background: var(--warn-2); }
.lead-int--frio .dot { background: var(--info); }

.lead-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 16px; }
.lead-phone { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
a.lead-phone:hover { text-decoration: underline; text-underline-offset: 3px; }
.lead-phone--none { font-size: 15px; font-weight: 500; color: var(--muted); }
.lead-email { font-size: 14px; color: var(--muted); }
.lead-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
/* client e-mail status (lead card «Email al cliente», «Emails» page): ONE coloured dot + text */
.lead-mail { display: flex; align-items: center; margin: 0; font-size: 14px; color: var(--text); }
.lead-mail--sent .dot { background: var(--ok); }
.lead-mail--queued .dot { background: var(--info); }
.lead-mail--failed .dot { background: var(--danger); }
.rows .lead-mail { font-size: 13px; font-weight: 500; }
.lead-mail-err { margin: 6px 0 0 14px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.lead-mail-view { margin-top: 12px; }
/* explicit vw widths: in the .ov grid a % width resolves against a track sized by the (600 px) e-mail itself */
.modal.modal--mail { width: min(680px, calc(100vw - 32px)); }
@media (max-width: 860px) { .modal.modal--mail { width: 100vw; } }   /* phones: the usual full-width bottom sheet */
.modal--mail .modal-h { font-size: 15px; }
.modal--mail .modal-b { padding: 0; background: var(--bg-page); }
.mail-frame { display: block; width: 100%; height: 560px; border: 0; }
.mail-env { margin: 0 0 12px; }
.mail-tpls { display: flex; gap: 8px; }
.mail-switch { margin-top: 0; }
.lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--divider); }
.lead-link { margin-left: auto; font-size: 13px; color: var(--muted); }
.lead-link:hover { color: var(--text); }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sec-h { font-size: 15px; font-weight: 700; margin: 0; }
.sec-aside { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.dl { margin: 0; }
.dl > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 14px; }
.dl > div:last-child { border-bottom: 0; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.dd-strong { font-weight: 700; }
.doc-line { display: block; }
.doc-line--paid { color: var(--ok); font-weight: 600; }

.lead-quote { margin: 12px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--border-strong); font-size: 14px; line-height: 1.5; color: var(--text-2); }
.lead-quote-h { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.sec-head + .lead-quote { margin-top: 4px; }
.lead-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
.lead-note > span { color: var(--muted); }
.lead-form .btn { margin-top: 10px; }
.lead-next { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--warn); }

.tl { list-style: none; margin: 4px 0 0 5px; padding: 0 0 0 16px; border-left: 2px solid var(--divider); display: flex; flex-direction: column; gap: 14px; }
.tl-item { position: relative; }
.tl-item::before { content: ''; position: absolute; left: -23px; top: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong); }
.tl-item--contactado::before { background: var(--ok); border-color: var(--ok); }
.tl-item--llamar_luego::before { border-color: var(--warn-2); }
.tl-item--numero_incorrecto::before { border-color: var(--danger); }
.tl-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; font-size: 14px; }
.tl-h > span { font-size: 12.5px; color: var(--muted); }
.tl-q { margin-top: 3px; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.tl-note { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--text-2); }

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 14px; }
.rows > li:last-child { border-bottom: 0; }
.rows .lead-stage { font-size: 13px; font-weight: 500; }

@media (max-width: 860px) {
  .lead-head-top .app-call-btn { display: none; }        /* the sticky call bar does this on phones */
  .lead-head { padding: 16px; }
  .lead-name { font-size: 22px; }
  .dl > div { grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
  .dl.money > div { grid-template-columns: minmax(0, 1fr) auto; }
}

/* «Ver como» bar — owner viewing an employee's CRM (read-only) */
.viewas-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
  padding: 8px 24px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; position: sticky; top: 0; z-index: 950; }
.viewas-bar form { margin: 0; }
.viewas-bar button { border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; font: inherit; font-size: 13px;
  padding: 5px 12px; border-radius: var(--r-pill); cursor: pointer; }
.viewas-bar button:hover { background: rgba(255,255,255,.15); }
@media (max-width: 860px) { .viewas-bar { padding: 8px 16px; } }

/* ---- WhatsApp thread in the lead card (read-only mirror). Client on the left, us (teal tint) on the right. ---- */
.wa-thread { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  margin: 4px -4px 0; padding: 4px; overscroll-behavior: contain; }
.wa-day { align-self: center; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.wa-day:first-child, .wa-older + .wa-day { margin-top: 0; }
.wa-older { align-self: center; font-size: 12px; color: var(--faint); margin: 0 0 6px; }
.wa-msg { max-width: min(82%, 520px); padding: 7px 11px 6px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  background: var(--bg-page); color: var(--text); align-self: flex-start; overflow-wrap: anywhere; }
.wa-msg--out { background: var(--accent-bg); align-self: flex-end; }
.wa-msg time { display: block; text-align: right; font-size: 11px; color: var(--muted); margin-top: 2px; }
.wa-kind { display: block; font-size: 12.5px; color: var(--muted); font-style: italic; }
.wa-keepalive { margin: 14px 0 0; }
.wa-flash { margin: 0 0 12px; font-size: 14px; }
.wa-flash--err { color: var(--danger); }

/* iOS Safari zooms the page into any focused field whose text is under 16px (login, password, forms).
   Phones / touch screens: every field at 16px — no zoom, and the desktop look stays at 14px. */
@media (max-width: 860px), (pointer: coarse) {
  input, select, textarea, .field, .app-ta { font-size: 16px; }
}

/* ---- two-step login (passkey) ---- */
.app-mfa-title { font-size: 18px; font-weight: 700; margin: 4px 0 6px; }
.app-mfa-back { margin: 14px 0 0; text-align: center; font-size: 13px; }
.app-mfa-back a { color: var(--muted); }
.app-mfa-keys { margin: 4px 0 12px; }
.status--on .dot { background: var(--ok); }
@media (max-width: 860px) {
  .rows .row-end { flex-wrap: wrap; white-space: normal; justify-content: flex-end; row-gap: 6px; flex: 0 1 auto; }
}

/* ======================= Calendar (read-only events calendar) =======================
   Colours: paid event = brand teal, provisional = amber outline + «?», manual Google entry = violet.
   Day status = the website's own colours (hp.es main.css .av-*): a filled dot = set by hand, a ring = automatic. */
.cal { --st-free: #51ABB2; --st-almost: #F2755C; --st-last: #C99A2E; --st-off: #8a8a8a; --ext: var(--done); --ext-bg: var(--done-bg); }
.cal[aria-busy="true"] .cal-body { opacity: .5; transition: opacity .15s; }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 6px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-arrow { width: 36px; height: 36px; justify-content: center; padding: 0; font-size: 18px; }
.cal-title { margin: 0; min-width: 150px; text-align: center; font-size: 17px; font-weight: 800; letter-spacing: -.01em; text-transform: capitalize; }
.cal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cal-layers { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-lg { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
button.cal-lg { cursor: pointer; }
button.cal-lg:hover { border-color: var(--muted); }
.cal-lg.is-off { color: var(--faint); border-style: dashed; }
.cal-lg.is-off .dot { opacity: .35; }
.cal-lg--booked { border-color: transparent; background: transparent; padding-left: 2px; }
.cal-lg--booked .dot { background: var(--accent-2); }
.cal-lg--tentative .dot { background: transparent; border: 2px solid var(--warn-2); width: 9px; height: 9px; }
.cal-lg--ext .dot { background: var(--ext); }
.cal-lg--status .dot { background: conic-gradient(var(--st-free) 0 33%, var(--st-almost) 0 66%, var(--st-last) 0); }
.cal-lg--leads .dot { background: var(--info); }
.cal-views { margin: 0; padding: 3px; }
.cal-views .otab { padding: 5px 12px; font-size: 13px; }
.cal-sum { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.cal-sum > span + span::before { content: ' · '; }
.cal.no-ext .cal-sum-ext, .cal.no-tentative .cal-sum-tentative { display: none; }
.cal-note { margin: 0 0 12px; font-size: 13.5px; color: var(--text-3); }
.cal-note--warn { color: var(--warn); font-weight: 600; }
.cal-src { margin: 12px 0 0; font-size: 12.5px; color: var(--faint); }
.cal-src--err { color: var(--danger); }
.cal.no-ext .cal-src { display: none; }

.cal-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }

/* month grid */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cal-grid > * { border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.cal-grid > :nth-child(7n) { border-right: 0; }
.cal-grid > :nth-last-child(-n + 7) { border-bottom: 0; }
.cal-dow { padding: 8px 8px 6px; text-align: right; font-size: 12px; color: var(--muted); font-weight: 600; background: var(--bg-content); }
.cal-day { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 104px; min-width: 0; padding: 4px 5px 6px;
  background: var(--surface); border-top: 0; border-left: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cal-day:hover { background: var(--bg-content); }
.cal-day.is-out { background: var(--bg-content); }
.cal-day.is-out .cal-dnum, .cal-day.is-past .cal-dnum { color: var(--faint); }
.cal-day.is-past .cal-ev { opacity: .7; }
.cal-day.is-blocked { background: repeating-linear-gradient(135deg, var(--surface) 0 7px, #f4f4f5 7px 8px); }
.cal.no-status .cal-day.is-blocked { background: var(--surface); }
.cal-day.is-sel { box-shadow: inset 0 0 0 2px var(--accent-2); }
.cal-day:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--info); }
.cal-dh { display: flex; align-items: center; gap: 5px; min-height: 22px; }
.cal-dnum { margin-left: auto; min-width: 22px; height: 22px; line-height: 22px; border-radius: 50%; text-align: center; font-size: 12.5px; font-weight: 700; }
.cal-day.is-today .cal-dnum { background: var(--accent); color: #fff; }
.cal-cap { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-day.is-warn .cal-cap { color: var(--danger); font-weight: 700; }
.cal.no-status .cal-day.is-warn--open_full .cal-cap { color: var(--muted); font-weight: 400; }
.cal-ln { font-size: 11px; color: var(--info); font-variant-numeric: tabular-nums; }
.cal-ln::before { content: '◦ '; }
.cal:not(.no-leads) .cal-ln { display: inline; }
.cal.no-leads .cal-ln, .cal.no-leads .cal-ln-t { display: none; }

.cal-st { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--st-free); }
.cal-st--casi_completa { background: var(--st-almost); }
.cal-st--ultimo_libre { background: var(--st-last); }
.cal-st--no_disponible { background: var(--st-off); }
.cal-st.is-auto { background: transparent; border: 2px solid var(--st-free); }
.cal-st--casi_completa.is-auto { border-color: var(--st-almost); }
.cal-st--ultimo_libre.is-auto { border-color: var(--st-last); }
.cal.no-status .cal-st, .cal.no-status .cal-status { display: none; }

.cal-ev { display: block; padding: 1px 6px; border-radius: 5px; font-size: 12px; line-height: 1.5; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: var(--accent-bg); color: var(--accent); }
.cal-ev b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-ev--tentative { background: transparent; color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-bd); }
.cal-ev--ext { background: var(--ext-bg); color: var(--ext); }
.cal-ev--ext.is-q { background: transparent; box-shadow: inset 0 0 0 1px #ddd6fe; }
.cal-ev.is-erased { background: var(--bg-page); color: var(--text-3); }
.cal.no-tentative .cal-ev--tentative, .cal.no-tentative .cal-item--tentative { display: none; }
.cal.no-ext .cal-ev--ext, .cal.no-ext .cal-item--ext { display: none; }

/* day panel (month view) / the month as a list (list view) */
.cal-days { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cal[data-view="month"] .cal-days { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.cal-dsec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 14px 16px; }
.cal[data-view="month"] .cal-dsec:not(.is-sel) { display: none; }
.cal-dsec-h h3 { margin: 0; font-size: 15px; font-weight: 700; }
.cal-dsec-h h3::first-letter { text-transform: uppercase; }
.cal-dsec.is-today .cal-dsec-h h3 { color: var(--accent); }
.cal-dsec-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.cal-dsec-meta:empty { display: none; }
.cal-dsec-meta > span + span::before { content: '·'; margin: 0 8px; color: var(--empty); }
.cal.no-status .cal-dsec-meta > .cal-status + span::before, .cal.no-leads .cal-dsec-meta > .cal-ln-t::before { content: none; }
.cal-status { display: inline-flex; align-items: center; font-weight: 600; color: var(--text-2); }
.cal-status .dot { background: var(--st-free); }
.cal-status--casi_completa .dot { background: var(--st-almost); }
.cal-status--ultimo_libre .dot { background: var(--st-last); }
.cal-status--no_disponible .dot { background: var(--st-off); }
.cal-status.is-auto { font-weight: 500; color: var(--text-3); }
.cal-status.is-auto .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--st-free); }
.cal-status--casi_completa.is-auto .dot { box-shadow: inset 0 0 0 2px var(--st-almost); }
.cal-status--ultimo_libre.is-auto .dot { box-shadow: inset 0 0 0 2px var(--st-last); }
.cal-warn { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--danger); }
.cal.no-status .cal-warn--open_full { display: none; }   /* «the website still offers it» is about the status; overbooking is not */
.cal-warn-t { color: var(--warn); font-weight: 600; }
.cal-none { margin: 10px 0 2px; font-size: 13.5px; color: var(--muted); }
.cal-dsec.has-booked .cal-none, .cal:not(.no-tentative) .cal-dsec.has-tentative .cal-none,
.cal:not(.no-ext) .cal-dsec.has-ext .cal-none { display: none; }

.cal-item { border-top: 1px solid var(--divider); margin-top: 10px; }
.cal-dsec-h + .cal-item { margin-top: 12px; }
.cal-item > summary { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px 0 8px; cursor: pointer; list-style: none; }
.cal-item > summary::-webkit-details-marker { display: none; }
.cal-when { white-space: nowrap; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-2); padding-top: 1px; }
.cal-plus { margin-left: 2px; font-size: 10px; font-weight: 700; color: var(--muted); }
.cal-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-name { display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.cal-name .dot { background: var(--accent-2); }
.cal-item--tentative .cal-name { color: var(--text-2); }
.cal-item--tentative .cal-name .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--warn-2); }
.cal-item--ext .cal-name .dot { background: var(--ext); }
.cal-item.is-erased .cal-name { color: var(--text-3); font-weight: 500; }
.cal-item.is-erased .cal-name .dot { background: var(--faint); }
.cal-line { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.cal-item[open] > summary .cal-name { color: var(--accent); }
.cal-item-b { padding: 0 0 12px; }
.cal-item-b .dl > div { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 6px 0; font-size: 13.5px; }
.cal[data-view="list"] .cal-item > summary { grid-template-columns: 112px minmax(0, 1fr); }
.cal[data-view="list"] .cal-item-b { padding-left: 122px; }
.cal[data-view="list"] .cal-item-b .dl > div { grid-template-columns: 130px minmax(0, 1fr); }
.cal-map { margin-left: 6px; color: var(--accent); white-space: nowrap; }
.cal-item-warn, .cal-item-note { margin: 8px 0 0; font-size: 13px; }
.cal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.cal-links .lead-link { margin-left: 0; }

/* list view: the month's days that have something to show (layers decide), no grid */
.cal[data-view="list"] .cal-body { grid-template-columns: minmax(0, 820px); }
.cal[data-view="list"] .cal-grid { display: none; }
.cal[data-view="list"] .cal-dsec { display: none; }
.cal[data-view="list"] .cal-dsec.is-inmonth.has-booked,
.cal[data-view="list"]:not(.no-tentative) .cal-dsec.is-inmonth.has-tentative,
.cal[data-view="list"]:not(.no-ext) .cal-dsec.is-inmonth.has-ext,
.cal[data-view="list"]:not(.no-status) .cal-dsec.is-inmonth.has-manual,
.cal[data-view="list"]:not(.no-leads) .cal-dsec.is-inmonth.has-leads { display: block; }
.cal[data-view="list"] .cal-dsec.is-past { opacity: .75; }
.cal[data-view="list"] .cal-none { display: none; }
.cal-empty-list { margin: 8px 0; color: var(--muted); font-size: 14px; }
.cal-empty-list[hidden] { display: none; }

@media (max-width: 1100px) {
  .cal-body { grid-template-columns: minmax(0, 1fr); }
  .cal[data-view="month"] .cal-days { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 860px) {
  .cal-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }   /* a wrapping column sizes to the widest row */
  .cal-nav { justify-content: space-between; }
  .cal-title { flex: 1; min-width: 0; }
  /* one line: Mes / Lista, then the layer chips scrolling sideways */
  .cal-tools { flex-wrap: nowrap; gap: 8px; }
  .cal-views { order: -1; flex: 0 0 auto; }
  .cal-layers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .cal-layers::-webkit-scrollbar { display: none; }
  .cal-lg--booked { display: none; }
  .cal-day { min-height: 54px; padding: 3px 2px 5px; align-items: center; }
  .cal-dh { width: 100%; justify-content: center; gap: 3px; }
  .cal-dnum { margin-left: 0; }
  .cal-cap, .cal-ln { display: none !important; }
  /* the booth count is hidden here: a full / overbooked day keeps a red ring around its number */
  .cal-day.is-warn--over .cal-dnum, .cal:not(.no-status) .cal-day.is-warn--open_full .cal-dnum { box-shadow: inset 0 0 0 2px var(--danger); }
  .cal-st { width: 7px; height: 7px; }
  .cal-st.is-auto { border-width: 1.5px; }
  /* chips become dots under the day number (tap the day to read them) */
  .cal-day { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 3px; }
  .cal-dh { flex: 0 0 100%; }
  .cal-ev { flex: 0 0 auto; width: 7px; height: 7px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; background: var(--accent-2); }
  .cal-ev--tentative { background: transparent; box-shadow: inset 0 0 0 1.5px var(--warn-2); }
  .cal-ev--ext { background: var(--ext); }
  .cal-ev--ext.is-q { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ext); }
  .cal-ev.is-erased { background: var(--faint); }
  .cal-dow { text-align: center; padding: 6px 2px; font-size: 11px; }
  .cal-item > summary, .cal[data-view="list"] .cal-item > summary { grid-template-columns: 104px minmax(0, 1fr); gap: 6px; }
  .cal-item-b, .cal[data-view="list"] .cal-item-b { padding-left: 0; }
  .cal-item-b .dl > div, .cal[data-view="list"] .cal-item-b .dl > div { grid-template-columns: 92px minmax(0, 1fr); }
  .cal-dsec { padding: 12px 14px; }
}

/* ======================= Statistics (/stats, owner) — calm: numbers, one dot, plain tables =======================
   Columns are HTML (not a scaled SVG) so labels keep their size on a phone; heights are inline % (CSP allows styles). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stats-page { max-width: 960px; container: stats / inline-size; }
.stats-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.stats-bar .app-month, .stats-bar .otabs { margin: 0; }
.stats-langs .otab { padding: 6px 14px; }
.app-month .btn[aria-disabled] { opacity: .35; }
.stats-alert { display: flex; align-items: center; margin: 0 0 14px; font-size: 14px; color: var(--text-2); }
.stats-alert--warn .dot, .stat--warn .dot { background: var(--warn-2); }
.stats-alert--bad .dot, .stat--bad .dot { background: var(--danger); }
.stat--ok .dot { background: var(--ok); }
.stats-page .stat span { display: flex; align-items: center; }
.stats-page .stat .sr-only { position: absolute; }
/* the tiles follow the page's OWN width (the side panel takes 400–480 px of it): 3, then 2 per row — an amount never
   runs into its neighbour */
@container stats (max-width: 760px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .stat { padding: 2px 10px 8px; }
  .stat:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
  .stat b { font-size: 22px; }
}
@container stats (max-width: 460px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3n + 1) { border-left: 1px solid var(--divider); padding-left: 10px; }
  .stat:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}

.bars { display: flex; margin-top: 18px; --bars-h: 132px; }
.bars-y { position: relative; flex: 0 0 26px; height: var(--bars-h); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.bars-y span { position: absolute; right: 8px; transform: translateY(50%); line-height: 1; }
.bars-plot { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.bars-lines { position: absolute; left: 0; right: 0; top: 0; height: var(--bars-h); pointer-events: none; }
.bars-lines i { position: absolute; left: 0; right: 0; border-top: 1px solid var(--divider); }
.bar { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; border-radius: 6px; }
.bar-area { position: relative; width: 100%; height: var(--bars-h); display: flex; align-items: flex-end; justify-content: center; }
.bar-col { position: relative; width: min(24px, 64%); background: var(--accent-2); border-radius: 4px 4px 0 0; transition: filter .12s; }
.bar.is-sel .bar-col { background: var(--accent); }
.bar.is-partial .bar-col { opacity: .5; }
.bar:hover .bar-col, .bar:focus-visible .bar-col { filter: brightness(1.12); }
.bar:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.bar-v { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-size: 12px; font-weight: 700; color: var(--text); }
.bar-m { height: 22px; line-height: 22px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.bar.is-sel .bar-m { color: var(--text); font-weight: 600; }
.bars-tip::first-letter { text-transform: uppercase; }
.bars-tip { position: absolute; z-index: 5; transform: translate(-50%, -100%); margin-top: -6px; pointer-events: none; white-space: nowrap;
  background: var(--dark); color: var(--on-dark); font-size: 12px; padding: 5px 8px; border-radius: 8px; }

.stats-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; font-variant-numeric: tabular-nums; }
.stats-table th { text-align: right; font-weight: 500; font-size: 12.5px; color: var(--muted); padding: 6px 0 6px 10px; border-bottom: 1px solid var(--divider); }
.stats-table td { text-align: right; padding: 8px 0 8px 10px; border-bottom: 1px solid var(--divider); }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; padding-left: 0; }
.stats-table tr:last-child td { border-bottom: 0; }
.stats-table td a { text-transform: capitalize; }
.stats-table td a:hover { color: var(--accent); }
.stats-table tr.is-sel td { font-weight: 600; }
.stats-table tr.is-grey td { color: var(--faint); }
/* a count tile opens the side panel with who it counts */
.stat--link { border-radius: 8px; }
.stat--link:hover b, .stat--link:focus-visible b { color: var(--accent); }
#statsRoot[aria-busy="true"] :is(.stats-page, .side-panel-b) { opacity: .6; transition: opacity .15s .12s; }   /* only when slow */
/* the month's leads / bookings in the side panel: one row per order, the name + muted «·» facts, ONE status dot or the amount */
.stats-panel .side-panel-t::first-letter { text-transform: uppercase; }
.stats-panel-tabs { margin: 0 0 4px; }
.stats-rows > li { flex-wrap: nowrap; align-items: flex-start; gap: 12px; padding: 10px 0; }
.stats-rows .row-main { flex: 1 1 auto; }
.stats-rows .row-main b { font-weight: 600; overflow-wrap: anywhere; }
.stats-rows a.row-main:hover b { color: var(--accent); }
.stats-rows .row-sub { overflow-wrap: anywhere; line-height: 1.45; }
.stats-rows .row-end { padding-top: 1px; }
.stats-rows .is-erased b { color: var(--muted); font-weight: 500; }
.stats-row-src { font-size: 13px; font-weight: 600; color: var(--text-2); overflow-wrap: anywhere; }   /* where it came from (Igor: «very important») */
.stats-by-src { margin: 8px 0 2px; font-size: 13px; color: var(--text-3); line-height: 1.6; }
.stats-by-src span { white-space: nowrap; }
.stats-by-src b { color: var(--text); font-weight: 700; }
.stats-row-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.stats-st--warn .dot { background: var(--warn-2); }
@media (max-width: 860px) {
  .stats-bar { flex-direction: column; align-items: stretch; }
  .stats-bar .app-month { justify-content: space-between; }
  .stats-langs { justify-content: stretch; }
  .stats-langs .otab { flex: 1 1 0; text-align: center; }
  .bars { --bars-h: 112px; }
  .bar-m { font-size: 10.5px; }
  .stats-table { font-size: 13.5px; }
}

/* ======================= Sitio (/site, owner) — who is on the website now, visit journeys, how the pages work =======================
   Same calm grammar as /stats: one dot per row (the form: sent / opened / browsing), muted «·» lines, plain tables. */
.site-page { max-width: 1040px; }
/* the live card: the map edge to edge on top (it stays while the block under it re-renders), then numbers + list */
.site-live-card { padding: 0; overflow: hidden; }
.site-live { padding: 16px; }
.site-map { position: relative; border-bottom: 1px solid var(--divider); }
.site-map-canvas { height: 320px; background: #eef0f1; position: relative; z-index: 0; isolation: isolate; }   /* Leaflet's z-indexes stay inside */
.site-map-bar { position: absolute; left: 12px; top: 12px; right: 64px; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; }
.site-map-bar > * { pointer-events: auto; }
.site-map-n { background: var(--surface); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-card); white-space: nowrap; }
.site-map-n:empty { display: none; }
.site-map-windows { margin: 0; background: var(--surface); box-shadow: var(--shadow-card); flex-wrap: nowrap; }
.site-map-windows .otab { padding: 5px 11px; font-size: 12.5px; }
.site-map-windows .otab--on { background: var(--accent-bg); color: var(--accent); box-shadow: none; }
.site-map .leaflet-tooltip { font: 600 12.5px/1.3 var(--font); color: var(--text); border-radius: 8px; box-shadow: var(--shadow-card); border: 0; padding: 5px 8px; }
.site-map .leaflet-control-attribution { font-size: 10.5px; }
.site-map--grey .leaflet-tile { filter: grayscale(1) contrast(.92) brightness(1.06); }   /* calm like CARTO light; the dots stay teal */
/* the side panel (a «Sitio» visit, a /stats month): beside the page from 1280 px, over its right part down to 861 px (both
   non-modal: another row / column switches it), a full sheet with a backdrop on a phone. Open = .side-panel without
   [hidden]; the backdrop, the scroll lock and the page's room follow from :has(). Below the modals (.ov 1000,
   .app-modal 2000: a modal opened from a lead card must never sit under it), above the tab / call / «Ver como» bars. */
.side-panel-ov { display: none; }
.side-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 990; width: min(480px, 100vw); display: flex; flex-direction: column;
  background: var(--bg-content); border-left: 1px solid var(--border); box-shadow: -12px 0 32px -18px rgba(15,23,42,.35); outline: none; }
.side-panel[hidden] { display: none; }
.side-panel[aria-busy="true"] .side-panel-b { opacity: .55; transition: opacity .15s; }
.side-panel-h { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; background: var(--surface); border-bottom: 1px solid var(--border); }
.side-panel-t { flex: 1; font-size: 15px; font-weight: 700; }
.side-panel-page { margin-left: 0; white-space: nowrap; }
.side-panel-x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); padding: 2px 8px; border-radius: 8px; cursor: pointer; }
.side-panel-x:hover { color: var(--text); background: var(--bg-page); }
.side-panel-b { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.side-panel .site-visit-head { padding: 16px; }
.side-panel .lead-name { font-size: 20px; }
.side-panel .site-visit-sec { margin-bottom: 12px; }
@media (min-width: 1280px) { body:has(.side-panel:not([hidden])) :is(.site-page, .stats-page) { margin-right: 480px; } }   /* nothing hides under it */
@media (min-width: 1024px) and (max-width: 1279px) {       /* /stats: the chart's latest months stay clickable beside a narrower panel */
  .stats-panel { width: 400px; }
  body:has(.stats-panel:not([hidden])) .stats-page { margin-right: 400px; }
}
.site-today { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.site-now span { display: flex; align-items: center; }
.site-now .dot { background: var(--faint); }
.site-now.is-on .dot { background: var(--ok); }
.site-lists { margin-bottom: 6px; }
.site-empty { margin: 10px 0 4px; }
.site-rows > li { flex-wrap: nowrap; align-items: flex-start; gap: 12px; padding: 10px 0; }
.site-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
a.site-row-main:hover .site-who b, a.site-row-main:hover .site-anon { color: var(--accent); }
.site-who { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; font-size: 14px; }
.site-who .dot { margin-right: -2px; }
.site-who b { font-weight: 700; }
.site-anon { color: var(--text-2); font-weight: 600; }
.site-st { display: inline-flex; align-items: center; font-size: 13px; color: var(--text-3); }
.site-row--sent .site-who .dot, .site-st--sent .dot { background: var(--ok); }
.site-row--opened .site-who .dot, .site-st--opened .dot { background: var(--warn-2); }
.site-row--browsing .site-who .dot { background: var(--accent-2); }
.site-row--sent .site-st { color: var(--ok); font-weight: 600; }
.site-rows .row-sub { overflow-wrap: anywhere; line-height: 1.45; }
.site-rows .row-end { flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 1px; }
.site-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-rows .lead-link { margin-left: 0; white-space: nowrap; }

.site-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 10px; }
.site-bar .otabs { margin: 0; }
.site-days .otab, .site-tabs .otab { padding: 6px 14px; }
.site-tabs { margin-bottom: 8px; }
.site-range { margin: 0; font-size: 12.5px; color: var(--faint); }
.site-pct { margin-left: 4px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.site-aside { font-size: 12.5px; color: var(--muted); }
.site-table td:first-child { overflow-wrap: break-word; }   /* whole words; only an over-long path breaks */
.site-table td a:hover { color: var(--accent); }
.site-table.stats-table td a { text-transform: none; }
.site-table tfoot td { font-weight: 600; border-top: 1px solid var(--border-strong); }
.site-detail { margin-top: 10px; }
.site-back { display: inline-block; margin: 0 0 6px; }
.site-detail-h { margin: 0 0 12px; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.site-detail-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-detail .sub-h { margin: 20px 0 4px; }
.site-detail .stats-table { margin-top: 4px; }
.site-depth { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.site-depth-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: 13.5px; }
.site-depth-bar { height: 8px; border-radius: 4px; background: var(--bg-page); overflow: hidden; }
.site-depth-bar i { display: block; height: 100%; background: var(--accent-2); border-radius: 4px; }
.site-depth-v { text-align: right; font-variant-numeric: tabular-nums; }
.site-depth-row--wide { grid-template-columns: 140px minmax(0, 1fr) 128px; }   /* «85 · 92 % × 3» */
.site-clips td:nth-child(2), .site-clips td:nth-child(3) { white-space: nowrap; }
.site-clips td:last-child { text-align: left; }

.site-visit { max-width: 860px; }
.site-visit-head .dl { margin-top: 14px; }
.site-visit-head .lead-meta .dot { margin-right: 6px; }
.site-tl { margin-top: 8px; }
.site-path { overflow-wrap: anywhere; }
.tl-item--sent::before { background: var(--ok); border-color: var(--ok); }
.site-acts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.site-act { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.site-act time { padding-top: 1px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-visit-head .lead-head-top > .btn { flex: 0 0 auto; white-space: nowrap; }
.site-act--form_submit { color: var(--ok); font-weight: 600; }
.site-act--form_opened { color: var(--text); font-weight: 600; }
.site-act .lead-link { margin-left: 6px; font-weight: 500; }
.site-times { font-size: 12.5px; color: var(--muted); }
.lead-site-pages { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .site-map-canvas { height: 230px; }
  .site-map-bar { left: 8px; top: 8px; right: 52px; gap: 6px; }
  .site-map-windows .otab { padding: 5px 8px; }
  .site-live { padding: 14px; }
  body:has(.side-panel:not([hidden])) .side-panel-ov { display: block; position: fixed; inset: 0; z-index: 980; background: rgba(15,23,42,.35); }
  body:has(.side-panel:not([hidden])) { overflow: hidden; }
  .side-panel { width: 100vw; border-left: 0; }
  .side-panel-b { padding: 12px; }
  .site-today, .site-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-today .stat, .site-detail-stats .stat { border-left: 1px solid var(--divider); padding-left: 10px; }
  .site-today .stat:nth-child(2n + 1), .site-detail-stats .stat:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .site-bar { flex-direction: column; align-items: stretch; }
  .site-days .otab, .site-tabs .otab, .site-lists .otab { flex: 1 1 0; text-align: center; padding: 7px 4px; }
  .site-rows > li { gap: 8px; }
  .site-table { font-size: 13px; }
  .site-table th { font-size: 11.5px; }
  .site-table th, .site-table td { padding-left: 6px; }
  .site-pct { display: block; margin-left: 0; font-size: 11.5px; }
  .site-depth-row { grid-template-columns: 112px minmax(0, 1fr) 52px; font-size: 13px; }
  .site-depth-row--wide { grid-template-columns: 76px minmax(0, 1fr) 112px; }
  .site-act { grid-template-columns: 38px minmax(0, 1fr); gap: 6px; font-size: 13px; }
  .site-act time { font-size: 12px; }
}