/* Conceito: azulejo de sala de banho. A agenda é a parede de azulejos e cada horário é uma plaquinha de coleira. */
:root {
  --bg: #e7f2f4;
  --surface: #ffffff;
  --surface-2: #f3f9fa;
  --ink: #12363f;
  --muted: #4f6b74;
  --line: #cbdfe3;
  --joint: #e6f0f2;
  --primary: #0b6680;
  --primary-ink: #ffffff;
  --band: #0f4655;
  --band-ink: #e5f4f7;
  --band-muted: #a6cbd4;
  --sun: #f7c948;
  --sun-ink: #4d3a00;
  --danger: #b3261e;
  --danger-soft: #fbe3e1;
  --ok: #1d6b34;
  --ok-soft: #d9f2df;
  --warn: #7a5200;
  --warn-soft: #fdf0c8;
  --neutral-soft: #e4edf0;
  --chart-done: #00779e;
  --chart-expected: #d9980a;
  --agua-bg: #bde6f2; --agua-ink: #0a4557;
  --toalha-bg: #fbe08a; --toalha-ink: #4d3a00;
  --rosa-bg: #f9c9d6; --rosa-ink: #6e1f3a;
  --folha-bg: #c8ecc7; --folha-ink: #1b4d20;
  --lilas-bg: #ded3f8; --lilas-ink: #3f2b7a;
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --hour: 96px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d2229; --surface: #142e37; --surface-2: #193741; --ink: #e6f3f5; --muted: #a2bdc4; --line: #2a4a54; --joint: #1a3640;
    --primary: #63c7e0; --primary-ink: #06262f; --band: #0a1b21; --band-ink: #e5f4f7; --band-muted: #93b4bc;
    --sun: #f7c948; --sun-ink: #2e2300; --danger: #ff9a92; --danger-soft: #4a1f1c; --ok: #8fe0a5; --ok-soft: #173d24;
    --warn: #f3cf74; --warn-soft: #43350f; --neutral-soft: #21414b; --chart-done: #0f9cc4; --chart-expected: #b88810;
    --agua-bg: #17566a; --agua-ink: #d9f4fb; --toalha-bg: #64500f; --toalha-ink: #fdeeb9; --rosa-bg: #6c2a42; --rosa-ink: #fde0e8;
    --folha-bg: #23582b; --folha-ink: #d8f5d8; --lilas-bg: #483a78; --lilas-ink: #e7e0fd;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d2229; --surface: #142e37; --surface-2: #193741; --ink: #e6f3f5; --muted: #a2bdc4; --line: #2a4a54; --joint: #1a3640;
  --primary: #63c7e0; --primary-ink: #06262f; --band: #0a1b21; --band-ink: #e5f4f7; --band-muted: #93b4bc;
  --sun: #f7c948; --sun-ink: #2e2300; --danger: #ff9a92; --danger-soft: #4a1f1c; --ok: #8fe0a5; --ok-soft: #173d24;
  --warn: #f3cf74; --warn-soft: #43350f; --neutral-soft: #21414b; --chart-done: #0f9cc4; --chart-expected: #b88810;
  --agua-bg: #17566a; --agua-ink: #d9f4fb; --toalha-bg: #64500f; --toalha-ink: #fdeeb9; --rosa-bg: #6c2a42; --rosa-ink: #fde0e8;
  --folha-bg: #23582b; --folha-ink: #d8f5d8; --lilas-bg: #483a78; --lilas-ink: #e7e0fd;
  color-scheme: dark;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--body); -webkit-text-size-adjust: 100%; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* estrutura */
.shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 100%; }
.side { background: var(--band); color: var(--band-ink); padding: 20px 12px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.ic.big { width: 44px; height: 44px; stroke-width: 1.5; }
h2 .ic { margin-right: 8px; color: var(--primary); }
h2 { overflow-wrap: anywhere; }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1; padding: 0 10px; display: flex; gap: 10px; align-items: center; }
.brand-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sun); color: #2e2300; font-size: 1.45rem; }
.brand-mark .ic { stroke-width: 2.2; }
.nav-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.paw-trail { margin-top: auto; display: grid; grid-template-columns: repeat(2, 34px); gap: 8px 6px; padding: 0 12px; color: var(--band-muted); opacity: .28; font-size: 1.5rem; }
.paw-trail .ic:nth-child(odd) { transform: rotate(-16deg); }
.paw-trail .ic:nth-child(even) { transform: translateY(14px) rotate(14deg); }
.login-mark { display: flex; align-items: center; gap: 12px; font-size: 1.9rem; color: var(--primary); }
.pet-chips { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pet-chips span { display: inline-flex; align-items: center; gap: 4px; }
.qr-box { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.qr-box > div { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.qr-box ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.qr-box > .qr-demo { flex: none; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); color: var(--primary); border: 1px solid var(--line); }
.qr-box > .qr-demo.ok { color: var(--ok); }
.qr-img { width: 240px; height: 240px; max-width: 100%; background: #fff; border-radius: 8px; flex: none; }
.brand small { display: block; font: 400 .8rem/1.3 var(--body); color: var(--band-muted); margin-top: 6px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--band-ink); text-decoration: none; padding: 9px 10px; border-radius: 8px; font-weight: 500; }
.nav a:hover { background: rgba(255, 255, 255, .08); }
.nav a[aria-current="page"]:hover { background: var(--sun); }
.nav a[aria-current="page"] { background: var(--sun); color: #2e2300; font-weight: 700; }
.nav .count { background: var(--danger); color: #fff; border-radius: 99px; font-size: .75rem; font-weight: 700; padding: 0 7px; }
.side-foot { padding: 0 10px; }
.linklike { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }
.main { min-width: 0; padding-block: 24px 48px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 20px; }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.head > div { min-width: 0; }
.demo-band { background: var(--sun); color: #2e2300; padding-block: 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; }

/* botões */
.btn .ic { margin-right: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 40px; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.08); background: var(--primary); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.small { padding: 4px 10px; min-height: 32px; font-size: .875rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.icon { padding: 0; width: 40px; font-size: 1.2rem; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* formulários */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span, .label { font-weight: 600; font-size: .875rem; }
.hint { color: var(--muted); font-size: .825rem; }
input[type=text], input[type=email], input[type=tel], input[type=search], input[type=password], input[type=date], input[type=time], input[type=month], input[type=number], select, textarea {
  width: 100%; min-height: 40px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
textarea { min-height: 72px; resize: vertical; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--primary); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 4px 12px; cursor: pointer; font-weight: 500; font-size: .875rem; min-height: 32px; }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* painéis */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.empty { color: var(--muted); padding: 24px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.notice { border-radius: 8px; padding: 10px 14px; background: var(--warn-soft); color: var(--warn); display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.notice.bad { background: var(--danger-soft); color: var(--danger); }
.notice.info { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.pill { display: inline-block; border-radius: 99px; padding: 1px 9px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--neutral-soft); color: var(--ink); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--danger-soft); color: var(--danger); }

/* faixa da semana */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 2px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.2; min-width: 0; }
.day b { font-family: var(--display); font-size: 1.2rem; font-weight: 700; }
.day small { color: var(--muted); font-size: .75rem; }
.day.today b { box-shadow: inset 0 -3px 0 var(--sun); padding-inline: 4px; }
.day.closed { background: transparent; }
.day[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.day[aria-pressed="true"] small { color: inherit; }

/* a parede de azulejos */
.wall-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.wall { display: grid; min-width: 100%; position: relative; }
.wall-corner, .wall-head { position: sticky; top: 0; background: var(--surface); border-bottom: 2px solid var(--line); padding: 8px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; z-index: 3; }
.wall-hours { position: relative; }
.wall-hours span { position: absolute; right: 8px; transform: translateY(-50%); color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.wall-hours span:first-child { transform: none; }
.lane { position: relative; border-left: 1px solid var(--line); cursor: copy; min-width: 170px;
  background-image:
    linear-gradient(to bottom, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--joint) 1px, transparent 1px);
  background-size: 100% var(--hour), 100% calc(var(--hour) / 2);
}
.lane.closed { background-color: var(--surface-2); }
.now-line { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); z-index: 2; pointer-events: none; }

/* a plaquinha */
.tag { --tag-bg: var(--agua-bg); --tag-ink: var(--agua-ink); position: absolute; left: 6px; right: 6px; border: 0; text-align: left; cursor: pointer; overflow: hidden; border-radius: 6px 14px 14px 6px; padding: 5px 8px 5px 24px; z-index: 1; display: flex; flex-direction: column; gap: 0; line-height: 1.2; background: var(--tag-bg); color: var(--tag-ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.tag::before { content: ""; position: absolute; left: 7px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.tag strong { font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; display: flex; align-items: center; gap: 4px; }
.tag .meta { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.tag .meta { font-size: .78rem; }
.c-agua { --tag-bg: var(--agua-bg); --tag-ink: var(--agua-ink); }
.c-toalha { --tag-bg: var(--toalha-bg); --tag-ink: var(--toalha-ink); }
.c-rosa { --tag-bg: var(--rosa-bg); --tag-ink: var(--rosa-ink); }
.c-folha { --tag-bg: var(--folha-bg); --tag-ink: var(--folha-ink); }
.c-lilas { --tag-bg: var(--lilas-bg); --tag-ink: var(--lilas-ink); }
.swatch { background: var(--tag-bg); color: var(--tag-ink); display: inline-flex; align-items: center; justify-content: center; }
/* Atendimentos passados ficam mais claros, mas continuam legíveis. */
.st-concluido, .st-faltou { background: color-mix(in srgb, var(--tag-bg) 40%, var(--surface)) !important; }
.tag.st-faltou strong { text-decoration: line-through; }
.tag .check-mark { position: absolute; right: 8px; top: 4px; font-weight: 800; }
.tag .size { font-size: .72rem; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 3px; margin-left: 4px; font-family: var(--body); vertical-align: 1px; }
.tag:hover { filter: brightness(.97); }

/* lista de horários */
.agenda-list { display: none; }
.slot-card { --tag-bg: var(--agua-bg); --tag-ink: var(--agua-ink); width: 100%; position: relative; border: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 8px; text-align: left; border-radius: 8px 16px 16px 8px; padding: 10px 12px 10px 28px; cursor: pointer; background: var(--tag-bg); color: var(--tag-ink); }
.slot-card::before { content: ""; position: absolute; left: 10px; top: 14px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.slot-card b.t { font-variant-numeric: tabular-nums; font-size: 1rem; }
.slot-card strong { font-family: var(--display); font-size: 1.1rem; font-weight: 700; line-height: 1.2; display: flex; align-items: center; gap: 5px; }
.slot-card span { grid-column: 2; font-size: .85rem; }
.slot-card span .ic { margin-right: 4px; }

/* listas */
.list { display: flex; flex-direction: column; }
.item { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.item > div { min-width: 0; }
.item-title { font-weight: 600; }
button.item { width: 100%; background: none; border-width: 1px 0 0; border-color: var(--line); border-style: solid; text-align: left; cursor: pointer; padding-inline: 4px; }
button.item:hover { background: var(--surface-2); }
button.item:first-child { border-top: 0; }
.date-head { font-family: var(--display); font-weight: 600; font-size: 1.02rem; padding-top: 12px; }
.message-box { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font-size: .9rem; overflow-wrap: anywhere; white-space: pre-line; }
.flag { background: var(--warn-soft); color: var(--warn); padding: 8px 12px; border-radius: 8px; font-weight: 500; overflow-wrap: anywhere; }

/* janelas */
dialog { border: 0; border-radius: 12px; padding: 0; background: var(--surface); color: var(--ink); width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
dialog::backdrop { background: rgba(8, 35, 43, .55); }
.dlg { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 10px; }
.dlg-head h2 { min-width: 0; overflow-wrap: anywhere; }
.dlg-body { padding: 4px 18px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.dlg-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.close { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; }
.results { border: 1px solid var(--line); border-radius: 8px; max-height: 190px; overflow-y: auto; }
.results button { display: block; width: 100%; text-align: left; padding: 8px 10px; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; }
.results button:first-child { border-top: 0; }
.results button:hover { background: var(--surface-2); }
.picked { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; }
.occ { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); align-items: center; }
.occ:first-child { border-top: 0; }
.occ .err { color: var(--danger); font-size: .85rem; }
.occ.soft .err { color: var(--warn); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; z-index: 100; font-weight: 500; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.bad { background: var(--danger); color: #fff; }
:root[data-theme="dark"] .toast.bad { color: #300; }
.swatches { display: flex; gap: 8px; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatch[aria-pressed="true"] { border-color: var(--ink); }
.hours-row { display: grid; grid-template-columns: 130px 80px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.login { position: relative; overflow: hidden; background: var(--hero-bg, var(--bg)); min-height: 100dvh; display: grid; place-items: center; padding-block: 16px 112px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.login form { width: min(380px, 100%); }

@media (max-width: 820px) {
  .shell { display: block; padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .side { display: none; }
  .main { padding-block: 16px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  h1 { font-size: 1.6rem; }
  .wall-wrap { display: none; }
  .agenda-list { display: flex; flex-direction: column; gap: 8px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hours-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hours-row .field { grid-column: span 1; }
  .day b { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .tag, .slot-card { transition: filter .12s; }
}
#agenda-data { width: auto; }
.qr-box.connected { background: var(--ok-soft); border-color: var(--ok); }
.qr-success { font-family: var(--display); font-size: 1.35rem; color: var(--ok); }
.side-foot { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.wa-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--band-ink); text-decoration: none; font-weight: 600; }
.wa-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff8a80; flex: none; }
.wa-chip.on .wa-dot { background: #6fe08f; }

/* fotos */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.block { display: block; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.avatar.no-photo { background: var(--neutral-soft); color: var(--primary); }
.avatar.sm { width: 22px; height: 22px; font-size: .8rem; }
.avatar.lg { width: 52px; height: 52px; font-size: 1.4rem; }
.tag .avatar.no-photo, .slot-card .avatar.no-photo { background: transparent; color: inherit; font-size: 1rem; }
dialog h2 .avatar { margin-right: 8px; }
dialog h2 .avatar .ic { margin: 0; }
.photo-add { position: relative; }
.photo-add:focus-within { outline: 3px solid var(--sun); outline-offset: 2px; }
.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-tile { position: relative; width: 104px; display: flex; flex-direction: column; gap: 4px; }
.photo-open { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.photo-open img { display: block; width: 104px; height: 104px; object-fit: cover; border-radius: 8px; }
.photo-tile.is-main .photo-open img { box-shadow: 0 0 0 3px var(--primary); }
.photo-badge { position: absolute; top: 4px; left: 4px; }
.photo-actions { display: flex; flex-direction: column; gap: 4px; }
.photo-actions .btn { width: 100%; }
.photo-hero { padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.photo-hero img { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; }
.photo-full { display: block; max-width: 100%; max-height: 74dvh; margin: 0 auto; border-radius: 8px; }
.form-group { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.form-group:first-child { border-top: 0; padding-top: 0; }
.form-group h3 .ic { margin-right: 6px; color: var(--primary); }
.pet-link, .arrive { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; min-width: 0; }
.stage-field { min-width: 180px; }

/* quadro de atendimento */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; }
.board-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 130px; }
.board-col h2 { font-size: 1.05rem; display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.board-col.ready { border-color: var(--ok); background: var(--ok-soft); }
.board-count { font-family: var(--body); font-size: .85rem; font-weight: 700; }
.board-empty { text-align: center; padding-block: 12px; }
.care-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.care-head { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; width: 100%; }
.care-title { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.care-title strong { font-family: var(--display); font-size: 1.15rem; line-height: 1.15; }
.care-card .pill { white-space: normal; }
.care-actions .btn { flex: 1 1 auto; }
.flag.small { padding: 6px 8px; font-size: .82rem; }
.tag .check-mark .ic { width: 1em; height: 1em; }

/* painel */
.quick-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quick { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; min-width: 0; }
.quick b { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; font-weight: 700; }
.quick[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.goal-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.goal-num b { font-family: var(--display); font-size: 1.5rem; }
.goal-track { position: relative; height: 12px; border-radius: 6px; background: var(--neutral-soft); }
.goal-fill { position: absolute; inset: 0 auto 0 0; background: var(--chart-done); border-radius: 6px; }
.goal-tick { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; }
.period-head { margin-bottom: -8px; }
.stats { display: grid; grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); gap: 16px; align-items: start; }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-value { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.stat-value.big { font-size: 2.1rem; }
.chart { display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: 220px auto; }
.chart-y { position: relative; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; text-align: right; padding-right: 8px; margin-block: -7px; }
.chart-plot { position: relative; border-bottom: 1px solid var(--muted); min-width: 0; }
.chart-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--joint); }
.chart-bars { position: absolute; inset: 0; display: flex; gap: 2px; align-items: stretch; }
.chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 4px 4px 0 0; }
.chart-col:hover { background: var(--surface-2); }
.bar { display: block; width: 100%; max-width: 40px; margin-inline: auto; }
.chart-col > .bar:first-child { border-radius: 4px 4px 0 0; }
.bar-done { background: var(--chart-done); }
.bar-expected { background: var(--chart-expected); }
.chart-x { grid-column: 2; display: flex; gap: 2px; padding-top: 5px; color: var(--muted); font-size: .75rem; }
.chart-x span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
.chart-tip { position: absolute; top: 4px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 6px 10px; border-radius: 6px; font-size: .8rem; white-space: nowrap; z-index: 3; pointer-events: none; }
.chart-legend { display: flex; gap: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.key { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.key-done { background: var(--chart-done); }
.key-expected { background: var(--chart-expected); }
.table-wrap { overflow-x: auto; margin-top: 8px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th.num, td.num { text-align: right; }
.ranks { display: flex; flex-direction: column; gap: 12px; }
.rank { display: flex; flex-direction: column; gap: 3px; }
.rank-line { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.rank-name { min-width: 0; overflow-wrap: anywhere; }
.rank-track { height: 8px; background: var(--neutral-soft); border-radius: 4px; }
.rank-fill { display: block; height: 100%; background: var(--chart-done); border-radius: 4px; }
.nav-label .short { display: none; }

@media (max-width: 1180px) {
  .board { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-main { grid-column: 1 / -1; }
  .quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .board-col { min-height: 0; }
  .goal-row { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart { grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: 180px auto; }
  .quick b { font-size: 1.2rem; }
}

/* texto direto sobre o fundo escolhido */
.main > .head, .period-head { color: var(--on-bg, var(--ink)); }
.main > .head .muted { color: var(--on-bg-muted, var(--muted)); }

/* pacotes */
.dots { display: flex; flex-wrap: wrap; gap: 4px; margin-block: 4px; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--chart-done); background: transparent; }
.dot.used { background: var(--chart-done); }
.dot.reserved { background: var(--chart-expected); border-color: var(--chart-expected); }
.pkg-who { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.pkg-check { background: var(--ok-soft); border-radius: 8px; padding: 8px 10px; }

/* campanha */
.camp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.camp-list { display: flex; flex-direction: column; }
.camp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.camp-row:first-child { border-top: 0; }
.camp-row > input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primary); }
.camp-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; grid-column: 2; }
.camp-row > .row { grid-column: 3; justify-content: flex-end; }
.camp-pet { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
.camp-group { border-top: 1px solid var(--line); padding-top: 8px; }
.camp-group summary { cursor: pointer; }

/* aparência */
.theme-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.theme-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 2px solid transparent; border-radius: 10px; padding: 6px; cursor: pointer; }
.theme-opt[aria-pressed="true"] { border-color: var(--primary); }
.theme-chip { position: relative; display: block; width: 64px; height: 44px; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; }
.theme-bar { position: absolute; inset: 0 auto 0 0; width: 16px; }
.theme-opt input[type=color] { width: 64px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }

@media (max-width: 1180px) { .camp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .camp-row { grid-template-columns: auto minmax(0, 1fr); }
  .camp-row > .row { grid-column: 2; justify-content: flex-start; }
  .side-foot { display: none; }
}

/* login e administração */
.auth-card { width: min(400px, 100%); }
.auth-card form { width: 100%; }
.temp-pass { display: inline-block; font-size: 1.25rem; font-weight: 700; padding: 6px 10px; background: var(--surface-2); border-radius: 6px; user-select: all; overflow-wrap: anywhere; }
.admin-wrap { max-width: 1180px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.admin-brand { padding: 0; }
.admin-brand small { display: block; font-family: var(--body); font-weight: 500; font-size: .8rem; margin-top: 3px; color: var(--band-muted); }
.mobile-bar { display: none; }

/* vendas */
.pos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pos-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pos-product { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; cursor: pointer; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.pos-product:hover { border-color: var(--primary); }
.pos-cart { position: sticky; top: 12px; display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.pos-cart-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.pos-cart-head, .pos-foot { flex: none; }
.pos-items { flex: 1 1 auto; min-height: 140px; overflow-y: auto; overscroll-behavior: contain; margin-inline: -6px; padding-inline: 6px; }
.pos-items > .pos-line:first-child { border-top: 0; padding-top: 0; }
.pos-foot { border-top: 1px solid var(--line); padding-top: 10px; background: var(--surface); }
.pos-cart h2 { display: flex; align-items: center; gap: 8px; }
.pos-count { margin-left: auto; font-size: .8rem; }
.pos-line { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.pos-line-head { display: flex; justify-content: space-between; gap: 10px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.pos-price { width: 96px !important; }
.pos-total { margin-left: auto; font-weight: 600; }
.pos-med { display: flex; flex-direction: column; gap: 8px; background: var(--warn-soft); border-radius: 8px; padding: 10px; }
.pos-med .chip { background: var(--surface); color: var(--ink); }
.pos-med .chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.pos-med .hint, .pos-med .field > span { color: var(--warn); }
.warn-text { color: var(--warn); }
.pos-sum { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--line); padding-top: 10px; }
.pos-sum b { font-family: var(--display); font-size: 1.6rem; }
.pos-finish { flex: 1 1 auto; }
@media (max-width: 1000px) {
  .pos { grid-template-columns: minmax(0, 1fr); }
  .pos-cart { position: static; max-height: none; }
  .pos-items { max-height: 55vh; }
  .pos-foot { position: sticky; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); z-index: 2; margin-inline: -12px; padding: 10px 12px; box-shadow: 0 -6px 12px -10px rgba(0, 0, 0, .35); }
}
@media (max-width: 820px) {
  .mobile-bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--band); color: var(--band-ink); padding-block: 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); font-size: .9rem; font-weight: 600; }
}

/* fotos de produto */
.pos-photo { display: block; width: 100%; aspect-ratio: 4 / 3; max-width: 100%; object-fit: cover; border-radius: 6px; background: var(--neutral-soft); }
.pos-photo.no-photo { display: grid; place-items: center; color: var(--muted); font-size: 1.6rem; }
.avatar.square { border-radius: 8px; }
@media (max-width: 820px) { .pos-photo { aspect-ratio: 16 / 9; } }

/* cliente na venda */
.pos-client { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.pos-client .btn.icon { min-height: 40px; height: 40px; font-size: 1.4rem; line-height: 1; }
.pos-client-pets { justify-content: space-between; }

/* submenu */
.nav a.sub { margin-left: 18px; padding-block: 6px; font-size: .92rem; border-left: 2px solid rgba(255, 255, 255, .25); border-radius: 0 8px 8px 0; }
.nav a.sub[aria-current="page"] { border-left-color: var(--sun); }
.nav a.parent-on { font-weight: 700; background: rgba(255, 255, 255, .1); }
.sub-tabs { display: none; }
a.chip { text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; }
a.chip[aria-pressed="true"] { color: var(--primary-ink); }
@media (max-width: 820px) {
  .nav a.sub { display: none; }
  .sub-tabs { display: flex; }
}
.site-back { align-self: center; text-align: center; color: var(--muted); }

/* login com os pets ao fundo */
.login > .panel { position: relative; z-index: 5; box-shadow: 0 10px 0 rgba(18, 54, 63, .18); }
.login-scene { position: absolute; inset: auto 0 0; z-index: 1; }

/* lojas e licenças */
.admin-page { min-height: 100dvh; }
.admin-bar { background: var(--band); color: var(--band-ink); }
.admin-bar-row { max-width: 1180px; margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.lic-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lic-tile { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 2px solid transparent; border-radius: 6px 18px 18px 6px; padding: 12px 14px; cursor: pointer; font: inherit; min-width: 0; }
.lic-tile:hover { border-color: currentColor; }
.lic-tile[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.lic-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.lic-tile-top { display: flex; justify-content: space-between; align-items: center; font-size: 1.25rem; }
.lic-tile-top b { font-family: var(--display); font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lic-tile strong { font-family: var(--display); font-size: 1.1rem; line-height: 1.15; }
.lic-tile .small { line-height: 1.25; }
.t-agua { background: var(--agua-bg); color: var(--agua-ink); }
.t-toalha { background: var(--toalha-bg); color: var(--toalha-ink); }
.t-rosa { background: var(--rosa-bg); color: var(--rosa-ink); }
.t-folha { background: var(--folha-bg); color: var(--folha-ink); }
.t-lilas { background: var(--lilas-bg); color: var(--lilas-ink); }
.lic-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.lic-search { position: relative; flex: 1 1 280px; min-width: 0; }
.lic-search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); margin: 0; }
.lic-search input { width: 100%; padding-left: 36px; }
.lic-tools select { flex: 0 1 260px; min-width: 0; }
.lic-list { display: flex; flex-direction: column; }
.lic-head, .item.lic-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr) minmax(0, .9fr) auto; gap: 16px; align-items: center; }
.lic-head { padding: 0 4px 8px; font-weight: 600; border-bottom: 1px solid var(--line); }
.lic-head span:last-child { width: 196px; }
.item.lic-row { padding: 12px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.item.lic-row:last-child { border-bottom: 0; }
.lic-store, .lic-state, .lic-use { min-width: 0; overflow-wrap: anywhere; }
.lic-state .row { gap: 6px; margin-bottom: 2px; }
.lic-ic { display: inline-flex; color: var(--ok); }
.lic-ic.warn { color: var(--warn); }
.lic-ic.bad { color: var(--danger); }
.lic-actions { display: flex; gap: 6px; width: 196px; justify-content: flex-end; }
.lic-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 16px; }
.dialog-sec { display: flex; align-items: center; gap: 8px; color: var(--primary); }
.dialog-sec .ic { margin: 0; }
.license-box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.license-box p { margin: 4px 0 0; }
.renew-result { margin: 0; font-weight: 600; }
@media (max-width: 960px) {
  .lic-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lic-tile:first-child { grid-column: 1 / -1; }
  .lic-head { display: none; }
  .item.lic-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lic-actions { width: auto; justify-content: flex-start; }
  .lic-actions .btn { flex: 1 1 0; min-height: 40px; }
  .lic-tools select { flex: 1 1 100%; }
}
.admin-bar .brand { display: flex; }

/* venda com atendimento */
.pos-line.is-service { background: var(--agua-bg); color: var(--agua-ink); border: 0; border-radius: 6px 14px 14px 6px; padding: 10px; }
.pos-line.is-service .pos-line-head b { display: inline-flex; align-items: center; gap: 6px; }
.pos-line.is-service .linklike { color: inherit; }
.pos-line.is-service .pill { background: var(--surface); color: var(--ink); }

/* recibo */
.receipt-settings { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.receipt-preview { display: flex; justify-content: center; background: var(--surface-2); border-radius: 8px; padding: 14px; overflow-x: auto; }
.receipt { --rc-w: 72mm; --rc-l: 4mm; --rc-t: 2mm; --rc-f: 1; background: #fff; color: #000; font: 400 calc(13px * var(--rc-f))/1.35 var(--body); padding: 12px; display: flex; flex-direction: column; gap: 3px; width: calc(var(--rc-w) + 24px); max-width: 100%; flex: none; overflow-wrap: anywhere; }
.receipt.paper-58 { font-size: calc(11px * var(--rc-f)); }
.receipt.paper-a4 { font-size: calc(14px * var(--rc-f)); }
.receipt * { max-width: 100%; }
.receipt hr { width: 100%; border: 0; border-top: 1px dashed #000; margin: 6px 0; }
.rc-shop { font-size: 1.25em; text-align: center; overflow-wrap: anywhere; }
.rc-text { margin: 0; white-space: pre-line; text-align: center; overflow-wrap: anywhere; }
.rc-foot { margin-top: 8px; }
.rc-note { margin: 6px 0 0; font-size: .85em; text-align: center; }
.rc-item { display: flex; flex-direction: column; margin-bottom: 3px; }
.rc-line { display: flex; justify-content: space-between; gap: 8px; }
.rc-line span:first-child { min-width: 0; overflow-wrap: anywhere; }
.rc-line span:last-child { flex: none; font-variant-numeric: tabular-nums; }
.rc-sub { font-size: .9em; padding-left: 8px; }
.rc-total { font-weight: 700; font-size: 1.2em; }
#print-area { display: none; }
@media print {
  @page { margin: 3mm; }
  @page recibo { margin: 0; }
  body.printing { background: #fff !important; }
  body.printing #root, body.printing dialog, body.printing .toast { display: none !important; }
  body.printing #print-area { display: block; }
  /* Recibo: a página não tem margem; a largura útil e as margens vêm de Configurações > Recibo. */
  body.printing .receipt { page: recibo; padding: var(--rc-t) 0 0 0; margin: 0 0 0 var(--rc-l); width: var(--rc-w); max-width: var(--rc-w); box-sizing: border-box; }
}
@media (max-width: 760px) { .receipt-settings { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .pos.cart-first .pos-cart { order: -1; } }

/* cadastros e relatórios */
.nav { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.pet-row { flex-wrap: nowrap; min-width: 0; }
.pet-row > div { min-width: 0; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.hub-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 8px 22px 22px 8px; text-decoration: none; min-width: 0; }
.hub-card:hover { outline: 2px solid currentColor; }
.hub-card strong { font-family: var(--display); font-size: 1.3rem; line-height: 1.15; }
.hub-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--primary); font-size: 1.3rem; margin-bottom: 4px; }
.hub-ic .ic { margin: 0; }
.report-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.report-period input { width: auto; }
.main > .report-period .small.muted { color: var(--on-bg-muted, var(--muted)); }
.report-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.report-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.report-tools .lic-search { flex: 1 1 240px; }
.report-table th { padding: 0; font-weight: 600; }
.report-table th > span.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.th-sort { background: none; border: 0; padding: 8px; font: inherit; font-weight: 600; color: inherit; cursor: pointer; white-space: nowrap; }
.th-sort:hover { text-decoration: underline; }
.report-table th.num .th-sort { width: 100%; text-align: right; }
.report-table td { padding-block: 8px; vertical-align: middle; }
.report-link { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.rank-pos { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 50%; font-weight: 700; }
.rank-pos.top { background: var(--sun); color: #2e2300; }
.report-bar { min-width: 120px; }
.meter { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--neutral-soft); }
.meter i { display: block; height: 100%; min-width: 2px; border-radius: 3px; background: var(--chart-done); }
.report-print { padding: 6mm; color: #000; font: 400 11px/1.35 var(--body); }
.report-print h1 { font-size: 18px; margin: 2px 0; color: #000; }
.report-print p { margin: 2px 0; }
.report-print table { margin-top: 8px; }
.report-print th, .report-print td { padding: 3px 5px; border-bottom: 1px solid #999; white-space: normal; color: #000; }
.report-print th { font-weight: 700; }
@media (max-width: 620px) { .phone-hide { display: none; } .report-bar { min-width: 96px; width: 40%; } }
.hub-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .hub-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hub-grid.three { grid-template-columns: minmax(0, 1fr); } }
.rc-company { text-align: center; overflow-wrap: anywhere; font-size: .92em; }
@media (min-width: 821px) { .nav { overflow-x: hidden; } }
@media (max-width: 620px) { .company-form .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ficha de custos */
.svc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-main { display: flex; align-items: center; gap: 12px; flex: 1 1 280px; min-width: 0; background: none; border: 0; padding: 4px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.svc-main:hover .item-title { text-decoration: underline; }
.block { display: block; }
.fc-row { display: grid; grid-template-columns: minmax(150px, 2fr) repeat(4, minmax(56px, 1fr)) auto; gap: 8px; align-items: center; }
.fc-table td { padding-block: 6px; }
.fc-th { display: block; padding: 8px; }
.fc-table .pos-price { width: 92px !important; text-align: right; }
.fc-profit.neg { color: var(--danger); font-weight: 700; }
@media (max-width: 620px) {
  .fc-head { display: none; }
  .fc-row { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 8px; border-top: 1px solid var(--line); }
  .fc-row select { grid-column: 1 / -1; }
  .fc-row .btn { grid-column: 1 / -1; }
}
.nav a.sub .long { line-height: 1.15; }
.fc-qty { display: block; min-width: 0; }
.fc-qty span { display: none; }
@media (max-width: 620px) {
  .fc-qty span { display: block; font-size: .78rem; font-weight: 600; margin-bottom: 2px; }
  .fc-table thead { display: none; }
  .fc-table, .fc-table tbody, .fc-table tr, .fc-table td { display: block; width: 100%; }
  .fc-table tr { padding-block: 10px; border-bottom: 1px solid var(--line); }
  .fc-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 3px 0; white-space: normal; text-align: right; }
  .fc-table td::before { content: attr(data-label); color: var(--muted); font-size: .875rem; }
  .fc-table .fc-size { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
}

/* logo: fundo branco porque as letras são pretas */
.logo-plate { display: block; background: #fff; border-radius: 10px; padding: 4px 8px; height: auto; max-width: 100%; }
.brand-logo { width: 100%; max-width: 176px; }
.brand { flex-direction: column; align-items: stretch; gap: 6px; }
.brand small { margin-top: 0; padding-inline: 2px; }
.login-logo { display: block; width: min(300px, 100%); margin-inline: auto; background: #fff; border-radius: 12px; padding: 6px; }
.mobile-bar .bar-logo { width: 30px; height: 30px; border-radius: 50%; background: #fff; padding: 1px; flex: none; }
.mobile-bar > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.admin-brand { flex-direction: row; align-items: center; gap: 12px; }
.admin-brand .logo-plate { width: 140px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* WhatsApp flutuante */
.wa-float { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: inline-flex; align-items: center; gap: 0; height: 56px; min-width: 56px; padding: 0 14px; border-radius: 28px; background: #128c4a; color: #fff; text-decoration: none; font: 600 .95rem var(--body); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.wa-float svg { width: 28px; height: 28px; fill: currentColor; flex: none; }
.wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .2s ease, margin .2s ease; }
.wa-float:hover span, .wa-float:focus-visible span { max-width: 240px; margin-left: 10px; }
.wa-float:hover { background: #0f7a40; }
.wa-float:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
body:has(.login) .wa-float { bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
body:has(.admin-page) .wa-float { display: none; }
body:has(.shell) .main { padding-bottom: 88px; }
@media (max-width: 820px) {
  body:has(.shell) .wa-float { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); height: 50px; min-width: 50px; padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) { .wa-float span { transition: none; } }
@media print { .wa-float { display: none !important; } }
@media (max-width: 480px) { .admin-brand > span { display: none; } .admin-brand .logo-plate { width: 120px; } }

/* assistente */
.as-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.as-chat { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; background: var(--surface-2); border-radius: 8px; padding: 12px; min-height: 80px; }
.as-chat.tall { max-height: 520px; }
.as-bubble { align-self: flex-start; max-width: 86%; background: var(--surface); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; padding: 7px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.as-bubble.me { align-self: flex-end; background: var(--ok-soft); color: var(--ok); border-color: transparent; border-radius: 12px 4px 12px 12px; }
.as-bubble.shop { align-self: flex-end; background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.as-bubble small { display: block; font-size: .72rem; opacity: .75; margin-bottom: 2px; }
.as-send input { flex: 1 1 200px; min-width: 0; }
.wrap-any { overflow-wrap: anywhere; user-select: all; }
.conv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; align-items: start; }
@media (max-width: 820px) { .conv-grid { grid-template-columns: minmax(0, 1fr); } }
.conv-detail > a.btn { align-self: flex-start; }

/* planos e módulos */
.lic-plan { gap: 6px; margin-top: 4px; }
.plan-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.plan-edit { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.plan-edit > .btn { align-self: flex-start; }
.mod-checks { display: flex; flex-direction: column; gap: 10px; }
.mod-checks.mod-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mod-checks .check { min-width: 0; }
.mod-checks input:disabled + span { color: var(--muted); }
.plan-mine { display: flex; flex-direction: column; gap: 12px; }
.plan-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-lines li { display: flex; gap: 8px; align-items: flex-start; }
.plan-lines li .ic { flex: none; margin-top: 2px; }
.plan-lines li.on .ic { color: var(--ok); }
.plan-lines li.off { color: var(--muted); }
@media (max-width: 980px) { .plan-edit-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .mod-checks.mod-two { grid-template-columns: minmax(0, 1fr); } }

/* recursos fora do plano */
.lock-mark { display: inline-flex; flex: none; }
.lock-mark .ic { margin: 0; }
.nav a.locked { flex-direction: row-reverse; }
.nav a.locked .nav-label { opacity: .78; }
.nav a.locked .lock-mark { color: var(--sun); }
.nav a.locked[aria-current="page"] .nav-label { opacity: 1; }
.nav a.locked[aria-current="page"] .lock-mark { color: #2e2300; }
.hub-card.locked { position: relative; }
.hub-card.locked .lock-mark { position: absolute; top: 12px; right: 12px; }
.chip .ic { margin-right: 4px; }
.locked-page { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 560px; }
.locked-page p { margin: 0; }
.locked-page .row { margin-top: 6px; }
.locked-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sun); color: #2e2300; font-size: 1.4rem; }
.locked-ic .ic { margin: 0; }

/* tutoriais */
.tut-group { display: flex; flex-direction: column; gap: 12px; }
.tut-group h2 { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; font-size: 1.15rem; }
.tut-group-n { font-size: .85rem; font-weight: 600; color: var(--muted); }
.tut-hub { max-width: 1100px; }
.tut-hub-hero { background: var(--band); color: var(--band-ink); align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 28px 30px; }
.tut-hero.tut-hub-hero > div { flex: 1 1 320px; }
.tut-hub-hero p { color: var(--band-muted); opacity: 1; }
.tut-progress { display: flex; align-items: center; gap: 12px; white-space: nowrap; margin-top: 14px; font-weight: 600; font-size: .92rem; }
.tut-bar { flex: 0 1 220px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.tut-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--sun); transition: width .6s ease; }
.tut-hero .tut-search { flex: 1 1 280px; max-width: 380px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 14px; background: var(--surface); color: var(--muted); }
.tut-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 14px 0; font: inherit; color: var(--ink); outline: none; }
.tut-search:focus-within { box-shadow: 0 0 0 3px var(--sun); }
.tut-start { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 20px; background: var(--sun); color: var(--sun-ink); text-decoration: none; box-shadow: 0 8px 0 rgba(0, 0, 0, .08); }
.tut-start > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tut-start small { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .72rem; opacity: .75; }
.tut-start b { font-size: 1.3rem; }
.tut-start-play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sun-ink); color: var(--sun); font-size: 1.5rem; }
.tut-start-play .ic { margin: 0; }
.tut-start-go { font-size: 1.6rem; font-weight: 800; }
.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tut-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; text-decoration: none; min-height: 132px; box-shadow: 0 6px 0 rgba(0, 0, 0, .05); }
.tut-card strong { font-size: 1.12rem; margin-top: auto; }
.tut-card-ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--surface); color: var(--primary); font-size: 1.25rem; }
.tut-card-ic .ic { margin: 0; }
.tut-card-meta { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; opacity: .8; }
.tut-card-meta .ic { margin: 0; }
.tut-card-done { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--surface); font-size: .8rem; font-weight: 800; }
.tut-card-done.all { background: var(--ok); color: #fff; }
.tut-card-done .ic { margin: 0; }
.tut-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tut-soon-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 4px; }
.tut-soon-pill { padding: 4px 11px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); font-size: .85rem; }
.tut-none { text-align: center; padding: 20px; }
.tut-dur { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--neutral-soft); color: var(--muted); font-size: .82rem; font-weight: 700; }
.tut-dur .ic { margin: 0; }
.tut-item.done { border-color: var(--ok); }
.tut-mark.on { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.tut-index a.done span { background: var(--ok); }
.tut-index a span .ic { margin: 0; width: 15px; height: 15px; }
.tut-page { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.tut-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; text-decoration: none; }
.tut-back:hover { color: var(--primary); }
.tut-hero { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 22px; position: relative; overflow: hidden; }
.tut-hero::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: currentColor; opacity: .07; pointer-events: none; }
.tut-hero > div { flex: 1; min-width: 0; }
.tut-hero h1 { margin: 2px 0 4px; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.tut-hero p { margin: 0; opacity: .85; }
.tut-kicker { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .75rem; opacity: .8; }
.tut-hero-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; background: var(--surface); color: var(--primary); font-size: 1.7rem; box-shadow: 0 6px 0 rgba(0, 0, 0, .06); }
.tut-hero-ic .ic { margin: 0; }
.tut-index { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tut-index a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; }
.tut-index a:hover { border-color: var(--primary); }
.tut-index a span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: .85rem; }
.tut-list { display: flex; flex-direction: column; gap: 22px; }
.tut-item { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 16px; }
.tut-title { display: flex; align-items: center; gap: 12px; justify-content: center; text-align: center; }
.tut-title h2 { margin: 0; font-size: 1.45rem; }
.tut-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); font-weight: 800; }
.tut-frame { width: 100%; max-width: 860px; margin: 0 auto; padding: 8px; border-radius: 18px; background: linear-gradient(135deg, var(--primary), var(--band)); box-shadow: 0 14px 30px -14px rgba(15, 70, 85, .55); }
.tut-video { display: block; width: 100%; max-height: 70vh; border-radius: 12px; background: #000; }
.tut-frame .tut-video { aspect-ratio: 16 / 9; object-fit: contain; }
.tut-text { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; line-height: 1.6; font-size: 1.02rem; overflow-wrap: anywhere; }
.tut-text p { margin: 0; }
.tut-kicker-line { margin-top: 10px !important; padding: 10px 14px; border-radius: 12px; background: var(--neutral-soft); font-weight: 700; font-size: 1.05rem; }
.tut-kicker-line:first-child { margin-top: 0 !important; }
.tut-steps, .tut-bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tut-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.tut-step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-weight: 800; font-size: .9rem; margin-top: 1px; }
.tut-bullets li { position: relative; padding-left: 22px; }
.tut-bullets li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
.tut-path { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 8px; background: var(--neutral-soft); font-weight: 700; white-space: nowrap; }
.tut-sep { opacity: .55; }
.tut-foot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px dashed var(--line); }
.tut-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tut-nav-link { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tut-nav-link:hover { border-color: var(--primary); }
.tut-nav-link small { color: var(--muted); }
.tut-nav-link:last-child { text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .tut-hero, .tut-item { animation: tut-in .45s ease both; animation-delay: var(--d, 0ms); }
  .tut-hero-ic { animation: tut-pop .6s .15s cubic-bezier(.3, 1.6, .5, 1) both; }
  .tut-index a, .tut-nav-link, .tut-steps li { transition: border-color .15s, transform .15s; }
  .tut-index a:hover, .tut-nav-link:hover, .tut-card:hover, .tut-start:hover { transform: translateY(-2px); }
  .tut-card, .tut-start { transition: transform .15s, box-shadow .15s; }
  .tut-card:hover { box-shadow: 0 10px 0 rgba(0, 0, 0, .07); }
  .tut-group, .tut-start { animation: tut-in .45s ease both; }
  @keyframes tut-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes tut-pop { from { transform: scale(.6) rotate(-12deg); } to { transform: none; } }
}
@media (max-width: 620px) {
  .tut-hero { flex-wrap: wrap; padding: 18px; }
  .tut-hero .btn { width: 100%; justify-content: center; }
  .tut-item { padding: 16px; }
  .tut-title { justify-content: flex-start; text-align: left; }
  .tut-nav { grid-template-columns: 1fr; }
  .tut-hub-hero { padding: 20px; }
  .tut-hero .tut-search { max-width: none; flex-basis: 100%; }
  .tut-hero.tut-hub-hero > div { flex-basis: 100%; }
  .tut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tut-card { min-height: 116px; padding: 14px; }
  .tut-start b { font-size: 1.1rem; }
}
.tu-current { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tu-progress { width: 100%; height: 12px; accent-color: var(--primary); }
.item.tu-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); text-align: left; }
.item.tu-row:last-child { border-bottom: 0; }

/* indique e ganhe */
.ref-hero { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: 8px 26px 26px 8px; background: var(--sun); color: #2e2300; }
.ref-hero h1 { color: inherit; }
.ref-hero p { margin: 4px 0 0; max-width: 60ch; }
.ref-gift { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--primary); font-size: 1.7rem; }
.ref-gift .ic { margin: 0; }
.ref-won { color: var(--ok); background: var(--ok-soft); }
.ref-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ref-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 6px 18px 18px 6px; min-width: 0; }
.ref-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ref-box { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ref-box > .btn { align-self: flex-start; }
.ref-box h2, .ref-renew strong { display: flex; align-items: center; gap: 8px; }
.ref-box p { margin: 0; }
.ref-link { display: flex; gap: 8px; }
.ref-link input { flex: 1; min-width: 0; }
.item.ref-row, .item.ref-admin-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 12px 4px; text-align: left; }
.item.ref-row > div:first-child, .item.ref-admin-row > div:first-child { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.item.ref-due { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto auto; gap: 8px 16px; align-items: center; padding: 12px 4px; text-align: left; }
.ref-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ref-steps { margin: 10px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.ref-rules { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.ref-history summary { cursor: pointer; font-weight: 600; }
.ref-renew { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); }
.ref-renew p { margin: 0; }
@media (max-width: 860px) {
  .ref-tiles, .ref-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ref-grid { grid-template-columns: minmax(0, 1fr); }
  .item.ref-due { grid-template-columns: minmax(0, 1fr); }
  .ref-hero { flex-direction: column; align-items: flex-start; }
}

.ref-tile .lic-tile-top { flex-wrap: wrap; gap: 2px 8px; }
.ref-tile b { overflow-wrap: anywhere; }
.ref-filters .lic-tile { grid-column: auto; }
@media (max-width: 620px) { .ref-tile .lic-tile-top { font-size: 1.05rem; } }

/* multilojas */
.unit-switch { display: flex; flex-direction: column; gap: 3px; font: 500 .78rem/1.3 var(--body); color: var(--band-muted); padding-inline: 2px; }
.unit-switch select { min-height: 36px; padding-block: 4px; font: 600 .9rem var(--body); color: var(--ink); background: var(--surface); }
.unit-band { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.unit-band .linklike { color: inherit; font-weight: 700; }
.ml-now { margin-bottom: 0; }
.ml-alerts { display: flex; flex-direction: column; gap: 10px; }
.ml-alerts h2, .ml-admin h2 { display: flex; align-items: center; gap: 8px; }
.item.ml-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 4px; text-align: left; }
.ml-alert > span:nth-child(2) { flex: 1 1 240px; min-width: 0; }
.ml-pos { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--surface-2); font-size: .78rem; font-weight: 700; }
.ml-rank-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; }
.ml-delta { font-weight: 700; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.ml-delta.up { color: var(--ok); }
.ml-delta.down { color: var(--danger); }
.ml-title { margin-top: 4px; }
.ml-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ml-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ml-card-off { background: var(--surface-2); }
.ml-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ml-card-head > div { min-width: 0; overflow-wrap: anywhere; }
.ml-card-head h3 { font-size: 1.2rem; }
.ml-money { display: flex; align-items: baseline; gap: 10px; }
.ml-money b { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.ml-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding-block: 10px; border-block: 1px solid var(--line); }
.ml-mini div { display: flex; flex-direction: column; min-width: 0; }
.ml-goal { display: flex; flex-direction: column; gap: 4px; }
.ml-today { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); }
.ml-today span { display: inline-flex; align-items: center; gap: 4px; }
.ml-admin-list { display: flex; flex-direction: column; gap: 14px; }
.ml-admin { display: flex; flex-direction: column; gap: 10px; }
.ml-admin p { margin: 2px 0 0; }

/* táxi, hotel e creche */
.day-nav { align-items: center; gap: 6px; }
.day-nav input { width: auto; }
.item.svc-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 14px; padding: 12px 4px; text-align: left; }
.svc-row.is-off { opacity: .6; }
.svc-time { flex: 0 0 62px; font-family: var(--display); font-size: 1.05rem; overflow-wrap: anywhere; }
.svc-main-col { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.svc-main-col .pill { margin-right: 2px; }
.svc-actions { gap: 6px; flex-wrap: wrap; }
.pet-pick { gap: 6px; }
.tx-legs { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 8px 12px; align-items: center; }
.week-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.hotel-scroll { overflow-x: auto; margin-top: 10px; }
.hotel-map { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 760px; font-size: .85rem; }
.hotel-map th { padding: 4px 6px; font-weight: 600; text-align: center; white-space: nowrap; color: var(--muted); }
.hotel-map tbody th { text-align: left; color: var(--ink); position: sticky; left: 0; background: var(--surface); z-index: 1; }
.hotel-map thead th.is-today { color: var(--primary); font-weight: 800; }
.hotel-map td { padding: 0; height: 36px; }
.hotel-cell { display: block; width: 100%; height: 36px; border: 0; border-radius: 6px; padding: 2px 4px; font: 600 .78rem var(--body); cursor: pointer; text-align: left; white-space: nowrap; overflow: visible; }
.hotel-cell.free { background: var(--surface-2); }
.hotel-cell.free:hover { outline: 2px solid var(--primary); }
.hotel-cell:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.hotel-map td.busy.hospedado .hotel-cell { background: var(--agua-bg); color: var(--agua-ink); }
.hotel-map td.busy.reservada .hotel-cell { background: var(--toalha-bg); color: var(--toalha-ink); }
.pre { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; }

.hotel-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.hotel-legend span::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.hotel-legend .hospedado::before { background: var(--agua-bg); }
.hotel-legend .reservada::before { background: var(--toalha-bg); }
.hotel-legend .livre::before { background: var(--surface-2); border: 1px solid var(--line); }
@media (min-width: 821px) and (max-height: 1080px) { .paw-trail { display: none; } }

/* atalhos da venda */
kbd { font: 700 .72rem var(--body); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.pos-kbd { margin-left: 8px; }
.btn.primary .pos-kbd { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); color: inherit; }
.pos-keys { display: flex; flex-wrap: wrap; gap: 6px 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pos-keys span { display: inline-flex; align-items: center; gap: 4px; }
.pos-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.pos-help-row { display: flex; align-items: center; gap: 8px; }
@media (max-width: 820px), (hover: none) { .pos-keys, .pos-kbd { display: none; } }

/* Fiscal */
.fiscal-lines { display: grid; gap: .5rem; margin: .75rem 0; }
.fiscal-line { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: .75rem; align-items: baseline; overflow-wrap: anywhere; }
.fiscal-month { min-width: 9rem; text-align: center; }
.fiscal-row { align-items: center; flex-wrap: wrap; gap: .5rem; }
.fiscal-open { display: grid; gap: .1rem; text-align: left; flex: 1 1 14rem; text-decoration: none; }
.fiscal-alert, .fiscal-warning { border-left: 4px solid var(--warn, #b7791f); }
.fiscal-warning { padding: .5rem .75rem; margin: .75rem 0; }
.fiscal-history { margin-top: .75rem; }
.fiscal-history summary { cursor: pointer; }
.fiscal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.dlg-foot a.btn { text-decoration: none; }
@media (max-width: 560px) { .fiscal-line { grid-template-columns: 1fr; gap: 0; } }

/* Caixa e estoque */
.gestao-table th, .gestao-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.gestao-table th.num, .gestao-table td.num { text-align: right; white-space: nowrap; }
.gestao-table th { font-weight: 600; white-space: nowrap; }
.gestao-table .inv-input { max-width: 7rem; }
.inv-diff { font-weight: 700; color: var(--warn); }
.cash-out-pill { margin-left: .5rem; }
.cash-actions { flex-wrap: wrap; gap: .5rem; }
.es-filtros { flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; align-items: center; }
.es-min { margin-top: .5rem; }
.pos-cash { margin-bottom: 12px; }
.cash-print { font-size: 13px; color: #000; }
.cash-print-line { display: flex; justify-content: space-between; gap: 1rem; padding: 2px 0; }

/* Menu: seções pela rotina da loja */
.side { padding: 14px 10px 12px; gap: 12px; }
.side .nav { flex: 1 1 auto; padding-bottom: 14px; -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent); }
.side .brand-logo { max-height: 58px; width: auto; }
.nav { gap: 0; }
.nav-section { display: flex; flex-direction: column; gap: 1px; padding-bottom: 10px; }
.nav-title { padding: 6px 10px 3px; font-size: .78rem; font-weight: 600; color: var(--band-muted); }
.nav a { min-height: 34px; padding: 6px 10px; font-size: .95rem; line-height: 1.15; }
.nav a.folds::after { content: ''; flex: none; width: 7px; height: 7px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .6; }
.nav a.folds.parent-on::after { transform: rotate(45deg); opacity: 1; }
.nav a.sub { margin-left: 19px; min-height: 30px; padding: 4px 10px; font-size: .88rem; }
.nav a.sub .nav-label .ic { display: none; }
.nav a.sub.locked { justify-content: space-between; }
.nav a.sub.locked .lock-mark .ic { font-size: .85em; }
.nav a.parent-on { background: rgba(255, 255, 255, .08); font-weight: 700; }
.nav a[aria-current="page"].parent-on, .nav a[aria-current="page"] { background: var(--sun); color: #2e2300; font-weight: 700; }
.nav a:focus-visible, .nav summary:focus-visible, .tabbar a:focus-visible, .tabbar button:focus-visible { outline: 2px solid var(--sun); outline-offset: -2px; }
.nav-locked { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 6px; margin-top: 2px; }
.nav-locked summary { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: 10px; cursor: pointer; list-style: none; color: var(--band-muted); font-size: .9rem; }
.nav-locked summary::-webkit-details-marker { display: none; }
.nav-locked summary:hover { background: rgba(255, 255, 255, .08); }
.nav-locked summary > span:first-of-type { flex: 1; }
.nav-locked summary .ic { color: var(--sun); }
.nav-locked-count { min-width: 22px; text-align: center; border-radius: 99px; background: rgba(255, 255, 255, .12); font-size: .78rem; font-weight: 700; color: var(--band-ink); }
.nav-locked a { font-size: .9rem; }
.tabbar { display: none; }
.nav-sheet { display: none; }
@media (max-width: 820px) {
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--band); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: 10px; background: none; color: var(--band-ink); font: inherit; font-size: .72rem; text-decoration: none; cursor: pointer; }
  .tabbar .ic { font-size: 1.25rem; }
  .tabbar a[aria-current="page"], .tabbar button.on { background: var(--sun); color: #2e2300; font-weight: 700; }
  .tab-dot { position: absolute; top: 6px; right: calc(50% - 16px); width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--band); }
  .tab-dot[hidden] { display: none; }
  .nav-sheet[open] { display: block; position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 0; background: var(--band); color: var(--band-ink); overflow-y: auto; }
  .nav-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; background: var(--band); font-size: 1.15rem; }
  .nav-sheet-head .btn { background: rgba(255, 255, 255, .12); color: var(--band-ink); border-color: transparent; font-size: 1.3rem; min-width: 44px; min-height: 44px; }
  .nav-sheet .nav { overflow: visible; }
  .nav-sheet .nav a, .nav-sheet .nav-locked summary { min-height: 46px; font-size: 1rem; }
  .nav-sheet .nav a.sub { display: none; }
  .nav-sheet .nav-title { font-size: .85rem; padding-top: 10px; }
  .nav-sheet .count { margin-left: auto; }
}
@media print { .tabbar, .nav-sheet { display: none !important; } }

.fiscal-items { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.fiscal-item { display: flex; justify-content: space-between; gap: 12px; overflow-wrap: anywhere; }
.fiscal-item .num { white-space: nowrap; }

/* Dog IA */
.dogia-shortcut { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 10px; border-radius: 10px; background: rgba(247, 201, 72, .14); border: 1.5px solid var(--sun); color: var(--band-ink); text-decoration: none; font-family: var(--display); font-weight: 700; }
.dogia-shortcut > span:first-of-type { flex: 1; }
.dogia-shortcut .ic { color: var(--sun); }
.dogia-shortcut:hover { background: rgba(247, 201, 72, .24); }
.dogia-shortcut[aria-current="page"] { background: var(--sun); color: #2e2300; }
.dogia-shortcut[aria-current="page"] .ic { color: #2e2300; }
.dogia-shortcut:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.dogia-shortcut .lock-mark { color: var(--sun); }
.mobile-actions { display: inline-flex; align-items: center; gap: 12px; }
.dogia-mini { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; background: var(--sun); color: #2e2300; font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.dogia-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dogia-head > div:nth-child(2) { flex: 1 1 200px; }
.dogia-logo { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--sun); color: #2e2300; font-size: 1.7rem; flex: none; }
.dogia-meta { flex-wrap: wrap; gap: 6px; }
.dogia-home { padding-bottom: 8px; }
.dogia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.dogia-card { padding: 14px; border-radius: 8px 22px 22px 8px; min-width: 0; }
.dogia-card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 1.12rem; color: inherit; }
.dogia-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--primary); }
.dogia-ic .ic { margin: 0; color: inherit; }
.dogia-list { display: flex; flex-direction: column; gap: 5px; }
.dogia-suggest { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 7px 10px; border: 0; border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: .93rem; line-height: 1.22; text-align: left; cursor: pointer; }
.dogia-suggest:hover { outline: 2px solid var(--primary); outline-offset: -2px; }
.dogia-suggest .ic { flex: none; opacity: .5; }
.dogia-log { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin-inline: auto; width: 100%; }
.dogia-log:empty { display: none; }
.dogia-q { align-self: flex-end; max-width: 78%; padding: 9px 14px; border-radius: 14px 14px 3px 14px; background: var(--primary); color: var(--primary-ink, #fff); overflow-wrap: anywhere; }
.dogia-a { display: flex; gap: 10px; align-items: flex-start; align-self: stretch; min-width: 0; }
.dogia-a > div { flex: 1; min-width: 0; padding: 11px 15px; border: 1px solid var(--line); border-radius: 14px 14px 14px 3px; background: var(--surface); }
.dogia-a.bad > div { border-color: var(--danger); }
.dogia-a.wait > span[role] { padding: 11px 0; color: var(--muted); }
.dogia-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sun); color: #2e2300; }
.dogia-text { display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; line-height: 1.42; }
.dogia-text p, .dogia-text ul, .dogia-text ol { margin: 0; }
.dogia-text ul, .dogia-text ol { padding-left: 1.3em; }
.dogia-source { margin: 8px 0 0; color: var(--muted); font-size: .82rem; }
.dogia-form { position: sticky; bottom: 10px; z-index: 5; display: flex; gap: 8px; align-items: center; max-width: 900px; width: 100%; margin: 14px auto 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 6px 18px rgba(18, 54, 63, .14); }
.dogia-form input { flex: 1; min-width: 0; }
.dogia-mic[aria-pressed="true"] { background: var(--danger); color: #fff; border-color: var(--danger); }
.dogia-note { max-width: 900px; margin: 8px auto 0; text-align: center; }
@media (max-width: 820px) { .dogia-form { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } .dogia-grid { grid-template-columns: minmax(0, 1fr); } .dogia-q { max-width: 90%; } }
.dogia-text th, .dogia-text td { white-space: normal; min-width: 4.5rem; }

/* fiado */
.dlg-body > .table-wrap { flex: none; }
.fd-titles td:last-child { white-space: nowrap; }
@media (max-width: 640px) {
  .fd-list thead, .fd-titles thead, .fp-table thead { display: none; }
  .fd-list tr, .fd-titles tr, .fp-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .gestao-table.fd-list td, .gestao-table.fd-titles td, .gestao-table.fp-table td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; white-space: normal; }
  .fd-list td::before, .fd-titles td::before, .fp-table td::before { content: attr(data-label); color: var(--muted); font-size: .875rem; text-align: left; flex: none; }
  .fd-items { text-align: right; }
}
.fp-actions .row { justify-content: flex-end; flex-wrap: wrap; }
.fd-box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.fd-warn { color: var(--danger, #b3261e); font-weight: 600; margin: 0; }
.fd-preview { margin: 0; }
.fd-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.fd-tools input { flex: 0 1 260px; min-width: 0; }
.fd-items { display: block; }
.fd-late { margin-left: 6px; }
.fd-overdue { color: var(--danger, #b3261e); font-weight: 600; }
.fd-reversed td { opacity: .65; }
.fd-receive { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; }
.fd-receive h3 { margin: 0; }
.fd-receive .btn { align-self: flex-start; }
.fd-limit { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fd-limit .field { flex: 1 1 200px; }
.debtors .head { margin: 0 0 8px; }
.debtors h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.debtors-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.debtors-totals { display: grid; gap: 12px; }
.debtors-list { list-style: none; margin: 0; padding: 0; }
.debtors-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.debtors-list li:last-child { border-bottom: 0; }
.debtors-list .linklike { text-align: left; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .debtors-body { grid-template-columns: minmax(0, 1fr); }
  .debtors-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .debtors-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .debtors-list li > span { grid-row: 2; grid-column: 1; }
  .debtors-list li > b { grid-row: 1 / span 2; grid-column: 2; }
}
.promissory-sheet { display: flex; flex-direction: column; gap: 24px; background: #fff; color: #000; }
.promissory { box-sizing: border-box; width: 100%; border: 1px solid #000; padding: 16px; font: 400 13px/1.45 var(--body); background: #fff; color: #000; break-inside: avoid; page-break-inside: avoid; }
.pn-head { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.pn-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 8px 0; }
.promissory p { margin: 8px 0; }
.pn-sign { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.pn-sign > div { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.pn-sign > div:first-child { flex-direction: column; gap: 2px; }
.pn-line { display: block; border-top: 1px solid #000; max-width: 340px; }
@media print { .promissory-sheet { padding: 0 8mm; gap: 16px; } }

/* NF-e */
.nav a.sub.deep { margin-left: 34px; }
.pos-finish-nfe { flex: 1 1 auto; }
.cce-print { margin: 0 auto; max-width: 720px; }
.fiscal-item .row { flex: none; }
@media (max-width: 640px) { .nfe-grid { grid-template-columns: minmax(0, 1fr); } }

/* Nota de devolução */
.dev-items { display: flex; flex-direction: column; gap: 8px; flex: none; }
.dev-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.dev-field { display: flex; flex-direction: column; gap: 2px; }
.dev-item > div:first-child { min-width: 120px; }
.dev-item > div:first-child b { display: block; }
.dev-item input.dev-qty { width: 76px; }
.dev-item input.dev-price { width: 96px; }
@media (max-width: 640px) { .dev-item { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dev-item input.dev-qty, .dev-item input.dev-price { width: 100%; } .dev-item > div:first-child { grid-column: 1 / -1; } }
.fd-auto { margin-top: 12px; }

/* CRM */
.crm-task { align-items: flex-start; gap: 12px; }
.crm-task-head { gap: 6px; margin-bottom: 4px; }
.crm-task-actions { flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.crm-open { text-align: left; }
.crm-tags { flex-wrap: wrap; gap: 4px; }
.crm-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 12px 0 4px; }
.crm-block { flex: none; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
.crm-block h3 { margin: 0 0 6px; }
.crm-block p { margin: 2px 0; }
.crm-mini { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.crm-note { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 8px; }
.crm-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.crm-timeline li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
.crm-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); }
.crm-line { display: flex; justify-content: space-between; gap: 8px; }
.block { display: block; }
@media (max-width: 640px) {
  .crm-task { flex-direction: column; }
  .crm-task-actions { justify-content: flex-start; }
  .crm-filters { grid-template-columns: minmax(0, 1fr); }
  .crm-note { grid-template-columns: minmax(0, 1fr); }
  .crm-list thead { display: none; }
  .crm-list tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .gestao-table.crm-list td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; white-space: normal; }
  .crm-list td::before { content: attr(data-label); color: var(--muted); font-size: .875rem; text-align: left; flex: none; }
  .crm-list .crm-tags { justify-content: flex-end; }
}
dialog.crm-dialog { width: min(760px, calc(100vw - 24px)); max-width: 760px; }
.app-version { display: block; font-size: .75rem; opacity: .7; }
.auth-card .app-version, .login .app-version { text-align: center; color: var(--muted); }

/* Notas de compra */
.ent-opts { flex-wrap: wrap; gap: 8px 24px; }
.ent-items { display: flex; flex-direction: column; gap: 10px; flex: none; }
.ent-item { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.ent-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ent-item-head .pill { flex: none; }
.ent-item-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; }
.ent-create { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ent-fator-box { max-width: 22rem; }
.ent-fator-box[hidden], .ent-sugestao[hidden], .ent-modo[hidden] { display: none; }
.ent-modo { flex-wrap: wrap; }
.ent-result { margin: 0; font-weight: 600; }
.ent-sugestao { margin: 0; padding: .5rem .75rem; border-radius: 10px; background: var(--surface-2, #eef6f8); }
.ent-create[hidden], .ent-item .check[hidden] { display: none; }
@media (max-width: 640px) { .ent-item-body, .ent-create { grid-template-columns: minmax(0, 1fr); } .ent-item-head { flex-direction: column; } }
/* importação de outro sistema */
.import-hint { margin-top: 1.5rem; text-align: center; }
.imp-col { gap: .25rem; min-width: 0; }
.imp-amostra { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-resumo { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.imp-resumo b { font-size: 1.15em; }
.imp-lista summary { cursor: pointer; font-weight: 600; }
.imp-lista ul { max-height: 14rem; overflow: auto; margin: .5rem 0 0; padding-left: 1.2rem; }
/* avisos das etapas e vacinas */
.stage-msg { padding: .75rem 0; border-top: 1px solid var(--line, #d9e6e9); gap: .5rem; }
.stage-msg textarea:disabled { opacity: .55; }
.item.vac-row { flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; }
.item.vac-row > div:first-child { flex: 1 1 16rem; min-width: 0; }
.vac-row .svc-actions { flex-wrap: wrap; }
.vac-pick { max-height: 50vh; overflow: auto; }
.vac-pet { display: inline-flex; align-items: center; gap: .4rem; text-align: left; }
/* impressão do cupom fiscal */
.pdf-print { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cp-papel { --papel: 80; --esq: 4; --dir: 4; position: relative; width: calc(var(--papel) * 2.6px); height: 210px; margin-inline: auto; padding: 14px calc(var(--dir) * 2.6px) 14px calc(var(--esq) * 2.6px); box-sizing: border-box; background: repeating-linear-gradient(45deg, #e6eef0 0 6px, #f4f8f9 6px 12px); border: 1px solid var(--line); border-radius: 4px 4px 0 0; transition: width .2s ease, padding .2s ease; }
.cp-area { height: 100%; display: flex; align-items: center; justify-content: center; background: #ffffff; border: 1.5px dashed #0b6680; color: #0b6680; font-size: .8rem; font-weight: 600; text-align: center; }
.cp-legenda { margin: 8px 0 0; text-align: center; }
.cp-dica { margin-top: 14px; }
.cp-dica summary { cursor: pointer; font-weight: 600; }
.cp-dica p { margin: 8px 0 0; max-width: 75ch; }
@media (max-width: 760px) { .cp-grid { grid-template-columns: minmax(0, 1fr); } }
/* produtos: tabela com filtros */
.bad-text { color: var(--bad, #b42318); font-weight: 600; }
.prod-painel { display: flex; flex-direction: column; gap: 12px; }
.prod-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prod-busca { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
.prod-busca > svg.ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; z-index: 1; }
.prod-busca input[type=search] { width: 100%; padding-left: 40px; }
.prod-linha { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.prod-conta { margin: 0; }
.prod-tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.prod-tabela { width: 100%; min-width: 1000px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.prod-tabela .c-id { width: 86px; } .prod-tabela .c-ean { width: 128px; } .prod-tabela .c-marca { width: 104px; } .prod-tabela .c-cat { width: 112px; }
.prod-tabela .c-est { width: 78px; } .prod-tabela .c-custo { width: 98px; } .prod-tabela .c-venda { width: 104px; } .prod-tabela .c-margem { width: 80px; } .prod-tabela .c-acoes { width: 150px; }
.prod-tabela td { overflow-wrap: anywhere; }
.prod-tabela thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2, #f1f6f7); text-align: left; padding: 0; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.prod-tabela th.n, .prod-tabela td.n { text-align: right; }
.prod-ordem { display: inline-flex; align-items: flex-end; gap: 4px; width: 100%; padding: 10px 10px 6px; text-align: left; line-height: 1.15; background: none; border: 0; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; justify-content: inherit; }
.prod-tabela th.n .prod-ordem { justify-content: flex-end; }
.prod-ordem:hover { color: var(--primary); }
.prod-ordem:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; border-radius: 8px; }
.prod-seta { font-size: .7rem; color: var(--primary); min-width: .8em; }
.prod-filtros td { padding: 0 6px 8px; background: var(--surface-2, #f1f6f7); border-bottom: 1px solid var(--line); }
.prod-filtros input { width: 100%; min-width: 0; min-height: 34px; padding: 5px 8px; font-size: .85rem; }
.prod-filtros td.n input { text-align: right; }
.prod-filtros input.invalido { border-color: var(--bad, #b42318); }
.prod-tabela tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.prod-tabela tbody tr { cursor: pointer; }
.prod-tabela tbody tr:hover td { background: var(--surface-2, #f4f9fa); }
.prod-tabela tbody tr.inativo td { opacity: .6; }
.prod-tabela tbody tr.prod-vazio { cursor: default; }
.prod-tabela tbody tr.prod-vazio:hover td { background: none; }
.prod-id { color: var(--muted); font-variant-numeric: tabular-nums; }
.prod-ean { font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod-ean { overflow-wrap: normal; font-size: .86rem; }
.prod-nome { display: flex; align-items: center; gap: 10px; }
.prod-foto { flex: none; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.prod-foto.vazia { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2, #eef4f6); color: var(--primary); }
.prod-nome > div { min-width: 0; }
.prod-link { text-align: left; font-weight: 600; color: var(--ink); text-decoration: none; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.prod-link:hover { text-decoration: underline; color: var(--primary); }
.prod-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.prod-tags:empty { display: none; }
.prod-acoes { white-space: nowrap; text-align: right; }
.prod-acoes .btn { margin-left: 8px; }
.prod-rodape { justify-content: center; }
.prod-rodape .btn[hidden] { display: none; }
.cli-tabela { min-width: 1120px; }
.cli-tabela .c-id { width: 86px; } .cli-tabela .c-tel { width: 138px; } .cli-tabela .c-pets { width: 170px; } .cli-tabela .c-visitas { width: 74px; }
.cli-tabela .c-ultima { width: 108px; } .cli-tabela .c-proxima { width: 104px; } .cli-tabela .c-gasto { width: 104px; } .cli-tabela .c-fiado { width: 92px; } .cli-tabela .c-acoes { width: 120px; }
.cli-tel { white-space: nowrap; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.cli-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); font-weight: 800; }
.cli-pets .pet-chips { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.btn.icon-only { padding-inline: 9px; }
.btn.icon-only .ic { margin: 0; }
@media (max-width: 760px) {
  .prod-tabela-wrap { border: 0; overflow: visible; }
  .prod-tabela { min-width: 0; }
  .prod-tabela thead { display: none; }
  .prod-tabela, .prod-tabela tbody, .prod-tabela tr, .prod-tabela td { display: block; }
  .prod-tabela tbody tr { display: flex; flex-direction: column; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; }
  .prod-tabela tbody td.prod-desc { order: -1; padding-bottom: 8px; }
  .prod-tabela tbody td.prod-id { display: none; }
  .prod-tabela tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; text-align: right; }
  .prod-tabela tbody td::before { content: attr(data-label); color: var(--muted); font-size: .85rem; text-align: left; }
  .prod-tabela tbody td.prod-desc { display: block; text-align: left; }
  .prod-tabela tbody td.prod-desc::before, .prod-tabela tbody td.prod-acoes::before { content: none; }
  .prod-tabela tbody td.prod-acoes { justify-content: space-between; padding-top: 8px; }
  .prod-tabela tbody tr.prod-vazio { border: 0; }
}

/* assinatura pelo site */
.bill-panel { display: flex; flex-direction: column; gap: 14px; }
.bill-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bill-head h2 { margin: 2px 0 0; }
.bill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.bill-grid > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.bill-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.bill-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.bill-plan:hover { border-color: var(--primary); }
.bill-plan span { font-weight: 700; color: var(--primary); }
.bill-plan small { color: var(--muted); }
.bill-cancel { display: flex; justify-content: flex-end; }
.danger-link { color: var(--danger); background: transparent; border-color: transparent; }
.danger-link:hover { border-color: var(--danger); }
.btn.wide { width: 100%; justify-content: center; margin-bottom: 8px; }

.as-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.as-steps code { padding: 2px 8px; border-radius: 6px; background: var(--neutral-soft); overflow-wrap: anywhere; }
.as-token-row { display: flex; align-items: center; gap: 10px; }
.as-token-row .field { flex: 1; }

/* ---------- PDV: tela cheia, menu recolhido e catálogo por departamento ---------- */
.pos-top { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 8px 12px; }
.pos-top-brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: 6px; flex: none; }
.pos-logo { height: 40px; width: auto; }
.pos-top-brand b { display: block; font-family: var(--display); font-size: 1.2rem; line-height: 1; }
.pos-top-brand small { display: block; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.pos-menu { display: none; padding-inline: 9px; }
.pos-menu .ic { margin: 0; }
.pos-tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.pos-tabs > button, .pos-tabs > a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; text-decoration: none; }
.pos-tabs > button:hover, .pos-tabs > a:hover { background: var(--neutral-soft); }
.pos-tabs > button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.pos-top-info { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.pos-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; text-decoration: none; padding: 5px 10px; border-radius: 999px; }
.pos-status.ok { background: var(--ok-soft); color: var(--ok); }
.pos-status.bad { background: var(--danger-soft, #fde8e8); color: var(--danger); }
.pos-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pos-user { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 600; font-size: .9rem; }
.pos-clock { font-family: var(--display); font-weight: 700; font-size: 1.25rem; }
.pos-full .ic { margin: 0; }

.pos { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 14px; }
.pos-catalog { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pos-search-row { display: flex; gap: 8px; align-items: center; }
.pos-search { position: relative; flex: 1; display: flex; align-items: center; }
.pos-search > svg.ic { position: absolute; left: 14px; color: var(--muted); pointer-events: none; z-index: 1; width: 1.3em; height: 1.3em; }
.pos-search input[type=search] { width: 100%; min-height: 50px; padding-left: 46px; font-size: 1.08rem; border-radius: 14px; }
.pos-viewmode { display: flex; gap: 4px; }
.pos-viewmode .btn { padding-inline: 10px; min-height: 44px; }
.pos-viewmode .btn .ic { margin: 0; }
.pos-viewmode .btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.pos-depts { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.pos-dept { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pos-dept small { font-weight: 700; font-size: .75rem; color: var(--muted); background: var(--neutral-soft); border-radius: 999px; padding: 1px 7px; }
.pos-dept:hover { border-color: var(--primary); }
.pos-dept[aria-selected="true"] { background: var(--band); color: var(--band-ink); border-color: var(--band); }
.pos-dept[aria-selected="true"] small { background: var(--sun); color: var(--sun-ink); }

.pos-products { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; align-content: start; }
.pos-product { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 2px 10px; align-items: start; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); min-height: 112px; transition: border-color .12s, transform .12s, box-shadow .12s; }
.pos-product:hover { border-color: var(--primary); box-shadow: 0 6px 16px -10px rgba(15, 70, 85, .5); }
.pos-product:active { transform: scale(.98); }
.pos-product.out { opacity: .6; }
.pos-thumb { grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--neutral-soft); }
.pos-thumb.no-photo { display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: hsl(var(--h, 190) 45% 28%); background: hsl(var(--h, 190) 60% 90%); }
.pos-pname { font-weight: 700; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pos-pmeta { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-pfoot { grid-column: 1 / -1; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.pos-price-tag { font-family: var(--display); font-size: 1.15rem; color: var(--primary); margin-right: auto; }
.pos-stock { font-size: .74rem; font-weight: 700; color: var(--muted); background: var(--neutral-soft); border-radius: 999px; padding: 2px 8px; }
.pos-stock.low { background: var(--warn-soft); color: var(--warn); }
.pos-stock.zero { background: var(--danger-soft, #fde8e8); color: var(--danger); }
.pos-incart { position: absolute; top: -8px; right: -8px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--sun); color: var(--sun-ink); font-weight: 800; font-size: .85rem; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.pos-product.added { animation: pos-pop .35s ease; }
@keyframes pos-pop { 40% { transform: scale(.96); border-color: var(--sun); box-shadow: 0 0 0 4px var(--sun); } }
.pos-products.as-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pos-products.as-list .pos-product { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; min-height: 0; padding: 8px 12px; }
.pos-products.as-list .pos-thumb { width: 40px; height: 40px; border-radius: 10px; font-size: .9rem; }
.pos-products.as-list .pos-pname { -webkit-line-clamp: 1; }
.pos-products.as-list .pos-pfoot { grid-column: 3; grid-row: 1 / 3; margin: 0; justify-content: flex-end; flex-wrap: nowrap; }
.pos-products.as-list .pos-price-tag { margin-right: 0; order: 9; min-width: 92px; text-align: right; }
.pos-empty { grid-column: 1 / -1; padding: 30px 0; }
.pos-more { grid-column: 1 / -1; justify-self: center; }

.pos-cart-head h2 .ic { color: var(--primary); }
.pos-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--muted); padding: 30px 10px; min-height: 160px; }
.pos-cart-empty .ic { width: 42px; height: 42px; stroke-width: 1.5; opacity: .6; }
.pos-cart-empty b { color: var(--ink); }
.pos-line.just-added { animation: pos-line-in .45s ease; }
@keyframes pos-line-in { from { background: var(--sun-soft, #fff6d6); } to { background: transparent; } }
.pos-subtotals { display: flex; flex-direction: column; gap: 6px; }
.pos-subline { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); }
.pos-discount input { width: 110px; text-align: right; min-height: 36px; padding: 4px 10px; }
.pos-pay-field > span { font-weight: 600; }
.pos-pay { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.pos-pay > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; text-align: center; line-height: 1.15; }
.pos-pay > button .ic { width: 1.35em; height: 1.35em; color: var(--primary); }
.pos-pay > button:hover { border-color: var(--primary); }
.pos-pay > button[aria-checked="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.pos-pay > button[aria-checked="true"] .ic { color: inherit; }
.pos-cash-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; background: var(--ok-soft); border-radius: 12px; padding: 10px 12px; }
.pos-cash-row > div { text-align: right; display: flex; flex-direction: column; }
.pos-change { font-family: var(--display); font-size: 1.4rem; }
.pos-sum b { font-size: 2rem; }
.pos-finish { min-height: 54px; font-size: 1.1rem; }

/* Modo PDV no computador: o menu vira uma faixa de ícones e abre ao passar o mouse. */
@media (min-width: 821px) {
  .shell.pdv-mode { grid-template-columns: 72px minmax(0, 1fr); }
  .shell.pdv-mode .side { width: 72px; padding-inline: 10px; overflow: hidden; z-index: 40; transition: width .18s ease .12s, box-shadow .18s; }
  .shell.pdv-mode .side:hover, .shell.pdv-mode .side:focus-within, .shell.pdv-mode.side-open .side { width: 236px; overflow-y: auto; box-shadow: 18px 0 40px -18px rgba(0, 0, 0, .45); }
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .nav-title,
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .long,
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .short,
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .brand small,
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .brand .unit-switch,
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .side-foot,
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .nav-locked,
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .nav a.sub,
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .dogia-shortcut > span,
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .dogia-shortcut > svg:last-child,
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .nav a > :not(.nav-label) { display: none; }
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .brand { padding: 0; justify-content: center; }
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .brand-logo { width: 46px; height: 46px; max-height: none; object-fit: cover; object-position: 8% 50%; }
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .nav a { justify-content: center; padding-inline: 0; }
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .nav-label .ic { width: 1.35em; height: 1.35em; }
  .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .dogia-shortcut { justify-content: center; padding-inline: 0; }
  .shell.pdv-mode .main { height: 100dvh; overflow: hidden; padding: 12px 16px; gap: 12px; }
  .shell.pdv-mode .main > .pos { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .shell.pdv-mode .pos-catalog { min-height: 0; }
  .shell.pdv-mode .pos-products { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 8px 2px; margin: -8px -8px -8px -2px; }
  .shell.pdv-mode .pos-cart { position: static; max-height: none; height: 100%; min-height: 0; }
  .shell.pdv-mode .main > .pos-cash { margin: 0; }
  .shell.pdv-mode .pos-menu { display: inline-flex; }
}
body:has(.shell.pdv-mode) .wa-float { display: none; }
@media (max-width: 820px) {
  .pos-top { padding: 8px 10px; }
  .pos-top-info .pos-user, .pos-full span { display: none; }
  .pos-logo { height: 32px; }
  .pos { grid-template-columns: minmax(0, 1fr); }
  .pos-products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .pos-product.added, .pos-line.just-added { animation: none; } .shell.pdv-mode .side { transition: none; } }

/* PDV: ajustes finos */
.pos-top { flex-wrap: nowrap; }
.pos-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.pos-tabs::-webkit-scrollbar { display: none; }
.pos-tabs > button, .pos-tabs > a { white-space: nowrap; flex: none; }
.pos-top-info { flex: none; }
.pos-cash { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: .92rem; margin: 0; }
.pos-cash b { color: var(--ink); }
.pos-cash .btn { margin-left: auto; }
.pos-pay { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pos-pay > button { flex-direction: row; min-height: 42px; gap: 6px; padding: 6px 8px; font-size: .84rem; }
.pos-pay > button .ic { width: 1.15em; height: 1.15em; flex: none; }
.pos-pay > button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-cash-row { padding: 8px 12px; }
.pos-cash-row .field input { min-height: 38px; }
.pos-foot { gap: 10px; }
.pos-keys-all { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--primary); font-weight: 600; }
.shell.pdv-mode .pos-keys > span { display: none; }
.shell.pdv-mode .pos-keys { border-top: 0; padding-top: 0; justify-content: center; }
.pos-stock { white-space: nowrap; }
.shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .nav-label > .ic ~ .ic, .shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .nav a > .ic:last-child:not(:first-child) { display: none; }
@media (max-width: 820px) {
  .pos-top { flex-wrap: wrap; }
  .pos-tabs { order: 3; flex-basis: 100%; }
  .pos-products.as-list .pos-product { grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .pos-products.as-list .pos-pname { -webkit-line-clamp: 2; }
  .pos-products.as-list .pos-pfoot { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; flex-wrap: wrap; margin-top: 4px; }
  .pos-products.as-list .pos-price-tag { margin-right: auto; order: 0; text-align: left; min-width: 0; }
}
.shell.pdv-mode:not(.side-open) .side:not(:hover):not(:focus-within) .nav a.folds::after { display: none; }
.pos-more-actions { gap: 6px; flex-wrap: nowrap; }
.pos-more-actions:empty { display: none; }
.pos-more-actions .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.pos-more-actions .pos-clear { flex: 0 1 auto; margin-left: auto; color: var(--danger); }
.pos-more-actions .pos-clear .ic { margin: 0; }
.pos-finish { width: 100%; }
.shell.pdv-mode .pos-items { min-height: 120px; }
.pos-products { grid-auto-rows: max-content; }
.pos-search-row, .pos-depts, .pos-cart-head, .pos-foot { flex: none; }
.pos-more-actions { flex-wrap: wrap; }
.pos-more-actions .pos-kbd { display: inline-block; }
.pos-help-btn { padding-inline: 9px; }
.pos-help-btn .ic { margin: 0; }
.shell.pdv-mode .pos-keys { display: none; }
.shell.pdv-mode .pos-client .field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.shell.pdv-mode .pos-cart-head { gap: 8px; }
.pos-subtotals { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
.pos-subline { gap: 8px; }
@media (max-width: 820px), (hover: none) { .pos-help-btn { display: none; } }

/* NCM: busca com lista */
.ncm-pick { position: relative; display: flex; flex-direction: column; gap: 4px; }
.ncm-list { position: absolute; z-index: 20; top: 44px; left: 0; width: max(100%, min(480px, 82vw)); margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35); }
.ncm-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; line-height: 1.3; font-size: .9rem; }
.ncm-list li:hover, .ncm-list li[aria-selected="true"] { background: var(--neutral-soft); }
.ncm-list li b { color: var(--primary); }
.ncm-list li small { display: block; color: var(--muted); margin-top: 2px; }
.ncm-chosen { display: flex; gap: 6px; align-items: flex-start; margin: 0; line-height: 1.35; }
.ncm-chosen:empty { display: none; }
.ncm-chosen .ic { flex: none; margin-top: 2px; }
.ncm-chosen.ok .ic { color: var(--ok); }
.ncm-chosen.warn { color: var(--warn); }
.ncm-suggest { align-self: flex-start; text-align: left; color: var(--primary); }

/* alterações em lote */
.lote-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 16px; align-items: start; }
.lote-step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: .95rem; }
.lote-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.lote-tools .prod-busca { flex: 1 1 240px; }
.lote-tools select { flex: 0 1 220px; }
.lote-sel { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; margin: 0; }
.lote-table { max-height: 62vh; overflow: auto; }
.lote-table .prod-tabela { min-width: 0; table-layout: auto; }
.lote-table th, .lote-table td { padding: 8px 10px; }
.lote-table tbody tr.on td { background: var(--agua-bg, #e8f5f8); }
.lote-check { width: 40px; text-align: center; }
.lote-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.lote-right { position: sticky; top: 12px; max-height: calc(100dvh - 24px); overflow-y: auto; }
.lote-group { display: flex; flex-direction: column; gap: 6px; }
.lote-group h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 6px; }
.lote-opt { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; transition: border-color .12s, background .12s; }
.lote-opt.on { border-color: var(--primary); background: var(--surface-2, #f4f9fa); }
.lote-opt-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.lote-opt-head input { width: 18px; height: 18px; accent-color: var(--primary); }
.lote-ctl { display: flex; flex-wrap: wrap; gap: 6px; }
.lote-ctl > * { flex: 1 1 140px; min-width: 0; }
.lote-ctl .ncm-pick { flex-basis: 100%; }
.lote-opt:not(.on) .lote-ctl, .lote-opt:not(.on) .hint { display: none; }
.lote-foot { position: sticky; bottom: -14px; background: var(--surface); padding: 10px 0 2px; }
.lote-go { width: 100%; justify-content: center; min-height: 48px; }
.lote-sum { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.lote-prev { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow-y: auto; }
.lote-prev-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.lote-prev-item.err { border-color: var(--danger); }
.lote-prev-item ul { margin: 4px 0 0; padding-left: 18px; font-size: .9rem; }
.lote-prev-item s { color: var(--muted); }
@media (max-width: 980px) { .lote-grid { grid-template-columns: minmax(0, 1fr); } .lote-right { position: static; max-height: none; } }
.lote-table th.n { padding-right: 18px; }
.lote-table td.n { padding-right: 18px; white-space: nowrap; }
.lote-ctl > select:first-child { flex-basis: 100%; }
.lote-right { padding-bottom: 0; }
.lote-foot { margin-top: 6px; }

/* Relatórios em grupos */
.rel-index { margin: 4px 0 18px; }
.rel-index .chip .ic { margin-right: 4px; }
.rel-group { margin-top: 22px; }
.rel-group:first-of-type { margin-top: 6px; }
.rel-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.rel-group-head > div { flex: 1; min-width: 0; }
.rel-group-head h2 { margin: 0; font-size: 1.2rem; }
.rel-group-head h2 a { color: inherit; text-decoration: none; }
.rel-group-head h2 a:hover { text-decoration: underline; }
.rel-group-head p { margin: 2px 0 0; font-size: .9rem; }
.rel-group-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.15rem; }
.rel-group-ic .ic { margin: 0; }
.rel-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rel-cards .hub-card strong { font-size: 1.12rem; }
.rel-crumb { margin: 0 0 2px; font-size: .88rem; }
.rel-crumb a { color: var(--primary); }
@media (max-width: 480px) { .rel-group-head .pill { display: none; } }
@media (max-width: 820px) { .rel-index { display: none; } }

/* NF-e: lupa do destinatário */
.nfe-doc-box { display: flex; gap: 6px; align-items: stretch; }
.nfe-doc-box input { flex: 1; min-width: 0; }
.nfe-look { flex: none; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; border-color: var(--primary); }
.nfe-look:hover, .nfe-look:focus, .nfe-look:focus-visible, .nfe-look:active { background: var(--primary); color: #fff; border-color: var(--primary); filter: brightness(1.08); }
.nfe-look:disabled { opacity: .7; }
.nfe-look .ic { margin: 0; }
.nfe-look.busy .ic { animation: nfe-pulse .8s ease-in-out infinite alternate; }
@keyframes nfe-pulse { from { opacity: .35; } to { opacity: 1; } }
.nfe-look-note { margin: 2px 0 8px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2, #eef6f7); }
.nfe-look-note.ok { background: var(--folha-bg); color: var(--folha-ink); }
.nfe-look-note.warn { background: var(--toalha-bg); color: var(--toalha-ink); }
.nfe-look-note.bad { background: var(--rosa-bg); color: var(--rosa-ink); }
.nfe-picks { display: grid; gap: 6px; margin: 0 0 10px; }
.nfe-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.nfe-pick:hover { border-color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .nfe-look.busy .ic { animation: none; } }


/* ---------- CRM: carteira de clientes ---------- */
.p-lilas { --pb: var(--lilas-bg); --pi: var(--lilas-ink); --pc: #7c5ce0; }
.p-folha { --pb: var(--folha-bg); --pi: var(--folha-ink); --pc: #2f9a45; }
.p-agua { --pb: var(--agua-bg); --pi: var(--agua-ink); --pc: #2a8fb0; }
.p-neutro { --pb: var(--surface-2); --pi: var(--muted); --pc: #8a9ba1; }
.p-toalha { --pb: var(--toalha-bg); --pi: var(--toalha-ink); --pc: #e09a1f; }
.p-rosa { --pb: var(--rosa-bg); --pi: var(--rosa-ink); --pc: #d9466f; }
.crm-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.crm-sec-head h2 { margin: 0; font-size: 1.15rem; }

/* faixa de destaque: cores da marca DogSync (azul-petróleo do menu + amarelo das patinhas) */
.crm-band { --brand-deep: #0f4655; --brand: #0b6680; --brand-sun: #f7c948; --brand-sun-ink: #3d2e00;
  position: relative; overflow: hidden; margin-bottom: 14px; padding: 20px 22px 22px; border-radius: 22px 22px 22px 6px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #13708a 0%, transparent 55%), linear-gradient(115deg, var(--brand-deep) 0%, #0d5568 60%, var(--brand) 100%); }
.crm-band::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--brand-sun) 0 38%, rgba(247, 201, 72, .35) 38% 100%); }
.crm-band::after { content: ''; position: absolute; right: -50px; top: -70px; width: 240px; height: 240px; border-radius: 50%; border: 26px solid rgba(247, 201, 72, .12); pointer-events: none; }
.crm-band-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.crm-band-kicker { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 99px; background: var(--brand-sun); color: var(--brand-sun-ink); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.crm-band-kicker .ic { margin: 0; }
.crm-band h1 { margin: 8px 0 2px; font-size: 1.9rem; color: #fff; }
.crm-band p { margin: 0; color: rgba(255, 255, 255, .85); }
.crm-band-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-band-field { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 12px; background: rgba(255, 255, 255, .12); font-size: .88rem; white-space: nowrap; }
.crm-band-field select { min-width: 104px; border: 0; background-color: #fff; color: #10323c; }
.crm-band-btn { background: #fff; color: var(--brand-deep); border-color: transparent; font-weight: 700; }
.crm-band-btn:hover { background: var(--brand-sun); color: var(--brand-sun-ink); }
.crm-band-btn.sun { background: var(--brand-sun); color: var(--brand-sun-ink); }
.crm-band-btn.danger { background: rgba(255, 255, 255, .1); color: #ffd4cf; border-color: rgba(255, 212, 207, .5); }
.crm-band-btn.danger:hover { background: #b3261e; color: #fff; }
.band-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .12); font-size: .84rem; font-weight: 700; white-space: nowrap; }
.band-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #9fb6bd; }
.band-status.ok::before { background: #5fe08a; box-shadow: 0 0 0 3px rgba(95, 224, 138, .25); }
.band-status.warn::before { background: var(--brand-sun); }
.band-status.bad::before { background: #ff7b6e; }
.band-tabs { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.band-tabs button { border: 0; background: none; color: rgba(255, 255, 255, .8); font: inherit; font-weight: 700; padding: 6px 14px; border-radius: 9px; cursor: pointer; }
.band-tabs button[aria-pressed="true"] { background: var(--brand-sun); color: var(--brand-sun-ink); }
.crm-band-nums { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 18px; }
.crm-big { display: flex; flex-direction: column; gap: 2px; min-width: 140px; flex: 1 1 140px; padding: 10px 14px; border-radius: 14px; text-align: left; font: inherit; color: #fff; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); border-top: 3px solid rgba(247, 201, 72, .55); }
button.crm-big { cursor: pointer; }
button.crm-big:hover, .crm-big[aria-pressed="true"] { background: rgba(255, 255, 255, .17); border-top-color: var(--brand-sun); }
.crm-big strong { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.crm-big span { font-size: .84rem; color: rgba(255, 255, 255, .82); }
.crm-big.hot { border-top-color: #ff7b6e; }
.crm-big.hot strong { color: #ffc1ba; }
.crm-big.good strong { color: #a8f0bf; }
.crm-band-spark { flex: 1.4 1 240px; display: flex; flex-direction: column; gap: 2px; padding: 8px 14px 6px; border-radius: 14px; background: rgba(0, 0, 0, .16); }
.crm-band-spark > span { font-size: .8rem; color: rgba(255, 255, 255, .85); }
.crm-spark { width: 100%; height: 56px; display: block; }
.crm-spark .area { fill: rgba(247, 201, 72, .16); }
.crm-spark .line { fill: none; stroke: #f7c948; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.crm-spark .dot { fill: #f7c948; }
.crm-spark-ends { display: flex; justify-content: space-between; font-size: .72rem; color: rgba(255, 255, 255, .7); }
.band-note { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 9px 12px; border-radius: 12px; background: rgba(0, 0, 0, .18); font-size: .9rem; }
.band-note { border-left: 4px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .22); }
.band-note.warn { border-left-color: #f7c948; }
.band-note.bad { border-left-color: #ff7b6e; background: rgba(60, 10, 10, .28); }
.band-note .btn { background: #fff; color: #0f4655; border-color: transparent; }

/* mapa da carteira */
.crm-map { margin-bottom: 14px; }
.crm-map-bar { display: flex; height: 38px; border-radius: 12px; overflow: hidden; gap: 3px; background: var(--line); }
.crm-map-seg { flex: 0 0 var(--w); min-width: 10px; border: 0; padding: 0; cursor: pointer; background: var(--pc); color: #fff; font: inherit; font-weight: 800; transition: filter .12s ease; }
.crm-map-seg:hover { filter: brightness(1.1); }
.crm-map-seg[aria-pressed="true"] { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85); }
.crm-map-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; }
.crm-legend { display: flex; align-items: flex-start; gap: 10px; padding: 10px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--pc); border-radius: 10px; cursor: pointer; }
.crm-legend:hover, .crm-legend[aria-pressed="true"] { background: var(--pb); color: var(--pi); }
.crm-legend.empty { opacity: .55; }
.crm-legend-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pb); color: var(--pi); }
.crm-legend-ic .ic { margin: 0; }
.crm-legend-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.crm-legend-n { display: inline-block; min-width: 22px; padding: 0 6px; margin-left: 2px; border-radius: 99px; background: var(--pc); color: #fff; font-size: .78rem; text-align: center; }
.crm-legend-v { font-weight: 700; }

/* ritmo + o que fazer */
.crm-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.crm-duo > .panel { margin: 0; }
.crm-rhythm-rows { display: flex; flex-direction: column; gap: 6px; }
.crm-rrow { display: grid; grid-template-columns: 104px minmax(0, 1fr) 36px; align-items: center; gap: 10px; padding: 5px 6px; font: inherit; color: var(--ink); text-align: left; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.crm-rrow:hover, .crm-rrow[aria-pressed="true"] { background: var(--surface-2); }
.crm-rrow-l { font-size: .88rem; }
.crm-rrow-track { height: 14px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 6px, transparent 6px 8px); overflow: hidden; }
.crm-rrow-track i { display: block; height: 100%; width: var(--w, 0%); border-radius: 4px; }
.r-ok .crm-rrow-track i { background: #2f9a45; }
.r-warm .crm-rrow-track i { background: #e0a21f; }
.r-late .crm-rrow-track i { background: #d9466f; }
.r-none .crm-rrow-track i { background: #8a9ba1; }
.crm-rrow-n { text-align: right; font-variant-numeric: tabular-nums; }
.crm-rhythm-foot { margin: 10px 0 0; }
.crm-todo-list { display: flex; flex-direction: column; gap: 8px; }
.crm-todo { display: grid; grid-template-columns: 38px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; font: inherit; border: 0; border-radius: 12px; cursor: pointer; }
.crm-todo.t-neutro { background: var(--surface-2); color: var(--ink); }
.crm-todo:hover { filter: brightness(.97); }
.crm-todo[aria-pressed="true"] { outline: 2px solid currentColor; }
.crm-todo-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); }
.crm-todo-ic .ic { margin: 0; }
.crm-todo-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-todo-go { font-size: 1.4rem; opacity: .6; }
.crm-todo-pets { display: flex; margin-top: 4px; }
.crm-todo-pet { margin-right: -6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.crm-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 8px; color: var(--muted); text-align: center; }
.crm-empty .ic { font-size: 1.6rem; margin: 0; }
.crm-empty p { margin: 0; }

/* fichas */
.crm-people-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.crm-people-head > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.crm-people-head h2 { margin: 0; font-size: 1.2rem; }
.crm-count { padding: 1px 10px; border-radius: 99px; background: var(--surface-2); font-size: .82rem; font-weight: 700; color: var(--muted); }
.crm-people-tools { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.crm-bulk { position: sticky; top: 8px; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; border-radius: 12px; background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); }
.crm-bulk[hidden] { display: none; }
.crm-bulk b { margin-right: auto; }
.crm-bulk .linklike { color: #fff; }
.crm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.crm-cc { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--pc); border-radius: 6px 6px 16px 16px; transition: box-shadow .12s ease, transform .12s ease; }
.crm-cc:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .08); transform: translateY(-1px); }
.crm-cc.on { outline: 2px solid var(--primary); }
.crm-cc-head { display: flex; align-items: center; gap: 10px; }
.crm-cc-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--pb); color: var(--pi); font-weight: 800; }
.crm-cc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crm-cc-name .crm-open { font-weight: 800; text-align: left; overflow-wrap: anywhere; }
.crm-cc-prof { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 1px 8px 1px 6px; border-radius: 99px; background: var(--pb); color: var(--pi); font-size: .75rem; font-weight: 700; }
.crm-cc-prof .ic { margin: 0; font-size: .85em; }
.crm-cc-check input { width: 20px; height: 20px; }
.crm-cc-pets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: .9rem; color: var(--muted); }
.crm-cc-pets .ic { margin: 0; }
.crm-cc-bday { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 99px; background: var(--rosa-bg); color: var(--rosa-ink); font-size: .75rem; font-weight: 700; }
.crm-cc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.crm-cc-stats > div { padding: 7px 9px; border-right: 1px solid var(--line); min-width: 0; }
.crm-cc-stats > div:last-child { border-right: 0; }
.crm-cc-stats dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.crm-cc-stats dd { margin: 2px 0 0; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .92rem; }
.crm-cc-stats dd small { display: block; font-weight: 500; color: var(--muted); font-size: .74rem; }
.crm-cc-stats dd.warn { color: #b7791f; } .crm-cc-stats dd.bad { color: #c0392b; }
.crm-cc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.crm-cc-tel { font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-cc-acts { display: flex; align-items: center; gap: 6px; }
.crm-cc-acts .icon-only { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.crm-cc-acts .a-wa:not([disabled]) { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.crm-cc-acts .btn[disabled] { opacity: .35; }
.crm-cc-open { background: var(--pb); color: var(--pi); border-color: transparent; font-weight: 700; }
.crm-more { display: flex; justify-content: center; margin-top: 12px; }

@media (max-width: 1100px) {
  .crm-people-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .crm-people-tools input[type=search] { grid-column: 1 / -1; }
}
@media (max-width: 860px) { .crm-duo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .crm-band { padding: 16px; border-radius: 18px 18px 18px 6px; }
  .crm-band h1 { font-size: 1.5rem; }
  .crm-big { min-width: 0; flex: 1 1 40%; }
  .crm-big strong { font-size: 1.35rem; }
  .crm-map-legend { grid-template-columns: minmax(0, 1fr); }
  .crm-rrow { grid-template-columns: 88px minmax(0, 1fr) 30px; }
  .crm-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .crm-cc, .crm-cc:hover { transition: none; transform: none; } }

/* ---------- Lembretes, Conversas e Campanha (mesmo padrão do CRM) ---------- */
.crm-sec-head h2 { display: flex; align-items: center; gap: 8px; }
.crm-sec-head h2 .ic { margin: 0; color: var(--primary); }
.rem-panel, .conv-alerts, .camp-ready, .camp-out { margin-bottom: 14px; }
.rem-filter { margin: 0; }
.rem-list { display: flex; flex-direction: column; gap: 8px; }
.rem-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px 10px 0; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--rc, #9fb6bd); border-radius: 12px; }
.rem-card.s-ok { --rc: #2f9a45; } .rem-card.s-warn { --rc: #e0a21f; } .rem-card.s-bad { --rc: #d64545; background: color-mix(in srgb, #d64545 5%, var(--surface)); }
.rem-time { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-right: 1px dashed var(--line); color: var(--primary); }
.rem-time strong { font-family: var(--display); font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.rem-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rem-body b { font-size: 1.02rem; }
.rem-fail { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); }
.rem-fail .ic { margin: 0; }
.rem-msg summary { cursor: pointer; color: var(--primary); width: fit-content; }
.rem-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rem-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rem-wa { background: #1f9d55; border-color: #1f9d55; color: #fff; }
.rem-wa .ic { margin-right: 2px; }
.rem-hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.rem-hist-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.rem-hist-row.bad { background: color-mix(in srgb, #d64545 8%, var(--surface)); }
.rem-hist-date { display: flex; flex-direction: column; font-weight: 800; font-size: .9rem; }
.rem-hist-date small { font-weight: 500; color: var(--muted); }

.conv-alert-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.conv-alert { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; }
.conv-alert.new { border-color: #f7c948; background: color-mix(in srgb, #f7c948 12%, var(--surface)); }
.conv-alert p { margin: 2px 0; font-size: .9rem; }
.conv-alert-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--primary); }
.conv-alert-ic .ic { margin: 0; }
.conv-alert.k-ok .conv-alert-ic { background: var(--folha-bg); color: var(--folha-ink); }
.conv-alert.k-warn .conv-alert-ic { background: var(--toalha-bg); color: var(--toalha-ink); }
.conv-alert.k-bad .conv-alert-ic { background: var(--rosa-bg); color: var(--rosa-ink); }
.conv-new { margin-left: 6px; padding: 0 7px; border-radius: 99px; background: #f7c948; color: #3d2e00; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.conv-app { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 0; min-height: 520px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.conv-side { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-right: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.conv-side-head { display: flex; align-items: center; gap: 8px; }
.conv-side-head h2 { margin: 0; font-size: 1.1rem; }
.conv-tabs { background: var(--surface); border: 1px solid var(--line); align-self: flex-start; }
.conv-tabs button { color: var(--muted); padding: 5px 10px; font-size: .84rem; }
.conv-items { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 560px; }
.conv-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: 12px; cursor: pointer; }
.conv-item:hover { background: var(--surface); }
.conv-item.on { background: var(--surface); box-shadow: inset 4px 0 0 #f7c948, 0 2px 8px rgba(0, 0, 0, .06); }
.conv-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0f4655; color: #f7c948; font-weight: 800; font-size: .9rem; }
.conv-item-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.conv-item-top { display: flex; justify-content: space-between; gap: 6px; }
.conv-item-top small { color: var(--muted); white-space: nowrap; }
.conv-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-none { padding: 10px; }
.conv-chat { display: flex; flex-direction: column; min-width: 0; padding: 14px 16px; }
.conv-chat .crm-empty { flex: 1; }
.conv-chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.conv-chat-head > div:nth-child(2) { flex: 1; min-width: 0; }
.conv-chat-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.conv-paused { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #f7c948 20%, var(--surface)); font-size: .9rem; }
.conv-paused .ic { margin: 0; }
.conv-msgs { flex: 1; margin-top: 12px; max-height: 560px; }

.camp-bulk { top: 8px; }
.camp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.camp-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid #0b6680; border-radius: 6px 6px 16px 16px; }
.camp-card.on { outline: 2px solid #f7c948; border-top-color: #f7c948; }
.camp-card-head { display: flex; align-items: center; gap: 10px; }
.camp-card-head > div { flex: 1; min-width: 0; }
.camp-card-pets { display: flex; flex-direction: column; gap: 6px; }
.camp-card-pet { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); }
.camp-days { font-weight: 800; font-size: .84rem; color: #b7791f; white-space: nowrap; }
.camp-days.late { color: #c0392b; }
.camp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--line); }
.camp-out details.camp-group { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; background: var(--surface-2); }
.camp-out details.camp-group[open] { background: var(--surface); }
.camp-out details.camp-group summary { cursor: pointer; }

@media (max-width: 900px) {
  .conv-app { grid-template-columns: minmax(0, 1fr); }
  .conv-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .conv-items { max-height: 320px; }
}
@media (max-width: 640px) {
  .rem-card { grid-template-columns: 62px minmax(0, 1fr); }
  .rem-side { grid-column: 1 / -1; align-items: stretch; padding-left: 12px; }
  .rem-side .pill { align-self: flex-start; }
  .rem-acts { justify-content: flex-start; }
  .camp-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Painel ---------- */
.dash-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.dash-goals .goal { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; }
.goal-ring { --p: 0deg; position: relative; width: 104px; height: 104px; border-radius: 50%; background: conic-gradient(#0b6680 var(--p), var(--surface-2) 0); display: flex; align-items: center; justify-content: center; }
.goal-ring.ok { background: conic-gradient(#2f9a45 var(--p), var(--surface-2) 0); }
.goal-ring.warn { background: conic-gradient(#e0a21f var(--p), var(--surface-2) 0); }
.goal-ring::before { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); }
.goal-ring span { position: relative; font-family: var(--display); font-size: 1.45rem; font-weight: 800; color: var(--ink); }
.goal-ring span .ic { margin: 0; color: #0f4655; font-size: 1.6rem; }
.goal-empty .goal-ring { background: repeating-conic-gradient(#f7c948 0 8deg, var(--surface-2) 8deg 16deg); }
.goal-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.goal-body h2 { margin: 0; font-size: 1.1rem; }
.goal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.goal-body .btn { align-self: flex-start; }
.dash-goals .goal-tick { background: #f7c948; width: 4px; box-shadow: 0 0 0 1px #3d2e00; }
.dash-goals .debtors { grid-column: 1 / -1; }
.debtors { margin-bottom: 14px; }

.dash-period { margin-bottom: 14px; }
.dash-period-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-period-head h2 { margin: 2px 0 0; font-size: 1.3rem; }
.dash-tabs { background: var(--surface-2); border: 1px solid var(--line); }
.dash-tabs button { color: var(--muted); }
.dash-tabs button[aria-pressed="true"] { background: #0f4655; color: #fff; }
.dash-tile b { white-space: nowrap; overflow-wrap: normal; }
.dash-mosaic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 12px; }
.dash-hero { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px 16px 16px 4px; color: #fff; background: linear-gradient(135deg, #0f4655, #0b6680); position: relative; overflow: hidden; }
.dash-hero::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; border: 18px solid rgba(247, 201, 72, .18); }
.dash-hero .dash-tile-label { color: #f7c948; }
.dash-hero b { font-family: var(--display); font-size: 2.2rem; line-height: 1.05; }
.dash-hero .small.muted, .dash-hero p { color: rgba(255, 255, 255, .78); margin: 0; }
.dash-delta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-weight: 800; }
.dash-delta.up { color: #a8f0bf; } .dash-delta.down { color: #ffc1ba; }
.dash-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dash-tile { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-bottom: 3px solid var(--pc); min-width: 0; }
.dash-tile > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-tile b { font-family: var(--display); font-size: 1.25rem; line-height: 1.15; overflow-wrap: anywhere; }
.dash-tile-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--pb); color: var(--pi); }
.dash-tile-ic .ic { margin: 0; }
.dash-tile-label { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

.dash-chart { margin-bottom: 14px; }
.dash-chart h2 { display: flex; align-items: center; gap: 8px; }
.dash-chart h2 .ic { margin: 0; color: var(--primary); }
.dash-chart .bar-done { background: linear-gradient(180deg, #13708a, #0f4655); }
.dash-chart .bar-expected { background: repeating-linear-gradient(135deg, #f7c948 0 5px, #f9d877 5px 10px); }
.dash-chart .key-done { background: #0f4655; } .dash-chart .key-expected { background: #f7c948; }

.dash-ranks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dash-rank { margin: 0; }
.dash-rank ol.ranks { list-style: none; margin: 0; padding: 0; gap: 10px; }
.dash-rank .rank { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.dash-rank .rank-pos { width: 28px; height: 28px; background: var(--surface-2); color: var(--muted); font-size: .85rem; }
.dash-rank .rank.top-1 .rank-pos { background: #f7c948; color: #3d2e00; }
.dash-rank .rank.top-2 .rank-pos { background: #d7e3e6; color: #24434b; }
.dash-rank .rank.top-3 .rank-pos { background: #f0c9a0; color: #5a3410; }
.dash-rank .rank-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-rank .rank-fill { background: linear-gradient(90deg, #0b6680, #13708a); }
.dash-rank .rank.top-1 .rank-fill { background: linear-gradient(90deg, #0b6680, #f7c948); }

@media (max-width: 1180px) {
  .dash-mosaic { grid-template-columns: minmax(0, 1fr); }
  .dash-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-ranks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dash-goals { grid-template-columns: minmax(0, 1fr); }
  .dash-goals .goal { grid-template-columns: 84px minmax(0, 1fr); }
  .goal-ring { width: 84px; height: 84px; }
  .goal-ring span { font-size: 1.2rem; }
  .dash-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .dash-tile { flex-direction: column; gap: 6px; padding: 10px; }
  .dash-tile b { font-size: 1.1rem; }
  .dash-tile-label { font-size: .68rem; }
  .dash-ranks { grid-template-columns: minmax(0, 1fr); }
  .dash-tabs { order: -1; width: 100%; }
}

/* PDV: lixeira e teclas de atalho nos botões */
.pos-del { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 9px; border: 1px solid #f3c2bd; background: #fdecea; color: #c62828; cursor: pointer; }
.pos-del .ic { margin: 0; width: 1.05em; height: 1.05em; }
.pos-del:hover, .pos-del:focus-visible { background: #c62828; border-color: #c62828; color: #fff; }
.pos-line-head { align-items: center; }
.pos-kbd { display: inline-block; margin-left: 6px; padding: 0 5px; min-width: 22px; text-align: center; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); color: var(--muted); font: 700 .7rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; vertical-align: middle; }
.pos-kbd-in { position: absolute; right: 12px; pointer-events: none; }
.pos-search input[type=search] { padding-right: 52px; }
.pos-new-client { position: relative; }
.btn.primary .pos-kbd.pos-kbd-mini, .pos-kbd-mini { position: absolute; top: -8px; right: -8px; margin: 0; min-width: 0; padding: 0 3px; font-size: .6rem; background: #f7c948; color: #3d2e00; border-color: #d9a520; }
.pos-kbd-hint { margin-left: 8px; font-weight: 500; font-size: .78rem; color: var(--muted); }
.pos-kbd-hint .pos-kbd { margin: 0 4px 0 0; }
.pos-help-btn .pos-kbd { margin-left: 4px; }
.pos-clear .pos-kbd { margin-left: 6px; }
@media (max-width: 820px), (hover: none) { .pos-kbd, .pos-more-actions .pos-kbd, .pos-kbd-in, .btn.primary .pos-kbd.pos-kbd-mini, .pos-kbd-hint { display: none; } .pos-search input[type=search] { padding-right: 14px; } }
.pos-client .field { position: relative; }
.pos-kbd-sel { right: 34px; bottom: 11px; }
.pos-discount > span { display: inline-flex; align-items: center; white-space: nowrap; }

/* PDV offline */
.offline-band { display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; background: #7a1f17; color: #fff; }
.offline-band .ic { margin: 0; color: #f7c948; }
.pos-offline { border: 0; font: inherit; cursor: pointer; }
.pos-offline.bad { background: #fdecea; color: #b3261e; }
.pos-offline.bad .pos-dot { background: #d93025; animation: off-blink 1.2s ease-in-out infinite; }
.pos-offline.wait { background: #fff4d6; color: #6b4b00; }
.pos-offline.wait .pos-dot { background: #e0a21f; }
.pos-offline.warn { background: #fff4d6; color: #8a4b00; }
.pos-offline.warn .pos-dot { background: #e07b1f; }
@keyframes off-blink { 50% { opacity: .3; } }
.offline-page .crm-empty { padding: 40px 16px; gap: 10px; }
.offline-page .crm-empty > .ic { font-size: 2.4rem; color: #b3261e; }
.offline-page h1 { margin: 0; color: var(--ink); }
.offline-page p { max-width: 560px; }
@media (prefers-reduced-motion: reduce) { .pos-offline.bad .pos-dot { animation: none; } }

/* TEF integrado */
.tef-panel { margin-top: 14px; }
.tef-kinds { gap: 14px; flex-wrap: wrap; }
.tef-devices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.tef-device { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.tef-dev-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #0f4655; color: #f7c948; }
.tef-dev-ic .ic { margin: 0; }
.tef-dev-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tef-dialog { width: min(520px, 94vw); }
.tef-stage { margin-top: 12px; }
.tef-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border-radius: 16px; text-align: center; background: var(--surface-2); }
.tef-state b { font-size: 1.2rem; }
.tef-state p { margin: 0; color: var(--muted); }
.tef-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #0f4655; color: #f7c948; font-size: 1.8rem; }
.tef-icon .ic { margin: 0; }
.tef-state.wait .tef-icon { animation: tef-pulse 1.4s ease-in-out infinite; }
.tef-state.ok { background: var(--ok-soft); } .tef-state.ok .tef-icon { background: #1d6b34; color: #fff; }
.tef-state.bad { background: var(--danger-soft, #fde8e8); } .tef-state.bad .tef-icon { background: #b3261e; color: #fff; }
@keyframes tef-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(247, 201, 72, .6); } 50% { box-shadow: 0 0 0 14px rgba(247, 201, 72, 0); } }
@media (max-width: 900px) { .tef-dev-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tef-state.wait .tef-icon { animation: none; } }

/* Táxi Dog: mapa ao vivo */
.tx-track { margin-bottom: 14px; }
.tx-track-status { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tx-track .trk-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #9fb6bd; }
.tx-track .trk-dot.live { background: #2fbf63; box-shadow: 0 0 0 4px rgba(47, 191, 99, .25); }
.tx-track .trk-dot.wait { background: #f7c948; }
.tx-map { height: 340px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 8px; }
.trk-van { display: flex; align-items: center; justify-content: center; }
.trk-van span { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #f7c948; border: 3px solid #0f4655; font-size: 22px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
#link-share { width: 100%; }
#ct-mes { width: auto; min-width: 180px; }
#contador .row { align-items: center; flex-wrap: wrap; gap: 8px; }
.ct-hist { margin-top: 12px; }

/* Táxi Dog no padrão do painel */
.tx-band-day .day-nav { gap: 6px; margin: 0; }
.tx-band-day .btn.icon, .tx-band-day .btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; }
.tx-band-day input[type=date] { background: #fff; color: #10323c; border: 0; border-radius: 10px; min-height: 38px; padding: 0 8px; }
.tx-card .rem-time { gap: 6px; }
.tx-kind { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: .72rem; font-weight: 800; }
.tx-kind .ic { margin: 0; }
.tx-kind.busca { background: var(--toalha-bg); color: var(--toalha-ink); }
.tx-kind.entrega { background: var(--lilas-bg); color: var(--lilas-ink); }
.tx-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tx-card-title b { font-size: 1.05rem; }
.tx-price { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-addr { display: inline-flex; align-items: center; gap: 4px; width: fit-content; }
.tx-addr .ic { margin: 0; }
.tx-card.is-off { opacity: .55; }
.tx-card .rem-side { max-width: 460px; }
@media (max-width: 640px) { .tx-band-day { width: 100%; } .tx-price { margin-left: 0; } }
.tx-map { position: relative; z-index: 0; isolation: isolate; }

/* comissões */
.com-period { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.com-dates { display: inline-flex; gap: 6px; align-items: center; color: rgba(255, 255, 255, .85); }
.com-dates input { background: rgba(255, 255, 255, .95); color: #10313b; border: 0; border-radius: 9px; padding: 6px 8px; font: inherit; }
.com-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.com-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #0b6680; border-radius: 14px; }
.com-card.has-open { border-left-color: #f7c948; }
.com-card:has(.com-detail) { grid-column: 1 / -1; }
.com-card-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.com-card-head h3 { margin: 0; font-size: 1.02rem; }
.com-card-head p { margin: 0; }
.com-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0f4655; color: #f7c948; font-weight: 800; font-size: .85rem; }
.com-total { text-align: right; display: flex; flex-direction: column; }
.com-total strong { font-size: 1.25rem; color: var(--ink); }
.com-bar { display: flex; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.com-bar span { width: var(--w); }
.com-bar-s, .com-dot.s { background: #0b6680; }
.com-bar-p, .com-dot.p { background: #f2a93b; }
.com-split { display: flex; flex-wrap: wrap; gap: 14px; font-size: .88rem; }
.com-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.com-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.com-detail { overflow-x: auto; }
.com-table td.num, .com-table th.num { text-align: right; white-space: nowrap; }
.com-table tr.com-neg td { color: #b3261e; }
.com-rule-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 10px 0; }
.com-rule { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.com-rule-head { display: flex; gap: 10px; align-items: center; }
.com-rule-pcts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.com-pct { max-width: 100%; }
.com-svc summary { cursor: pointer; font-size: .88rem; color: var(--primary); font-weight: 600; }
.com-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.com-print h2 { margin: 0 0 4px; }
.com-print table { width: 100%; border-collapse: collapse; font-size: 11px; }
.com-print th, .com-print td { border-bottom: 1px solid #ccc; padding: 3px 4px; text-align: left; }
.com-print .com-sign { margin-top: 28px; }
.pos-seller select { width: 100%; }
.pos-food { background: var(--ok-soft, #e6f4ea); }
.med-kind { margin-left: 6px; vertical-align: middle; }
@media (max-width: 520px) { .com-rule-pcts, .com-svc-grid { grid-template-columns: 1fr; } .com-grid { grid-template-columns: 1fr; } .com-dates { width: 100%; } .com-dates input { flex: 1; min-width: 0; } .com-card-head { grid-template-columns: auto 1fr; } .com-total { grid-column: 1 / -1; text-align: left; flex-direction: row; gap: 6px; align-items: baseline; } }

/* agendamento online */
.online-url { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.online-host { display: flex; align-items: center; padding: 0 10px; background: var(--surface-2, #eef4f5); border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.online-url input { flex: 1 1 180px; min-width: 0; border-radius: 0 10px 10px 0; font-weight: 700; }
.online-url .btn { margin-left: 10px; }
.online-actions { flex-wrap: wrap; }
.online-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.online-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: #f7c948; color: #3d2e00; font-size: .68rem; font-weight: 800; vertical-align: middle; }
.online-news { border-left: 4px solid #f7c948; }
@media (max-width: 520px) { .online-url .btn { margin: 8px 0 0; width: 100%; } }

/* balança */
.bl-result { display: flex; flex-direction: column; gap: 4px; }
.bl-ok { color: var(--ok-ink, #1f7a43); }
.bl-bad { color: var(--bad-ink, #b3261e); }
.bl-raw { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.bl-row { align-items: center; flex-wrap: wrap; gap: 10px; }
.bl-msg { margin: 0; }
.bl-msg.bl-ok, .bl-msg.bl-bad { font-weight: 700; }

/* fiscal de caixa */
.fc-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fc-group { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fc-group legend { font-weight: 800; padding: 0 6px; }
.cash-pin { letter-spacing: .4em; font-size: 1.3rem; text-align: center; }

/* alertas de cuidado do pet */
.care-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.care-chips.compact { gap: 3px; margin-top: 2px; }
.care-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 99px; font-size: .8rem; font-weight: 800; line-height: 1.2; border: 1.5px solid transparent; font-family: inherit; }
.care-chip.perigo { background: #fde3e1; color: #9b1c14; border-color: #f2a59e; }
.care-chip.atencao { background: #fff1d6; color: #7a4b00; border-color: #f2cf86; }
.care-dot { width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 900; color: #fff; flex: none; }
.care-chip.perigo .care-dot { background: #c62828; }
.care-chip.atencao .care-dot { background: #d98a00; }
.care-chips.compact .care-chip { font-size: .68rem; padding: 1px 6px 1px 2px; }
.care-chips.compact .care-dot { width: 13px; height: 13px; font-size: .58rem; }
.care-note { font-size: .85rem; font-weight: 700; color: var(--ink); background: var(--surface-2, #eef4f5); padding: 3px 9px; border-radius: 8px; }
.care-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.care-pick .care-chip { cursor: pointer; background: transparent; color: var(--muted); border-color: var(--line); opacity: .85; }
.care-pick .care-chip .care-dot { background: var(--line); }
.care-pick .care-chip[aria-pressed="true"] { opacity: 1; }
.care-pick .care-chip.perigo[aria-pressed="true"] { background: #fde3e1; color: #9b1c14; border-color: #f2a59e; }
.care-pick .care-chip.atencao[aria-pressed="true"] { background: #fff1d6; color: #7a4b00; border-color: #f2cf86; }
.care-pick .care-chip.perigo[aria-pressed="true"] .care-dot { background: #c62828; }
.care-pick .care-chip.atencao[aria-pressed="true"] .care-dot { background: #d98a00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .care-chip.perigo, :root:not([data-theme="light"]) .care-pick .care-chip.perigo[aria-pressed="true"] { background: #4a1714; color: #ffb4ab; border-color: #8c2a22; }
  :root:not([data-theme="light"]) .care-chip.atencao, :root:not([data-theme="light"]) .care-pick .care-chip.atencao[aria-pressed="true"] { background: #43310a; color: #ffd98a; border-color: #7a5a14; }
}
:root[data-theme="dark"] .care-chip.perigo, :root[data-theme="dark"] .care-pick .care-chip.perigo[aria-pressed="true"] { background: #4a1714; color: #ffb4ab; border-color: #8c2a22; }
:root[data-theme="dark"] .care-chip.atencao, :root[data-theme="dark"] .care-pick .care-chip.atencao[aria-pressed="true"] { background: #43310a; color: #ffd98a; border-color: #7a5a14; }

/* mapa de clientes */
.cm-panel { padding: 0; overflow: hidden; }
.cm-map { height: 460px; width: 100%; position: relative; z-index: 0; isolation: isolate; background: #dfeee9; }
.cm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; font-size: .85rem; }
.cm-grad { display: inline-block; width: 120px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, rgb(255,214,102), rgb(245,141,66), rgb(214,52,52), rgb(140,20,60)); }
.cm-shop { display: grid; place-items: center; background: #0f4655; border: 3px solid #f7c948; border-radius: 50%; font-size: 17px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.cm-tips { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.cm-table td.num, .cm-table th.num { text-align: right; white-space: nowrap; }
.cm-barbox { display: flex; align-items: center; gap: 8px; min-width: 170px; }
.cm-barbox span { font-size: .85rem; white-space: nowrap; }
.cm-bar { display: block; height: 10px; width: var(--w); max-width: 110px; flex: none; border-radius: 99px; background: var(--c); }
.cl-addr summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.cl-addr[open] summary { margin-bottom: 8px; }
@media (max-width: 620px) { .cm-map { height: 340px; } }

/* administração: visitas do site */
.site-online-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 6px 12px; font: inherit; cursor: pointer; }
.site-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 0 rgba(31, 157, 85, .6); animation: site-pulse 1.8s infinite; flex: none; }
@keyframes site-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .55); } 70% { box-shadow: 0 0 0 9px rgba(31, 157, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); } }
@media (prefers-reduced-motion: reduce) { .site-live-dot { animation: none; } }
.site-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.site-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.site-kpi b { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.site-kpi b.up { color: #1f7a43; } .site-kpi b.down { color: #b3261e; }
.site-kpi span { color: var(--muted); font-size: .88rem; }
.site-kpi.live { background: linear-gradient(135deg, #0f4655, #0b6680); color: #fff; border: 0; position: relative; }
.site-kpi.live span:not(.site-live-dot) { color: rgba(255, 255, 255, .85); }
.site-kpi.live .site-live-dot { position: absolute; top: 14px; right: 14px; background: #f7c948; }
.site-legend { display: flex; gap: 16px; margin-bottom: 8px; }
.site-legend span { display: inline-flex; align-items: center; gap: 6px; }
.site-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.site-bars { display: flex; align-items: flex-end; gap: 3px; height: 200px; padding-top: 6px; }
.site-col { flex: 1; min-width: 0; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px; }
.site-col i { position: absolute; bottom: 18px; width: 70%; border-radius: 4px 4px 0 0; height: var(--h); min-height: 1px; }
.site-v, .site-legend i.site-v { background: #9fd3e0; }
.site-u, .site-legend i.site-u { background: #0b6680; }
.site-col i.site-u { width: 40%; }
.site-day { position: absolute; bottom: 0; font-size: .62rem; color: var(--muted); }
.site-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.site-list { display: flex; flex-direction: column; gap: 8px; }
.site-row { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.site-bar { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, #0b6680 var(--w), var(--line) var(--w)); }
.site-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.site-hours > div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .6rem; color: var(--muted); }
.site-hour { width: 100%; height: 34px; border-radius: 4px; background: rgba(11, 102, 128, var(--a)); }
.site-dev { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.site-devbar { display: block; height: 12px; border-radius: 99px; background: linear-gradient(90deg, #f7c948 var(--w), #0b6680 var(--w)); }
@media (max-width: 620px) { .site-bars { height: 150px; gap: 1px; } .site-day { display: none; } .site-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- avaliações no Google ---------- */
.rv-stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 1px; font-size: 1rem; vertical-align: middle; }
.rv-stars .rv-empty { color: var(--line); }
.rv-stars .rv-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #e8a800; }
.rv-stars.big { font-size: 1.6rem; }
.rv-stars.on-band .rv-empty { color: rgba(255, 255, 255, .25); }
.rv-stars.on-band .rv-fill { color: var(--brand-sun); }
.rv-big strong { font-size: 2.2rem; }
.rv-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.rv-grid > .panel { min-width: 0; }
.rv-score { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.rv-score strong { font-family: var(--display); font-size: 3rem; line-height: 1; }
.rv-dist { display: flex; flex-direction: column; gap: 4px; }
.rv-dist-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; gap: 8px; align-items: center; border: 0; background: none; font: inherit; color: var(--ink); padding: 4px 6px; border-radius: 8px; cursor: pointer; text-align: left; }
.rv-dist-row:hover { background: var(--surface-2); }
.rv-dist-row[aria-pressed="true"] { background: var(--neutral-soft); outline: 2px solid var(--primary); }
.rv-dist-c { text-align: right; font-variant-numeric: tabular-nums; }
.rv-bar { height: 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; display: block; }
.rv-bar-fill { display: block; height: 100%; background: #e8a800; border-radius: 99px; }
.rv-items { display: flex; flex-direction: column; gap: 10px; }
.rv-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.rv-item.new { border-color: #e8a800; box-shadow: 0 0 0 2px rgba(232, 168, 0, .15); }
.rv-item-head { display: flex; gap: 10px; align-items: center; }
.rv-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--brand-deep, #0f4655); color: var(--brand-sun, #f7c948); font-weight: 800; }
.rv-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.rv-text { margin: 0; white-space: pre-line; line-height: 1.45; }
.rv-foot { gap: 10px; align-items: center; }
.rv-search { flex-wrap: nowrap; gap: 8px; }
.rv-search input { flex: 1; min-width: 0; }
.rv-results { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rv-result { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.rv-result > div { min-width: 0; }
.rv-current { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px; border-radius: 12px; background: var(--ok-soft); }
.rv-current > div { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.rv-current > .ic { color: var(--ok); }
.rv-manual { margin-top: 12px; }
.rv-manual summary { cursor: pointer; font-weight: 600; }
.rv-preview { margin: 8px 0; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: #dcf8c6; color: #12363f; max-width: 520px; }
.rv-preview p { margin: 4px 0 0; overflow-wrap: anywhere; }
@media (max-width: 860px) { .rv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .rv-search { flex-wrap: wrap; } .rv-search .btn { width: 100%; } .rv-result { flex-direction: column; align-items: stretch; } }

/* ---------- pontos de fidelidade ---------- */
.fd-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fd-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fd-client { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 10px 12px; font: inherit; text-align: left; cursor: pointer; min-height: 52px; }
.fd-client:hover { border-color: var(--primary); }
.fd-client > span:first-child { min-width: 0; }
.fd-client-pts { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.fd-prizes { display: flex; flex-direction: column; gap: 8px; }
.fd-prize { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.fd-prize > div { min-width: 0; }
.fd-prize.can { border-color: var(--ok); background: var(--ok-soft); }
.fd-prize.off { opacity: .65; }
.fd-cost { font-weight: 800; white-space: nowrap; }
.fd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.fd-balance { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.fd-balance strong { font-family: var(--display); font-size: 2.6rem; color: var(--primary); }
.fd-adjust { margin: 12px 0; }
.fd-adjust summary { cursor: pointer; font-weight: 600; }
.fd-adjust .row { flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fd-adjust input { flex: 1 1 140px; min-width: 0; }
.fd-moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fd-moves li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.fd-pts { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fd-pts.plus { color: var(--ok); }
.fd-pts.minus { color: var(--danger); }
.fd-link { border: 0; background: none; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; text-align: left; }

/* ---------- artes de postagens ---------- */
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-top: 12px; }
.art-card { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 14px; padding: 8px; font: inherit; text-align: left; cursor: pointer; }
.art-card:hover, .art-card:focus-visible { border-color: var(--primary); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.art-thumb { width: 100%; height: auto; border-radius: 10px; display: block; aspect-ratio: 4 / 5; }
.art-name { font-weight: 700; }
.art-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.art-editor > .panel { min-width: 0; }
.art-canvas-wrap { margin: 12px auto; max-width: 440px; }
.art-canvas-wrap.story { max-width: 330px; }
.art-canvas { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.art-actions { justify-content: center; flex-wrap: wrap; gap: 8px; }
.art-pals { display: flex; flex-wrap: wrap; gap: 8px; }
.art-pal { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); background: linear-gradient(135deg, var(--a) 0 58%, var(--b) 58% 100%); cursor: pointer; padding: 0; }
.art-pal[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--primary); }
.art-caption { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.art-caption p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 900px) { .art-editor, .fd-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- modo banhista ---------- */
.bh-top { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 4px 0 10px; display: flex; flex-direction: column; gap: 10px; }
.bh-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.bh-title h1 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.5rem; }
.bh-title select { min-height: 44px; max-width: 100%; }
.bh-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.bh-tabs button { min-height: 48px; border: 0; border-radius: 10px; background: none; font: 700 1rem inherit; font-family: inherit; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.bh-tabs button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.bh-count { min-width: 24px; padding: 0 7px; border-radius: 99px; background: var(--neutral-soft, rgba(0,0,0,.08)); font-size: .85rem; line-height: 22px; }
.bh-tabs button[aria-pressed="true"] .bh-count { background: rgba(255,255,255,.25); }
.bh-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.bh-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bh-card.ready { border-color: var(--ok); }
.bh-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.bh-head > div { display: flex; flex-direction: column; min-width: 0; }
.bh-name { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; }
.bh-sub { color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.bh-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.bh-steps li { text-align: center; font-size: .8rem; font-weight: 700; padding: 8px 2px; border-radius: 8px; background: var(--surface-2); color: var(--muted); border-top: 4px solid var(--line); }
.bh-steps li.done { color: var(--ink); border-top-color: var(--ok); }
.bh-steps li.now { background: var(--primary); color: #fff; border-top-color: var(--primary); }
.bh-note { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .95rem; overflow-wrap: anywhere; }
.bh-note.bad { background: var(--bad-soft, #fdecea); color: var(--danger); }
.bh-next { min-height: 56px; font-size: 1.15rem; width: 100%; justify-content: center; }
.bh-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bh-btn { min-height: 48px; flex: 1 1 140px; justify-content: center; }
.tv-link-box { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--line); overflow-wrap: anywhere; }
.tv-link-box code { font-size: .95rem; }

/* ---------- revendas e white label ---------- */
.powered { display: block; font-size: .72rem; opacity: .75; letter-spacing: .02em; margin-top: 4px; }
.powered-foot { text-align: center; font-size: .75rem; color: var(--muted); margin: 24px 0 8px; }
.login-brand { margin: 4px 0 0; font-family: var(--display); font-size: 1.6rem; text-align: center; color: var(--ink); }
.login .powered { text-align: center; color: var(--muted); }
.rs-list { display: flex; flex-direction: column; }
.rs-store { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.rs-store > div { min-width: 0; overflow-wrap: anywhere; }
.rs-actions { flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rb-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rb-grid > .panel { min-width: 0; }
.rb-band { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border-radius: 16px; color: #fff; background: #0f4655; min-height: 150px; }
.rb-band b { font-family: var(--display); font-size: 1.3rem; }
.rb-band small { opacity: .75; font-size: .72rem; }
.rb-plate { background: #fff; border-radius: 12px; padding: 6px 10px; display: inline-flex; }
.rb-logo { max-height: 44px; max-width: 180px; display: block; }
@media (max-width: 860px) { .rs-store { grid-template-columns: minmax(0, 1fr); } .rs-actions { justify-content: flex-start; } .rb-grid, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.wa-float[hidden] { display: none !important; }
:root.brand-on .crm-band { background: linear-gradient(115deg, var(--band) 0%, color-mix(in srgb, var(--band) 78%, #000) 100%); }
.rs-mode { margin-bottom: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs-mods { display: flex; flex-direction: column; gap: 10px; }
.rs-mods[hidden] { display: none; }
.rs-mod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.rs-mod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.rs-mod:has(input:checked) { border-color: var(--primary); background: var(--surface-2); }
.rs-mod input { margin-top: 3px; }
.rs-mod em { font-style: normal; font-weight: 700; white-space: nowrap; font-size: .9rem; }
.rs-mod small { font-size: .78rem; line-height: 1.3; }
.rs-cost { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 1rem; }
.rs-cost b { font-size: 1.15rem; color: var(--primary); }
.rs-demo-check { padding: 10px 12px; border-radius: 12px; background: #fff8e1; color: #3d2e00; margin-bottom: 8px; }
:root[data-theme="dark"] .rs-demo-check { background: #3a2f12; color: #fde9a8; }
.rs-mod-table { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.rs-mod-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; align-items: center; }
@media (max-width: 640px) { .rs-mod-grid { grid-template-columns: minmax(0, 1fr); } }