/* ==========================================================================
   Tema AmberFlow (DESIGN-CUSTOM.md) — camada carregada depois de styles.css.
   Etapa 1: cores, fontes, menu lateral em cartão escuro flutuante, barra do topo, botões, cartões,
   tabelas, campos, abas, etiquetas e janelas. Vale para todas as telas do sistema (index.html).
   Os tokens antigos (--bg, --surface, --text…) continuam sendo os que as telas usam: aqui só mudam os valores.
   ========================================================================== */

:root {
  /* Canvas claro + cartões brancos com borda fina */
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #eef2f6;
  --surface-warm: #fffbeb;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --grid: #eef2f6;
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;
  --text-4: #94a3b8;
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #f43f5e;
  --info: #6366f1;
  --ok-bg: #d1fae5;
  --warn-bg: #fef3c7;
  --danger-bg: #ffe4e6;
  --info-bg: #e0e7ff;
  --ok-ink: #065f46;
  --warn-ink: #92400e;
  --danger-ink: #9f1239;
  --info-ink: #3730a3;
  --toast-bg: #0f172a;
  --backdrop: rgba(15, 23, 42, .45);
  /* Geometria */
  --radius: 14px;
  --radius-lg: 18px;
  --field-r: 12px;
  /* Sombras: cartão parado, cartão erguido, brilho do botão dourado, janelas flutuantes */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .03);
  --shadow-hover: 0 10px 25px -4px rgba(15, 23, 42, .08), 0 4px 10px -2px rgba(15, 23, 42, .04);
  --shadow-amber: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent);
  --shadow-amber-hover: 0 8px 22px color-mix(in srgb, var(--primary) 40%, transparent);
  --shadow: 0 20px 40px -8px rgba(15, 23, 42, .16), 0 0 0 1px rgba(15, 23, 42, .06);
  --shadow-soft: var(--shadow-hover);
  /* Movimento suave (sem trancos) */
  --smooth: cubic-bezier(.16, 1, .3, 1);
  /* Fontes: Inter no texto, Plus Jakarta Sans em títulos e números grandes, JetBrains Mono em valores de tabela */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-family: var(--font-body);
  /* Menu lateral */
  --sidebar-w: 238px;
  --shell-gap: 12px;
}
:root[data-theme="dark"] {
  --bg: #0b0d12;
  --surface: #12151c;
  --surface-2: #181c25;
  --surface-warm: color-mix(in srgb, var(--primary) 8%, #12151c);
  --border: #232836;
  --border-strong: #323949;
  --grid: #1c212b;
  --text: #eef2f7;
  --text-2: #b4bccb;
  --text-3: #8a93a6;
  --text-4: #687083;
  --ok-bg: color-mix(in srgb, #10b981 16%, #12151c);
  --warn-bg: color-mix(in srgb, #f59e0b 16%, #12151c);
  --danger-bg: color-mix(in srgb, #f43f5e 16%, #12151c);
  --info-bg: color-mix(in srgb, #6366f1 18%, #12151c);
  --ok-ink: #6ee7b7;
  --warn-ink: #fcd34d;
  --danger-ink: #fda4af;
  --info-ink: #c7d2fe;
  --toast-bg: #232836;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-hover: 0 12px 28px -6px rgba(0, 0, 0, .55);
  --shadow: 0 20px 44px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05);
}

/* ---------- Base ---------- */
body { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; background: var(--bg); color: var(--text); font-feature-settings: "cv11", "ss01"; }
b, strong, th { font-weight: 600; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.015em; }
svg { stroke-width: 1.85; }
svg text { stroke: none !important; }
.kpi strong, .stat strong, .goal-nums.big strong, .sum-total strong, .table .num, .cash-chip { font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in srgb, var(--primary) 28%, transparent); }

/* ---------- Estrutura: menu em cartão escuro flutuante + área clara ---------- */
@media (min-width: 901px) {
  .app { padding: var(--shell-gap) var(--shell-gap) var(--shell-gap) 0; gap: 0; background: var(--bg); }
  .sidebar {
    margin: 0 var(--shell-gap); height: calc(100dvh - var(--shell-gap) * 2); border-radius: var(--radius-lg);
    border: 1px solid var(--sb-edge, #262b38); box-shadow: var(--sb-shadow, 0 18px 40px -16px rgba(15, 17, 23, .45)); padding: 16px 10px 12px;
  }
  .sb-toggle { left: calc(var(--sidebar-w) + var(--shell-gap) - 13px); top: 30px; }
  .main { min-height: 0; }
  .view { padding: 14px 4px 40px 4px; }
  .view-agenda { padding: 10px 0 0 0; }
}

/* Itens do menu: compactos, pílula dourada translúcida e barrinha à esquerda no ativo */
.nav { gap: 6px; }
.nav-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
button.nav-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--sb-fg-2); padding: 9px 12px 5px; border-radius: 10px; gap: 9px; }
button.nav-label > svg { width: 15px; height: 15px; }
button.nav-label:hover { color: var(--sb-fg); }
.nav-group:not(.closed) .nav-items-in { padding: 2px 0 6px 0; }
.nav-item { position: relative; min-height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; gap: 10px; color: var(--sb-fg-2);
  transition: background .32s var(--smooth), color .32s var(--smooth); }
.nav-item > svg { width: 17px; height: 17px; color: var(--sb-muted); transition: color .32s var(--smooth); }
.nav-item:hover > svg { color: var(--sb-fg); }
.nav-item.active { background: var(--sb-active-bg); color: var(--sb-fg); font-weight: 600; }
.nav-item.active > svg { color: var(--sb-accent); }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-accent); }
.nav-group.closed:has(.nav-item.active) > button.nav-label { color: var(--sb-accent); background: none; }
.nav-bottom { gap: 2px; padding-top: 8px; }
.nav-support { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.nav-bottom .sb-about { padding: 6px 12px 0; }

/* ---------- Barra do topo (busca em pílula, relógio, notificações, tema e usuário) ---------- */
#topbar { height: auto; min-height: 52px; padding: 0 4px 0 4px; gap: 8px; background: transparent; border: 0; flex: none; }
.top-search { display: inline-flex; align-items: center; gap: 9px; height: 36px; width: min(380px, 42vw); padding: 0 16px 0 13px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-3); font-size: 12.5px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color .32s var(--smooth), box-shadow .32s var(--smooth); }
.top-search span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-search svg { width: 16px; height: 16px; }
.top-search:hover { border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.top-clock { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 11px; border-radius: 99px; background: var(--surface);
  border: 1px solid var(--border); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.top-clock b { font-family: var(--font-mono); font-weight: 500; color: var(--text); font-size: 12px; }
.top-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); animation: topPulse 2.4s ease-out infinite; }
@keyframes topPulse { 70% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.top-icon { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer; padding: 0; transition: color .32s var(--smooth), border-color .32s var(--smooth), box-shadow .32s var(--smooth); }
.top-icon:hover { color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.top-icon svg { width: 17px; height: 17px; }
.top-icon:focus-visible, .top-search:focus-visible, #topbar .user-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* O botão de tema vira só o ícone (sol/lua) */
.top-icon.theme-toggle { width: 34px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
.top-icon.theme-toggle > svg, .top-icon.theme-toggle > span { display: none; }
.top-icon.theme-toggle .tswitch { width: auto; height: auto; background: none !important; box-shadow: none; border: 0; display: grid; place-items: center; }
.top-icon.theme-toggle .tswitch-knob { position: static; transform: none !important; width: auto; height: auto; background: none; box-shadow: none; display: grid; place-items: center; color: inherit; }
.top-icon.theme-toggle .tswitch-knob svg { width: 17px; height: 17px; }
/* Usuário à direita */
#topbar .user-chip { width: auto; max-width: 240px; height: 40px; padding: 3px 12px 3px 4px; gap: 9px; border-radius: 99px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow-sm); transition: border-color .32s var(--smooth), box-shadow .32s var(--smooth); }
#topbar .user-chip:hover { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
#topbar .user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
#topbar .user-meta strong { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#topbar .user-meta small { font-size: 11px; color: var(--text-3); }
#topbar .user-chev { width: 14px; height: 14px; color: var(--text-3); }
.top-logo { display: none; }
@media (max-width: 1100px) { .top-clock span { display: none; } }
@media (max-width: 900px) {
  /* Celular: a busca fica no botão "Buscar" da barra de baixo; aqui só notificações, tema e usuário */
  #topbar { padding: 8px 12px 0; min-height: 0; justify-content: flex-end; }
  .top-search, .top-clock { display: none; }
  #topbar .user-meta { display: none; }
  #topbar .user-chip { padding: 3px; }
  body[data-route="agenda"] #topbar { display: none; }
  .top-logo { display: flex; align-items: center; margin-right: auto; color: var(--text); line-height: 0; }
  .top-logo .bk-logo { height: 20px; width: auto; }
}

/* ---------- Títulos de página ---------- */
.page-head { margin-bottom: 16px; align-items: center; }
.page-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.page-head p { font-size: 13px; color: var(--text-3); }

/* ---------- Botões: pílulas finas; os coloridos com chanfro discreto ---------- */
.btn { height: 34px; padding: 0 15px; font-size: 12.5px; font-weight: 500; border-radius: 99px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: background .32s var(--smooth), border-color .32s var(--smooth), color .32s var(--smooth), box-shadow .32s var(--smooth), transform .2s var(--smooth); }
.btn:hover { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn svg { width: 16px; height: 16px; }
.btn.sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn.primary { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 82%, white) 0%, var(--primary) 100%); border: 0; color: var(--on-primary); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 color-mix(in srgb, var(--primary) 78%, black), var(--shadow-amber); }
.btn.primary:hover { background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 88%, black) 100%); border: 0; color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 color-mix(in srgb, var(--primary) 70%, black), var(--shadow-amber-hover); transform: translateY(-1px); }
.btn.danger { border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .25); }
.btn.ghost, .btn.danger-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--surface-warm); }
.icon-btn { border-radius: 50%; transition: background .32s var(--smooth), color .32s var(--smooth); }
.chip-btn { background: var(--surface-2); font-size: 11.5px; font-weight: 500; }
.chip-btn:hover { background: var(--surface-warm); color: var(--primary-ink); }

/* ---------- Cartões, painéis e KPIs: brancos, borda fina, sombra leve; os clicáveis sobem um pouco ---------- */
.card, .panel, .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: border-color .42s var(--smooth), box-shadow .42s var(--smooth), transform .42s var(--smooth); }
.panel { padding: 16px 18px; }
.panel-title, .card-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -.015em; font-family: var(--font-display); }
.kpi { padding: 13px 16px; gap: 5px; }
.kpi-top { font-size: 12px; font-weight: 500; color: var(--text-2); }
.kpi strong { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.kpi small { font-size: 11.5px; }
:is(.kpi, .panel, .card):is([data-go], [data-route], .clickable, [role="button"]):hover,
a.kpi:hover, button.kpi:hover { transform: translateY(-1.5px); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: var(--shadow-hover); }
/* Blocos dentro de cartões e janelas: fundo levemente afundado em vez de outro cartão com sombra */
:where(.card, .panel, .modal, .popover, .drawer, .booking-card, .lock-card) :is(.panel, .kpi, .offer-card, .goal-card, .rv-card, .nf-partner, .nf-status, .plan-card, .wa-card) {
  background: var(--surface-2); border-color: transparent; box-shadow: none; }

/* ---------- Tabelas: dentro de cartão, cabeçalho afundado, linhas compactas, hover quente ---------- */
.table { font-size: 12.5px; }
.table th { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); background: var(--surface-2); padding: 10px 14px; }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--grid); }
.table td.num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.table tr.clickable:hover td, .table tr.clickable:focus-visible td { background: var(--surface-warm); }
.table tr.clickable td { transition: background .32s var(--smooth); }
.card > .table-wrap:first-child .table th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
.card > .table-wrap:first-child .table th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
.pager { border-top-color: var(--grid); }

/* ---------- Etiquetas (situação, avisos): tom pastel chapado, sem contorno ---------- */
.badge { height: 21px; padding: 0 9px; font-size: 11px; font-weight: 600; border: 0; box-shadow: none; }
.nav-badge { font-weight: 600; }

/* ---------- Abas e segmentados: trilho afundado, ativa branca com texto dourado escuro ---------- */
.tabs:not(.card-toolbar .tabs) { background: var(--surface-2); border-radius: 99px; padding: 3px; width: fit-content; max-width: 100%; }
.tabs button { height: 30px; padding: 0 14px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.tabs button:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.tabs button.active { background: var(--surface); color: var(--primary-ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.card-toolbar .tabs button.active { background: var(--surface-warm); box-shadow: none; }
.modal-content > .tabs { background: none; padding: 0 20px; border-radius: 0; width: auto; }

/* ---------- Campos: brancos com borda fina; ao focar, borda dourada e anel suave ---------- */
:root:root :where(.field) :where(input:not([type=checkbox], [type=radio], [type=color], [type=file], [type=range]), select, textarea),
:root:root :where(.sm-input, .notes-area, .status-select, .qty-step, .unit-input) {
  background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--field-r);
  transition: border-color .32s var(--smooth), box-shadow .32s var(--smooth), background-color .32s var(--smooth); }
:root:root :where(.field) :where(input, select, textarea):hover:not(:focus, :disabled, [readonly]),
:root:root :where(.sm-input, .notes-area, .status-select, .qty-step, .unit-input):hover:not(:focus, :focus-within) { background-color: var(--surface); border-color: var(--border-strong); }
:root:root :where(.field) :where(input, select, textarea):focus,
:root:root :where(.sm-input, .notes-area):focus,
:root:root :where(.qty-step, .unit-input):focus-within,
:root:root .status-select:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
:root:root .field > span { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.search input, input[type=search] { border-radius: 99px; }
/* Dentro de janelas e cartões, campos no mesmo branco do fundo da janela ficariam sem contraste: borda já resolve */

/* ---------- Janelas, menus e balões ---------- */
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.modal-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.modal-foot { border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface-2); }
.menu, .dd-list, .popover { border-radius: 14px; box-shadow: var(--shadow); border: 0; }
.palette-box { border-radius: 20px; box-shadow: var(--shadow); }
.toast { border-radius: 99px; }

/* ---------- Chip do caixa (Painel, Comandas): pílula branca ---------- */
.cash-chip { border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.cash-chip.open { border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }

/* ---------- Entrada da página: desliza 8px para cima, sem tranco ---------- */
.view-enter > * { animation: pageIn .3s var(--smooth) both; } /* a classe sai em 320 ms (core.js) */
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .top-pulse, .view-enter > * { animation: none; }
  .btn.primary:hover, :is(.kpi, .panel, .card):hover { transform: none !important; }
}

/* ==========================================================================
   Etapa 2 — Painel
   ========================================================================== */
/* Avisos do topo: pílulas finas na cor de cada aviso (chapadas, sem contorno) */
.alerts { gap: 8px; margin-bottom: 14px; }
.alert-chip { height: 30px; padding: 0 13px; border-radius: 99px; font-size: 12px; font-weight: 500; gap: 7px; background: var(--surface-warm); color: var(--primary-ink);
  transition: transform .32s var(--smooth), box-shadow .32s var(--smooth), filter .32s var(--smooth); }
.alert-chip:hover { filter: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.alert-chip svg { width: 15px; height: 15px; }
.alert-chip.info { background: var(--info-bg); color: var(--info-ink); }
.alert-chip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.alert-chip.amber { background: var(--warn-bg); color: var(--warn-ink); }
.alert-chip.warn { background: var(--surface-warm); color: var(--primary-ink); }
.alert-chip.danger { background: var(--danger-bg); color: var(--danger-ink); }

/* Etiqueta pastel genérica (usada no Painel e nas próximas telas) */
.pn-tag { display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--surface-warm); color: var(--primary-ink); flex: none; }
.pn-tag.ok { background: var(--ok-bg); color: var(--ok-ink); }
.pn-tag.warn { background: var(--warn-bg); color: var(--warn-ink); }
.pn-tag.danger { background: var(--danger-bg); color: var(--danger-ink); }
.pn-tag.info { background: var(--info-bg); color: var(--info-ink); }
.pn-sub { margin: 2px 0 0; font-size: 12px; color: var(--text-3); }
.pn-eyebrow { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--primary-ink); }

/* Cartões de número: título + ícone em quadradinho dourado, valor, etiqueta */
.pn-kpis { gap: 12px; margin-bottom: 14px; }
.pn-kpi { cursor: default; }
.pn-kpi[data-go] { cursor: pointer; }
.pn-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pn-kpi-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-warm); color: var(--primary-ink); flex: none;
  transition: background .42s var(--smooth), color .42s var(--smooth); }
.pn-kpi-ico svg { width: 16px; height: 16px; }
.pn-kpi[data-go]:hover .pn-kpi-ico { background: var(--primary); color: var(--on-primary); }
.pn-kpi strong { margin-top: 2px; }
.pn-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 21px; }
.pn-kpi-foot small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-kpi:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Gráfico de área */
.pn-analytics { gap: 12px; margin-bottom: 14px; }
.pn-analytics .panel-head { align-items: flex-start; margin-bottom: 8px; }
.pn-head-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pn-chart { position: relative; min-height: 180px; }
.pn-chart svg { display: block; width: 100%; height: auto; max-width: none; overflow: visible; touch-action: pan-y; }
.pn-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.pn-grid.base { stroke-dasharray: none; }
.pn-axis { font-family: var(--font-body, Inter, system-ui, sans-serif); font-size: 11px; font-weight: 400; fill: var(--text-3); stroke: none; font-variant-numeric: tabular-nums; }
.pn-area { stroke: none; }
.pn-line { fill: none; stroke: var(--primary); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.pn-dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.pn-guide { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .2s; }
.pn-hot { fill: var(--primary); stroke: var(--surface); stroke-width: 2.5; opacity: 0; transition: opacity .2s; }
.pn-chart.hover .pn-guide, .pn-chart.hover .pn-hot { opacity: 1; }
.pn-tip { position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md, 0 8px 24px -10px rgba(0,0,0,.25));
  display: flex; flex-direction: column; align-items: center; white-space: nowrap; opacity: 0; transition: opacity .18s, left .12s var(--smooth), top .12s var(--smooth); }
.pn-tip small { font-size: 11px; color: var(--text-3); }
.pn-tip b { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pn-chart.hover .pn-tip { opacity: 1; }
/* Entrada: a área e a linha se abrem da esquerda para a direita, a escala sobe e os pontos aparecem em sequência */
.pn-chart.chart-in:not(.pn-still) .pn-plot { animation: pnReveal 1.1s cubic-bezier(.22, 1, .36, 1) both; }
.pn-chart.chart-in:not(.pn-still) .pn-area { animation: pnRise 1.1s cubic-bezier(.22, 1, .36, 1) both; transform-box: fill-box; transform-origin: bottom; }
.pn-chart.chart-in:not(.pn-still) .pn-axis { animation: pnFade .6s var(--smooth) both; }
.pn-chart.chart-in:not(.pn-still) .pn-dot { animation: pnPop .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.25s + var(--i) * 35ms); }
@keyframes pnReveal { from { clip-path: inset(-10px 100% -10px 0); } to { clip-path: inset(-10px 0 -10px 0); } }
@keyframes pnRise { from { transform: scaleY(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pnPop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pnFade { from { opacity: 0; } to { opacity: 1; } }

/* Seletor em trilho (período do gráfico, abas do movimento) */
.pn-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 99px; background: var(--surface-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pn-seg button { height: 26px; padding: 0 11px; border: 0; border-radius: 99px; background: none; font: inherit; font-size: 12px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap;
  transition: background .32s var(--smooth), color .32s var(--smooth), box-shadow .32s var(--smooth); }
.pn-seg button:hover { color: var(--text); }
.pn-seg button.on { background: var(--surface); color: var(--primary-ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.pn-seg button em { font-style: normal; font-size: 11px; color: var(--text-3); margin-left: 3px; }
.pn-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Meta do mês: anel + valor, e as linhas do ritmo */
.pn-goal { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 12px; background: var(--surface-warm); margin-bottom: 10px; }
.pn-goal > div { display: flex; flex-direction: column; min-width: 0; }
.pn-goal small { font-size: 12.5px; color: var(--text-2); }
.pn-goal-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0 1px; }
.pn-ring { width: 84px; height: 84px; flex: none; }
.pn-ring-track { fill: none; stroke: color-mix(in srgb, var(--primary) 18%, transparent); stroke-width: 8; }
.pn-ring-fill { fill: none; stroke: var(--primary); stroke-width: 8; stroke-linecap: round; stroke-dashoffset: var(--off); animation: pnRing 1.1s var(--smooth) both; }
@keyframes pnRing { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--off); } }
.pn-ring-text { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; fill: var(--text); stroke: none; }
.pn-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--border); font-size: 12.5px; color: var(--text-2); }
.pn-lines > div:last-child { border-bottom: 0; }
.pn-lines strong { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--text); }
.pn-lines strong.ok-text { color: var(--ok-ink); }
.pn-lines strong.warn-text { color: var(--warn-ink); }

/* Movimento (tabela com abas) */
.pn-flow { margin-bottom: 14px; }
.pn-flow .card-toolbar { padding: 14px 16px; align-items: flex-start; }
.pn-flow .panel-title { margin: 0; }
.pn-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pn-flow .table td.muted { color: var(--text-2); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-empty { padding: 8px 0 18px; }

/* Listas dos cartões de baixo */
.grid-3 { gap: 12px; }
.rem-item { border-radius: 10px; transition: background .32s var(--smooth); }
.rem-item:hover { background: var(--surface-warm); }
.team-list { gap: 10px; }
.team-row { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }

@media (max-width: 1100px) {
  .pn-head-tools .link-btn { display: none; }
}
@media (max-width: 900px) {
  .pn-goal { padding: 12px; }
  .pn-flow .card-toolbar { flex-direction: column; }
  .pn-flow .table th:nth-child(3), .pn-flow .table td:nth-child(3), .pn-flow .table th:nth-child(4), .pn-flow .table td:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pn-chart .pn-plot, .pn-chart .pn-area, .pn-chart .pn-axis, .pn-chart .pn-dot, .pn-ring-fill { animation: none !important; }
}
@media (max-width: 600px) {
  .pn-kpi-foot small { display: none; }
  .pn-kpi .kpi-top { font-size: 11.5px; }
  .pn-analytics .panel-head { flex-direction: column; }
}

/* ==========================================================================
   Etapa 3 — Agenda, Comandas e Clientes (e os componentes que elas usam)
   ========================================================================== */
/* Botõezinhos de escolha (formas de pagamento rápidas, filtros): pílula branca com borda, legível em qualquer fundo */
.chip-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); height: 26px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px;
  transition: border-color .32s var(--smooth), color .32s var(--smooth), background .32s var(--smooth); }
.chip-btn:hover { background: var(--surface); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary-ink); }
.quick-pay { gap: 6px; }

/* Campos dentro de blocos afundados (endereço, configurações da ficha): continuam brancos com borda */
:root:root .cf-acc :where(.field) :where(input, select, textarea):not(:focus):not(:hover) { background-color: var(--surface); }
:root:root .acc.cf-acc { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius); }

/* Menu da ficha (cliente, profissional, voucher…): como o menu lateral, pílula dourada com barrinha à esquerda */
.ficha-nav { padding: 12px 10px; gap: 2px; }
.ficha-nav button { position: relative; border-right: 0; margin: 0; padding: 0 12px; min-height: 38px; border-radius: 10px; font-size: 13px; font-weight: 500;
  transition: background .32s var(--smooth), color .32s var(--smooth); }
.ficha-nav button:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.ficha-nav button.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.ficha-nav button.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
@media (max-width: 900px) {
  .ficha-nav { padding: 6px 8px; gap: 4px; }
  .ficha-nav button { min-height: 34px; padding: 0 12px; border-radius: 99px; border-bottom: 0; }
  .ficha-nav button.active { border-bottom: 0; }
  .ficha-nav button.active::before { display: none; }
}

/* Agenda: a grade num cartão branco com borda; horários em fonte de números; linha do "agora" dourada */
@media (min-width: 901px) {
  .calendar-wrap { border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: var(--radius); }
}
.fc .fc-timegrid-slot-label-cushion { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-3); }
.fc .fc-col-header-cell-cushion { font-weight: 600; color: var(--text); }
.fc .fc-timegrid-now-indicator-line { border-color: var(--primary); }
.fc .fc-timegrid-now-indicator-arrow { border-color: var(--primary); border-top-color: transparent; border-bottom-color: transparent; }
.fc .fc-timegrid-event, .fc .fc-daygrid-event { border-radius: 8px; transition: box-shadow .32s var(--smooth), transform .32s var(--smooth), filter .32s var(--smooth); }
.fc .fc-timegrid-event:hover { box-shadow: var(--shadow-hover); z-index: 5 !important; }

/* Comanda: caixas de totais e pagamentos com borda fina, como os cartões */
.comanda-modal :is(.sum-box, .pay-box, .cmd-side > div) { border: 1px solid var(--border); }

/* ==========================================================================
   Etapa 4 — Cadastros (Profissionais, Serviços, Produtos) e componentes que eles usam
   ========================================================================== */
/* Listas de escolha em formulário (ui.dropdown campo): brancas com borda, como os outros campos */
:root:root .dd-btn.dd-field, :root:root .svc-row .dd-btn.dd-field:not(:hover):not([aria-expanded="true"]):not(:focus-visible) {
  background: var(--surface); border: 1px solid var(--border); transition: border-color .32s var(--smooth), box-shadow .32s var(--smooth); }
:root:root .dd-btn.dd-field:hover:not(:disabled) { background: var(--surface); border-color: var(--border-strong); }
:root:root .dd-btn.dd-field[aria-expanded="true"], :root:root .dd-btn.dd-field:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.dd-btn:not(.dd-field) { background: var(--surface); border: 1px solid var(--border); }
.dd-btn:not(.dd-field):hover:not(:disabled) { background: var(--surface); border-color: var(--border-strong); }
.dd-rich .dd-search { background: var(--surface-2); }

/* Buscas dentro das páginas: pílula branca com borda (a da barra do topo é igual) */
.search input { background: var(--surface); border: 1px solid var(--border); height: 36px; font-size: 12.5px; transition: border-color .32s var(--smooth), box-shadow .32s var(--smooth); }
.search input:hover { border-color: var(--border-strong); }
.search input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.palette .search input { border: 0; box-shadow: none; height: 44px; font-size: 14px; }

/* Cartões de profissional: sobem um pouco ao passar o mouse */
.pro-cards { gap: 12px; }
.pro-card { padding: 16px 18px; gap: 10px; }
.pro-card:hover { background: var(--surface); transform: translateY(-1.5px); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: var(--shadow-hover); }
.pro-card h3, .pro-card strong:first-child { font-family: var(--font-display); }

/* Serviços: linha da categoria com fundo afundado e nome em destaque */
tbody[data-cat] > tr:first-child td { font-family: var(--font-display); }
/* Linha do serviço no editor de agendamento: campos brancos dentro do bloco afundado */
:root:root .svc-row :where(.field) :where(input, select):not(:focus):not(:hover) { background-color: var(--surface); }
:root:root .svc-row { border: 1px solid var(--border); border-radius: var(--radius); }
:root:root .svc-row .dd-combo input:not(:focus):not(:hover), :root:root .dd-combo input:not(:focus):not(:hover) { background-color: var(--surface); }

/* ==========================================================================
   Etapa 5 — Gestão (Caixa, Financeiro, Comissões, Relatórios, Metas, Notas)
   ========================================================================== */
/* A fonte de números vale só para o valor: botões e etiquetas na coluna continuam na fonte normal */
.table td.num :is(.btn, .badge, .pn-tag, .chip-btn, .row-btns, .link-btn, small) { font-family: var(--font-body); }
/* Barras de progresso (metas, ocupação, relatórios): trilho suave e preenchimento arredondado */
.goal-bar { background: color-mix(in srgb, var(--primary) 14%, var(--surface-2)); border-radius: 99px; overflow: hidden; }
.goal-bar span { border-radius: 99px; transition: width .7s var(--smooth); }
/* Navegação de mês (Metas, Financeiro): pílula branca com borda */
.month-nav { background: var(--surface); border: 1px solid var(--border); border-radius: 99px; box-shadow: var(--shadow-sm); padding: 2px; }
.month-nav strong { font-family: var(--font-display); font-size: 13.5px; }
/* Caixa fechado/aberto: bloco de aviso com borda */
.cash-closed { border: 1px solid var(--border); }

/* ==========================================================================
   Etapa 6 — Marketing (Automação, Vouchers, Promoções, Cashback, Agendamento online)
   ========================================================================== */
/* Título de coluna que ordena (botão dentro do cabeçalho): mesmo padrão dos outros títulos */
.table th :is(button, a) { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; }
/* Cartões de campanha da automação: sobem um pouco ao passar o mouse */
.auto-card, .camp-card { transition: transform .42s var(--smooth), box-shadow .42s var(--smooth), border-color .42s var(--smooth); }
.auto-card:hover, .camp-card:hover { transform: translateY(-1.5px); box-shadow: var(--shadow-hover); }
/* Prévia da mensagem do WhatsApp: balão com cantos do tema */
.wa-bubble, .msg-preview { border-radius: 12px; }

/* ==========================================================================
   Etapa 7 — Configurações e Meu plano
   ========================================================================== */
/* Menu das Configurações: cartão branco com borda; item aberto em dourado claro com a barrinha à esquerda */
.settings-nav { border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 8px; }
.settings-nav button { position: relative; min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 500; transition: background .32s var(--smooth), color .32s var(--smooth); }
.settings-nav button:hover { background: var(--surface-2); color: var(--text); }
.settings-nav button.active { background: var(--surface-warm); color: var(--text); font-weight: 600; }
.settings-nav button.active svg { color: var(--primary-ink); }
.settings-nav button.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
@media (max-width: 900px) {
  .settings-nav button.active::before { display: none; }
}
/* Meu plano: preço em destaque na fonte de títulos */
.plan-price, .sub-price { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }

/* ==========================================================================
   Etapa 8 — Fora do sistema: login, agendamento do cliente, painel do parceiro, admin, painel do WhatsApp
   ========================================================================== */
/* Agendamento do cliente: cartões brancos com borda; opções (serviço, profissional, horário) brancas que acendem no hover */
.booking-card { border: 1px solid var(--border); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
:root:root .booking-card .choice, .choice { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .32s var(--smooth), background .32s var(--smooth), box-shadow .32s var(--smooth), transform .32s var(--smooth); }
:root:root .booking-card .choice:hover:not(:disabled), .choice:hover:not(:disabled) { background: var(--surface-warm); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.choice.on, :root:root .booking-card .choice.on { background: var(--surface-warm); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.choice strong { font-weight: 600; }
.slot-btn { border-radius: 99px; border: 1px solid var(--border); background: var(--surface); font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  transition: border-color .32s var(--smooth), background .32s var(--smooth), color .32s var(--smooth); }
.slot-btn:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--surface-warm); }
/* Painel admin e do parceiro: mesmo menu flutuante e cartões do sistema (vêm das regras gerais deste arquivo) */

/* ==========================================================================
   Mais animações de mouse (como a demo AmberFlow)
   ========================================================================== */
/* Botões: sobem 1px; os brancos ganham borda e texto dourados */
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn:not(.primary):not(.danger):not(.ghost):not(.danger-ghost):hover:not(:disabled) { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary-ink); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn.ghost:hover, .btn.danger-ghost:hover { transform: none; box-shadow: none; }
.link-btn { border-radius: 99px; padding: 4px 9px; margin: -4px 0; font-weight: 600; transition: background-color .28s var(--smooth), color .28s var(--smooth); }
.link-btn:hover { background: var(--surface-warm); color: var(--primary-ink); text-decoration: none; }
/* Cartões de número: todos sobem; o ícone acende. Painéis: só a sombra e a borda */
.kpi:hover { transform: translateY(-1.5px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.panel:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
:where(.card, .panel, .modal, .popover, .drawer, .booking-card, .lock-card) .kpi:hover { transform: none; box-shadow: none; border-color: transparent; }
/* Entrada em sequência dos cartões de número ao abrir a página */
.view-enter .kpis > * { animation: pageIn .42s var(--smooth) both; }
.view-enter .kpis > :nth-child(2) { animation-delay: 40ms; }
.view-enter .kpis > :nth-child(3) { animation-delay: 80ms; }
.view-enter .kpis > :nth-child(4) { animation-delay: 120ms; }
.view-enter .kpis > :nth-child(n+5) { animation-delay: 160ms; }
/* Barra do topo e botão de recolher o menu: borda dourada no hover */
.top-search:hover, .top-clock:hover, #topbar .user-chip:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.top-icon:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary-ink); }
.sb-toggle { transition: left .2s ease, color .28s var(--smooth), border-color .28s var(--smooth), transform .28s var(--smooth); }
.sb-toggle:hover { transform: scale(1.08); }
/* Listas (retornos, aniversariantes, busca): fundo dourado claro no hover */
.rem-item:hover { background: var(--surface-warm); }
.palette-results .gs-item { border-radius: 12px; transition: background-color .22s var(--smooth); }
.palette-results .gs-item.active, .palette-results .gs-item:hover { background: var(--surface-2); }
.gs-ico { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-2); color: var(--text); flex: none; transition: background .22s var(--smooth), box-shadow .22s var(--smooth); }
.gs-ico svg { width: 16px; height: 16px; }
.gs-item.active .gs-ico, .gs-item:hover .gs-ico { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--primary-ink); }
.gs-sec { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.gs-go { margin-left: auto; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .kpi:hover, .sb-toggle:hover { transform: none !important; }
  .view-enter .kpis > * { animation: none; }
}
.palette .search { display: flex; align-items: center; }
.gs-esc { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); background: var(--surface-2); border-radius: 6px; padding: 2px 7px; pointer-events: none; }
.palette .search input { padding-right: 52px; }
@media (max-width: 900px) { .gs-esc { display: none; } }

/* ==========================================================================
   Checape das janelas: sólidas e brancas (sem o vidro translúcido antigo), como pede o DESIGN-CUSTOM.md
   ========================================================================== */
:root:root :is(.modal, .drawer, .palette-box, .menu, .popover, .dd-list) { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root:root .modal-foot { background: var(--surface-2); }
:root:root .ficha-nav { background: var(--surface-2); }
@media (max-width: 900px) {
  :root:root .sidebar { background: var(--sb-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Menus suspensos: sombra flutuante, borda fina, itens com cantos de 10px e ícone que acende */
.menu { border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; }
.menu-item { min-height: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; transition: background-color .22s var(--smooth), color .22s var(--smooth); }
.menu-item:hover { background: var(--surface-2); }
.menu-item:hover svg { color: var(--primary-ink); }
.menu-item svg { transition: color .22s var(--smooth); }
.dd-list { border-radius: 14px; padding: 6px; }
.dd-list button { border-radius: 10px; transition: background-color .22s var(--smooth); }
.dd-list button:hover, .dd-list button:focus-visible { background: var(--surface-2); }
.popover { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
/* Menus de filtro: sem barra de rolagem lateral; pílulas de período brancas com borda, a escolhida em dourado claro */
.menu { overflow-x: hidden; }
.cmd-periods button { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-weight: 500;
  transition: border-color .22s var(--smooth), background-color .22s var(--smooth), color .22s var(--smooth); }
.cmd-periods button:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--primary-ink); }
.cmd-periods button.on { background: var(--surface-warm); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary-ink); font-weight: 600; }
.menu-title { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
/* Listas nativas que sobraram fora dos campos de formulário (ex.: Profissional em "Adicionar à comanda", forma de pagamento):
   mesmo visual dos outros campos, com a seta do sistema */
:where(.modal, .card, .panel, .view, .menu) select:not([multiple]):not(.unit-input select):not(.field select) {
  appearance: none; -webkit-appearance: none; height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--border); border-radius: var(--field-r);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 15px;
  color: var(--text); font-size: 13px; cursor: pointer; transition: border-color .32s var(--smooth), box-shadow .32s var(--smooth); }
:where(.modal, .card, .panel, .view, .menu) select:not([multiple]):not(.unit-input select):not(.field select):hover { border-color: var(--border-strong); }
:where(.modal, .card, .panel, .view, .menu) select:not([multiple]):not(.unit-input select):not(.field select):focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); outline: none; }
/* Campos compostos (valor com R$/% ou − / +): a borda fica só no contorno de fora, nunca nas partes de dentro */
:root:root :is(.unit-input, .qty-step) :is(input, select) { border: 0 !important; box-shadow: none !important; background-color: transparent !important; height: 100%; }
:root:root .unit-input select { appearance: none; -webkit-appearance: none; padding: 0 22px 0 12px; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center / 12px !important;
  border-right: 1px solid var(--border) !important; border-radius: 0; }
:root:root .unit-input select + input { padding-left: 10px; }
/* Nos cabeçalhos dos cartões o link recua para alinhar o texto com a borda (o fundo dourado aparece só no hover) */
:is(.panel-head, .card-head, .card-toolbar) > .link-btn, .pn-head-tools > .link-btn { margin-right: -9px; }
.menu .link-btn { margin: 0; }

/* ==========================================================================
   Cartão de número (todas as páginas): ícone num quadradinho no canto, na cor do tom do cartão
   ========================================================================== */
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; font-style: normal;
  background: var(--surface-warm); color: var(--primary-ink); transition: background .42s var(--smooth), color .42s var(--smooth); }
.kpi-ico svg { width: 15px; height: 15px; }
.kpi.tone-ok .kpi-ico { background: var(--ok-bg); color: var(--ok-ink); }
.kpi.tone-warn .kpi-ico { background: var(--warn-bg); color: var(--warn-ink); }
.kpi.tone-danger .kpi-ico { background: var(--danger-bg); color: var(--danger-ink); }
.kpi:hover .kpi-ico { background: var(--primary); color: var(--on-primary); }
:where(.card, .panel, .modal) .kpi .kpi-ico { background: var(--surface); }

/* ==========================================================================
   Relatórios (layout da demo AmberFlow)
   ========================================================================== */
.report-tabs.pn-seg { display: flex; width: fit-content; max-width: 100%; margin-bottom: 14px; padding: 3px; gap: 2px; }
.report-tabs.pn-seg button { height: 32px; padding: 0 13px; gap: 7px; border: 0; background: none; border-radius: 99px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.report-tabs.pn-seg button svg { width: 15px; height: 15px; color: var(--text-3); transition: color .32s var(--smooth); }
.report-tabs.pn-seg button:hover { color: var(--text); }
.report-tabs.pn-seg button.on { background: var(--surface); color: var(--primary-ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.report-tabs.pn-seg button.on svg { color: var(--primary-ink); }
.rp-quick button { height: 30px; }
.report-body > .table-wrap, .report-body > [data-list] > .table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.report-body .panel-head { align-items: flex-start; margin-bottom: 10px; }
.report-body .sec-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 4px 0 10px; }
/* Rosca da composição */
.rp-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 4px 0; }
.rp-donut-ring { position: relative; width: 150px; height: 150px; flex: none; }
.rp-donut-ring svg { width: 100%; height: 100%; display: block; }
.rp-track { fill: none; stroke: var(--surface-2); stroke-width: 22; }
.rp-arc { fill: none; stroke-width: 22; animation: pnFade .7s var(--smooth) both; }
.rp-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rp-donut-c strong { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.rp-donut-c small { font-size: 11px; color: var(--text-3); }
.rp-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 9px; }
.rp-legend > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; font-size: 12.5px; }
.rp-legend span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); min-width: 0; }
.rp-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rp-legend b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; }
.rp-legend em { font-style: normal; font-size: 11px; color: var(--text-3); min-width: 34px; text-align: right; }
/* Gráficos de barras e barras horizontais: cantos arredondados, trilho dourado suave, números na fonte de números */
.bc-stack { width: min(20px, 60%); }
.bc-stack i:last-child, .bc-group i { border-radius: 6px 6px 2px 2px; }
.bc-col { border-radius: 8px 8px 0 0; }
.bc-col:hover, .bc-col:focus-visible { background: var(--surface-warm); }
.bc-y span, .bc-x span { font-family: var(--font-mono); font-size: 10.5px; }
.bc-grid i { background: var(--border); opacity: .6; }
.hbar-track, .progress { background: color-mix(in srgb, var(--primary) 12%, var(--surface-2)); height: 8px; }
.hbar-label strong { font-family: var(--font-mono); font-weight: 500; font-size: 12px; }
.chart-tip { border-radius: 12px; box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .rp-quick { display: none; }
  .report-tabs.pn-seg { overflow-x: auto; }
}

/* ==========================================================================
   Menu lateral (DESIGN-CUSTOM.md: "active indicators glide smoothly"; ícones só mudam de cor, sem girar nem pular)
   Duas pílulas que deslizam por trás dos itens (app.js, bindNavGlide):
   - .act: a pílula dourada com a barrinha à esquerda, que corre até o item da página aberta
   - .hov: a pílula clara que acompanha o mouse de item em item
   Os itens não se mexem.
   ========================================================================== */
.has-glide { position: relative; }
.nav-glide { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 10px; pointer-events: none; opacity: 0; display: block;
  transition: transform .4s var(--smooth), width .4s var(--smooth), height .4s var(--smooth), opacity .25s var(--smooth); }
.nav-glide.act { background: var(--sb-active-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb-accent) 28%, transparent); }
.nav-glide.act::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-accent); }
.nav-glide.hov { background: var(--sb-hover); }
.nav-glide.no-anim { transition: none !important; }
.has-glide .nav-item { z-index: 1; background: transparent !important; box-shadow: none !important; transform: none !important; }
.has-glide .nav-item::before { display: none !important; }
.has-glide .nav-item > svg { transition: color .32s var(--smooth); }
.has-glide .nav-item:hover { color: var(--sb-fg); }
.has-glide .nav-item:hover > svg { color: var(--sb-fg); }
.has-glide .nav-item.active, .has-glide .nav-item.active:hover { color: var(--sb-fg); }
.has-glide .nav-item.active > svg { color: var(--sb-accent); }
@media (prefers-reduced-motion: reduce) { .nav-glide { transition: opacity .15s; } }

/* ==========================================================================
   Pílulas estreitas (DESIGN-CUSTOM.md: altura 21–32px, lado 8–12px, letra 11–12px) — como na demo
   ========================================================================== */
.btn { height: 32px; padding: 0 12px; gap: 6px; font-size: 12px; font-weight: 600; }
.btn svg { width: 14px; height: 14px; }
.btn.sm { height: 27px; padding: 0 10px; font-size: 11.5px; }
.btn.sm svg { width: 13px; height: 13px; }
.chip-btn { height: 24px; padding: 0 10px; font-size: 11.5px; }
.alert-chip { height: 28px; padding: 0 12px; font-size: 11.5px; }
.cash-chip { height: 32px; font-size: 12px; }
.badge, .pn-tag { height: 21px; padding: 0 8px; font-size: 11px; }
.icon-btn { width: 30px; height: 30px; }
.top-icon { width: 32px; height: 32px; }
#topbar .user-chip { height: 38px; }

/* Seletor em trilho: fundo afundado com contorno fino; a escolhida é uma pílula branca estreita com sombra leve.
   Vale para todas as abas do sistema (páginas, cartões, janelas), os períodos rápidos e os relatórios. */
.pn-seg, .tabs, .report-tabs.pn-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; width: fit-content; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; box-shadow: none; overflow-x: auto; scrollbar-width: none; }
.card-toolbar .tabs, .modal-content > .tabs { background: var(--surface-2); border: 1px solid var(--border); padding: 2px; border-radius: 99px; width: fit-content; }
.modal-content > .tabs { margin: 0 0 14px; }
:is(.pn-seg, .tabs, .report-tabs.pn-seg) button { height: 26px; padding: 0 10px; gap: 5px; border: 0; border-radius: 99px; background: transparent;
  font-size: 11.5px; font-weight: 600; color: var(--text-2); box-shadow: none; white-space: nowrap;
  transition: background-color .28s var(--smooth), color .28s var(--smooth), box-shadow .28s var(--smooth); }
:is(.pn-seg, .tabs, .report-tabs.pn-seg) button svg { width: 13px; height: 13px; }
:is(.pn-seg, .tabs, .report-tabs.pn-seg) button:hover { color: var(--text); background: transparent; }
:is(.pn-seg button.on, .tabs button.active, .report-tabs.pn-seg button.on, .card-toolbar .tabs button.active) {
  background: var(--surface); color: var(--primary-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
:root[data-theme="dark"] :is(.pn-seg button.on, .tabs button.active, .report-tabs.pn-seg button.on) { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.tabs .tab-count, .pn-seg button em { font-size: 10.5px; padding: 0 6px; border-radius: 99px; background: var(--surface); color: var(--text-3); font-style: normal; }
.tabs button.active .tab-count { background: var(--surface-warm); color: var(--primary-ink); }
.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) { .toolbar-right .rp-quick { display: none; } }

/* ==========================================================================
   Menu lateral ao passar o mouse: pequeno zoom e um leve deslize para o lado (a pílula dourada continua deslizando entre as páginas)
   ========================================================================== */
.nav-glide.hov { display: none; }
.has-glide .nav-item { transform-origin: left center; transition: transform .5s cubic-bezier(.25,.8,.3,1), background-color .5s cubic-bezier(.25,.8,.3,1), color .5s cubic-bezier(.25,.8,.3,1); }
.has-glide .nav-item:not(.active):hover { background: var(--sb-hover) !important; transform: translateX(2px) scale(1.012) !important; }
.has-glide .nav-item:not(.active):active { transform: translateX(2px) scale(.995) !important; }
.sb-collapsed .has-glide .nav-item:not(.active):hover { transform: scale(1.035) !important; }
@media (prefers-reduced-motion: reduce) { .has-glide .nav-item:not(.active):hover { transform: none !important; } }
/* Itens do menu um pouco apagados; ao passar o mouse acendem (soma ao zoom + deslize). O da página aberta fica aceso. */
.has-glide .nav-item:not(.active) { opacity: .9; transition: transform .5s cubic-bezier(.25,.8,.3,1), background-color .5s cubic-bezier(.25,.8,.3,1), color .5s cubic-bezier(.25,.8,.3,1), opacity .5s cubic-bezier(.25,.8,.3,1); }
.has-glide .nav-item:not(.active):hover, .has-glide .nav-item:not(.active):focus-visible { opacity: 1; }
.has-glide .nav-item.active { opacity: 1; }

/* ---------- Cor do botão pelo sentido (data-tone, marcado em ui.js) ----------
   Verdes: ok = confirmar, wa = WhatsApp, in = entrada de dinheiro.
   Vermelhos: out = saída de dinheiro, warn = atenção/aviso.
   Principal: cheio na cor. Secundário: fundo claro com o texto na cor. */
:root {
  --tone-ok: #16a34a; --tone-ok-ink: #15803d;
  --tone-wa: #1da851; --tone-wa-ink: #128c43;
  --tone-in: #059669; --tone-in-ink: #047857;
  --tone-out: #e11d48; --tone-out-ink: #be123c;
  --tone-warn: #dc2626; --tone-warn-ink: #b91c1c;
}
:root[data-theme="dark"] {
  --tone-ok-ink: #4ade80; --tone-wa-ink: #3ddc84; --tone-in-ink: #34d399; --tone-out-ink: #fb7185; --tone-warn-ink: #f87171;
}
[data-tone="ok"] { --tc: var(--tone-ok); --ti: var(--tone-ok-ink); }
[data-tone="wa"] { --tc: var(--tone-wa); --ti: var(--tone-wa-ink); }
[data-tone="in"] { --tc: var(--tone-in); --ti: var(--tone-in-ink); }
[data-tone="out"] { --tc: var(--tone-out); --ti: var(--tone-out-ink); }
[data-tone="warn"] { --tc: var(--tone-warn); --ti: var(--tone-warn-ink); }
:root:root:root .btn[data-tone]:not(.primary):not(.ghost) {
  background: color-mix(in srgb, var(--tc) 9%, var(--surface)); border-color: color-mix(in srgb, var(--tc) 30%, var(--border)); color: var(--ti);
}
:root:root:root .btn[data-tone]:not(.primary):not(.ghost):hover:not(:disabled) {
  background: color-mix(in srgb, var(--tc) 15%, var(--surface)); border-color: color-mix(in srgb, var(--tc) 50%, var(--border)); color: var(--ti);
}
:root:root .btn[data-tone].ghost { color: var(--ti); }
:root:root .btn[data-tone].ghost:hover { background: color-mix(in srgb, var(--tc) 10%, transparent); }
:root:root .btn.primary[data-tone] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 80%, white) 0%, var(--tc) 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 color-mix(in srgb, var(--tc) 70%, black), 0 6px 16px -6px color-mix(in srgb, var(--tc) 55%, transparent);
}
:root:root .btn.primary[data-tone]:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--tc) 0%, color-mix(in srgb, var(--tc) 85%, black) 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 color-mix(in srgb, var(--tc) 62%, black), 0 10px 22px -8px color-mix(in srgb, var(--tc) 60%, transparent);
}
:root:root .icon-btn[data-tone] { color: var(--ti); }
:root:root .icon-btn[data-tone]:hover { background: color-mix(in srgb, var(--tc) 12%, transparent); color: var(--ti); }

/* ---------- Recolher/abrir o menu lateral: só a largura desliza, o resto espera o fim (sb-anim, app.js) ---------- */
@media (min-width: 901px) {
  .sidebar { transition: background .2s, width .32s cubic-bezier(.22, .8, .24, 1); }
  .sb-toggle { transition: left .32s cubic-bezier(.22, .8, .24, 1), color .15s, border-color .15s; }
  .sb-toggle svg { transition: transform .32s cubic-bezier(.22, .8, .24, 1); }
  :root.sb-collapsed { --sidebar-w: 68px; } /* o :root do tema (238px) vencia o .sb-collapsed do styles.css */
  .sb-anim .sidebar { overflow: hidden; pointer-events: none; }
  .sb-anim .sidebar * { white-space: nowrap; }
  .sb-anim .nav-items, .sb-anim .nav-item, .sb-anim .nav-label { transition: none !important; }
  .sb-anim .nav-glide { opacity: 0 !important; transition: none !important; }
  .sb-anim .main { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .sb-toggle { transition: none; } }

/* ---------- Troca de tema: a bola cresce a partir do botão (app.js, View Transitions) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: none !important; }

/* ---------- Trilho de pílulas: a pílula branca desliza (ui.js, .seg-glide) ---------- */
.has-seg-glide { position: relative; }
.seg-glide { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 99px; pointer-events: none; opacity: 0;
  background: var(--surface); box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
  transition: transform .42s cubic-bezier(.22, .9, .24, 1), width .42s cubic-bezier(.22, .9, .24, 1), height .42s cubic-bezier(.22, .9, .24, 1), opacity .2s ease; }
:root[data-theme="dark"] .seg-glide { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.has-seg-glide > button { position: relative; z-index: 1; }
:root:root .has-seg-glide > :is(button.on, button.active, button[aria-selected="true"]) { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .seg-glide { transition: opacity .15s; } }

/* ---------- Janela aberta por cima: o fundo fica desfocado ---------- */
:root { --backdrop: rgba(15, 23, 42, .32); }
:root[data-theme="dark"] { --backdrop: rgba(0, 0, 0, .5); }
.modal-backdrop, .drawer-backdrop, .palette, .sidebar-backdrop.open {
  -webkit-backdrop-filter: blur(7px) saturate(.9); backdrop-filter: blur(7px) saturate(.9);
  animation: backdrop-in .32s cubic-bezier(.22, .9, .24, 1) both;
}
@keyframes backdrop-in {
  from { opacity: 0; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); }
  to { opacity: 1; -webkit-backdrop-filter: blur(7px) saturate(.9); backdrop-filter: blur(7px) saturate(.9); }
}
.ui-ghost { -webkit-backdrop-filter: blur(7px) saturate(.9); backdrop-filter: blur(7px) saturate(.9); } /* ao fechar, o desfoque some junto */

/* ---------- Janelas: partes separadas por linha, não por fundo cinza ---------- */
:root:root .ficha-nav { background: var(--surface); border-right: 1px solid var(--border); }
:root:root .modal-foot { background: var(--surface); border-top: 1px solid var(--border); }
.ficha-nav button:hover { background: var(--surface-2); }
.ficha-nav button.active { background: var(--surface-warm); color: var(--text); box-shadow: none; }
:root[data-theme="dark"] .ficha-nav button.active { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
@media (max-width: 900px) {
  :root:root .ficha-nav { border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ---------- Regra do dono: separar por linha, não por fundo cinza ----------
   Caixas que ficavam em --surface-2 viram branco com 1px de linha. Mesmos seletores das regras originais
   (mesmo peso), então os estados de selecionado/ativo, que pesam mais, continuam valendo. */
.info-grid > div, .st-system, .stat, .pop-svc, .pop-notes, .client-card:has(.cc-main), .svc-row, .sum-box, .pay-box, .meta-box,
.mini-kpis > div, .pkg-card, .saving-box, .cash-closed, .pay-inst, .data-action, .acc-inline, .client-chip, .promo-ex,
.upsell-plan, .sub-info-item, .usage-feats summary, .addon-row, .install-steps li, .refer-code, .partner-coupon, .pix-saved,
.tier-box, .kit-item, .partner-sums, .inv-row, .cb-choice, .aq-item, .wa-qm-item, .auto-ext, .nf-text, .br-item, .rv-pro,
.ge-item, .link-row, .goal-ref, .logo-field, .osvc-row, .goal-bonus, .goal-bonus-foot, .svc-ret-days, .imp-file, .cmd-log li,
.team-row, .choice, .day-btn, .vch-type, .rv-card.is-hidden {
  background: var(--surface); border: 1px solid var(--border);
}
@media (max-width: 900px) { .com-card { background: var(--surface); border: 1px solid var(--border); } }
.choice, .day-btn { border-color: var(--border); }
.vch-type { border-width: 1.5px; border-color: var(--border); }
:where(.card, .panel, .modal, .popover, .drawer, .booking-card, .lock-card) :is(.panel, .kpi, .offer-card, .goal-card, .rv-card, .nf-partner, .nf-status, .plan-card, .wa-card) {
  background: var(--surface); border: 1px solid var(--border); box-shadow: none;
}
:root:root .toggle-row { background: var(--surface); border: 1px solid var(--border); }
:root:root .check-grid .check { background: var(--surface); border: 1px solid var(--border); }
:root:root .acc.cf-acc { background: var(--surface); border: 1px solid var(--border); }
.auto-extra-body { background: var(--surface); }
/* Rodapés e cabeçalhos: linha em vez de faixa cinza */
.pop-foot { background: var(--surface); border-top: 1px solid var(--border); }
.table th { background: var(--surface); border-bottom: 1px solid var(--border); }
.table tfoot td { background: var(--surface); }
.psv-cat td, .svc-table tr.svc-cat td { background: var(--surface); border-bottom: 1px solid var(--border); }
.fc .fc-list-day-cushion { background: var(--surface); }

/* Abas no topo do cartão (Cashback, Notas fiscais): o trilho com respiro, sem colar na borda */
.nf-head { padding: 14px 16px 4px; }
:root:root .nf-head .tabs, :root:root .cb-tabs .tabs { padding: 2px; }
.cb-card .cb-off { margin: 12px 16px 0; }
.nf-head .nf-tab-tools { padding: 0; }

/* Comanda: dados de abertura/histórico discretos, sem caixa */
:root:root .meta-box.cmd-meta { background: none; border: 0; padding: 2px 4px; gap: 3px; font-size: 11.5px; color: var(--text-3); }
.cmd-meta .link-btn.cmd-hist { align-self: flex-start; margin: 0; padding: 0; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.cmd-meta .link-btn.cmd-hist svg { width: 12px; height: 12px; color: currentColor; }
.cmd-meta .link-btn.cmd-hist:hover { color: var(--text); text-decoration: underline; }

/* Botões agrupados no menu "Ações" (ui.groupActions) */
.btn.in-actions { display: none !important; }
.btn[data-actions-menu] .act-chev { display: inline-flex; margin-left: -2px; }
.btn[data-actions-menu] .act-chev svg { width: 13px; height: 13px; opacity: .6; }
@media (max-width: 900px) { .page-actions > [data-actions-menu], [data-actions-menu].act-hide-sm { display: none; } }
.imp-drop { background: var(--surface); } /* o tracejado já separa */
/* Celular: rodapé das janelas com vários botões (comanda): linhas cheias, o principal na linha inteira */
@media (max-width: 600px) {
  .foot-flex > .btn { flex: 1 1 auto; justify-content: center; }
  .foot-flex > .btn.primary { flex-basis: 100%; } /* o principal (Fechar comanda, Concluir) ocupa a linha inteira */
}

/* Agendamento online: etapas com linha em vez de fundo cinza; no celular só a etapa atual mostra o nome (as quatro cabem) */
.steps { scrollbar-width: none; }
.step { background: var(--surface); border: 1px solid var(--border); transition: background-color .3s var(--smooth), color .3s var(--smooth), padding .3s var(--smooth); }
.step span { background: var(--surface-2); }
.step.on { background: var(--surface-warm); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.step.done { border-color: color-mix(in srgb, var(--ok) 30%, var(--border)); }
@media (max-width: 600px) {
  .steps { gap: 6px; }
  .step:not(.on) { font-size: 0; gap: 0; padding: 4px; }
}
.day-strip { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.slot-btn { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 13px; }

/* ---------- Etiqueta "Novo" (js/novidades.js): no caminho até cada novidade ---------- */
.novo-tag { display: inline-flex; align-items: center; flex: none; height: 16px; padding: 0 6px; margin-left: 6px; border-radius: 99px;
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
  background: var(--primary); color: var(--on-primary); vertical-align: middle; pointer-events: none; }
.nav-item > .novo-tag { margin-left: auto; }
.nav-item > .nav-badge:not([hidden]) ~ .novo-tag { margin-left: 4px; }
button.nav-label > .novo-tag { margin-left: 4px; font-size: 8.5px; height: 14px; padding: 0 5px; }
.sb-collapsed .novo-tag { display: none; }
.ficha-nav button > .novo-tag, .tabs button > .novo-tag, .pn-seg button > .novo-tag { margin-left: 4px; }
.menu-item > .novo-tag { margin-left: auto; }
/* Suporte com ponto quando há versão nova não aberta */
#helpBtn { position: relative; }
#helpBtn.has-novo::after { content: ""; position: absolute; top: 9px; left: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--sb-bg); }
/* Janela Novidades */
.nov-list { display: grid; gap: 14px; }
.nov-rel { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.nov-rel:last-child { border-bottom: 0; padding-bottom: 0; }
.nov-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.nov-head .novo-tag { margin-left: 0; }
.nov-rel ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; color: var(--text-2); }

/* ---------- Profissional › Expediente › Datas e horários personalizados ----------
   Grade de 2 colunas: títulos alinhados à esquerda (Quando / Horário / Descrição) e o conteúdo ao lado. */
.ch-card { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
  transition: border-color .3s var(--smooth), background-color .3s var(--smooth); }
.ch-card.is-off { background: color-mix(in srgb, var(--danger) 3%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 22%, var(--border)); }
.ch-card [hidden] { display: none !important; }
.ch-lbl { font-size: 12px; font-weight: 600; color: var(--text-3); }
.ch-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ch-dates, .ch-to { display: inline-flex; align-items: center; gap: 8px; }
.ch-card em { font-style: normal; font-size: 12px; color: var(--text-3); }
.ch-date { display: inline-flex; width: 168px; }
.ch-date .dd-btn { width: 100%; height: 36px; }
.ch-push { flex: 1; }
.ch-card.is-off .ch-seg button.on { color: var(--danger-ink); }
.ch-del { color: var(--text-3); }
.ch-del:hover { color: var(--danger-ink); background: var(--danger-bg); }
.ch-times { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-times .ch-lbl-in { margin-left: 18px; }
/* campo de horário do sistema (ui.timeField): caixa estreita com o relógio dentro */
:root:root .ch-card .dd-time, :root:root .hours-row .dd-time { width: 104px; flex: none; }
:root:root .ch-card .dd-time input, :root:root .hours-row .dd-time input, .ch-desc {
  width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; background: var(--surface);
  color: var(--text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
:root:root .ch-card .dd-time input, :root:root .hours-row .dd-time input { padding-right: 30px; }
:root:root .ch-card .dd-time input:focus, :root:root .hours-row .dd-time input:focus, .ch-desc:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.ch-off-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--danger-ink); }
.ch-off-note svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
  .ch-card { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; }
  .ch-card > .ch-lbl:not(:first-child) { margin-top: 6px; }
  .ch-card > .ch-lbl:empty { display: none; }
  .ch-push { display: none; }
  .ch-dates { flex-wrap: wrap; }
  .ch-date { width: 150px; }
  .ch-times .ch-lbl-in { margin-left: 0; flex-basis: 100%; margin-top: 4px; }
}
:root:root .ch-date .dd-btn { height: 36px; min-height: 36px; font-size: 13px; }
/* Expediente da semana: colunas do tamanho dos campos, linhas com linha fina, dia sem expediente apagado */
@media (min-width: 901px) {
  .hours-table { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
  .hours-row { grid-template-columns: minmax(130px, 1fr) repeat(4, 112px); gap: 10px; padding: 7px 14px; border-top: 1px solid var(--border); }
  .hours-row.head { border-top: 0; padding-top: 9px; padding-bottom: 9px; }
  .hours-row.head span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
}
.hours-row:has([data-h=on]:not(:checked)) .dd-time { opacity: .4; }
.hours-row:has([data-h=on]:not(:checked)) .check { color: var(--text-3); }
.hours-row .dd-time { transition: opacity .3s var(--smooth); }
@media (max-width: 640px) { .ch-date { width: 172px; } }

/* Agendamento online › Sua página: foto de capa (mesmo formato do campo do logo) */
.cover-field { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.cover-field > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cover-field small { display: block; }
.cover-field .row-actions { margin-top: 8px; }
.cover-prev { flex: none; width: 200px; aspect-ratio: 16 / 6; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--text-3); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--primary) 40%, white) 0%, transparent 60%), color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.cover-prev svg { width: 16px; height: 16px; }
.cover-prev img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .cover-field { flex-direction: column; align-items: stretch; } .cover-prev { width: 100%; } }

/* Voltar do passo a passo para o mini site */
.ms-back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.ms-back:hover { color: var(--text); }
.ms-back svg { width: 16px; height: 16px; }

/* ======================================================================
   Mini site do estabelecimento (reservar.html › renderSite em js/public-booking.js)
   Simples, com cara de site: capa arredondada, nome em serifada, seções em blocos arredondados separados por tom
   (sem linhas, sem sombras em repouso). Fundo claro (padrão) ou escuro, escolhido pelo estabelecimento
   (settings.onlinePageTheme). Botões na cor do estabelecimento, texto pelo contraste (--m-on).
   ====================================================================== */
body.msite-on { background: #f4f3f0; }
body.msite-on.msite-dark { background: #121110; }
.msite {
  --g: #f4f3f0; --s: #ffffff; --s2: #f0eeea; --ink: #1d1a16; --soft: #6a645c;
  --serif: var(--font-display);
  max-width: 720px; margin: 0 auto; padding: 20px 16px 120px; color: var(--ink); font-family: Inter, system-ui, sans-serif;
  display: flex; flex-direction: column; gap: 12px;
}
.msite.dark { --g: #121110; --s: #1c1b19; --s2: #262522; --ink: #f1efeb; --soft: #a39d94; }
.msite h1, .msite h2, .msite h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.msite a { color: inherit; }
.msite img { display: block; }

/* Botões: redondos, cor chapada */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 18px; border-radius: 99px;
  background: var(--primary); color: var(--m-on); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--smooth), filter .25s var(--smooth), background-color .25s var(--smooth); }
.m-btn svg { width: 16px; height: 16px; }
.m-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.m-btn:active { transform: scale(.98); }
.m-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: 2px; }
.m-btn.ghost { background: var(--s2); color: var(--ink); }
.m-btn.big { height: 50px; padding: 0 26px; font-size: 15px; }

/* Capa e identificação */
.m-head { padding-bottom: 8px; }
.m-cover { margin: 0 0 20px; aspect-ratio: 16 / 8; border-radius: 24px; overflow: hidden; background: var(--s2); }
.m-cover img { width: 100%; height: 100%; object-fit: cover; animation: m-zoom 1.2s var(--smooth) both; }
@keyframes m-zoom { from { transform: scale(1.05); opacity: 0; } to { transform: none; opacity: 1; } }
.m-idrow { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.m-mark .brand-mark { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.m-idtext { min-width: 0; }
.m-idtext h1 { font-size: clamp(22px, 3.6vw, 28px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.m-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 3px 0 0; font-size: 13px; color: var(--soft); }
.m-open { display: inline-flex; align-items: center; gap: 7px; }
.m-open i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--soft) 60%, transparent); }
.m-open.on { color: #15803d; }
.msite.dark .m-open.on { color: #6ee7a0; }
.m-open.on i { background: #22c55e; animation: m-pulse 2.4s infinite; }
@keyframes m-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.m-dot::before { content: "·"; margin-right: 12px; }
.m-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0 4px; }

/* Seções: blocos arredondados */
.m-sec { background: var(--s); border-radius: 24px; padding: 28px 28px 30px; }
.m-sec h2 { font-size: 24px; line-height: 1.15; margin-bottom: 16px; }
.m-sec h3 { font-size: 18px; line-height: 1.1; margin: 26px 0 14px; }
.m-text { margin: 0 0 .75em; font-size: 16px; line-height: 1.6; color: var(--ink); }
.m-soft { color: var(--soft); }

/* Nossos serviços: só as categorias */
.m-cats { list-style: none; margin: 0 -12px; padding: 0; }
.m-cat { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 14px 12px; border-radius: 14px; text-decoration: none;
  transition: background-color .22s var(--smooth); }
.m-cat:hover, .m-cat:focus-visible { background: var(--s2); outline: none; }
.m-cat-name { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.m-cat small { grid-column: 1; font-size: 14px; color: var(--soft); }
.m-cat i { grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); color: var(--ink);
  transition: transform .25s var(--smooth), background-color .25s var(--smooth); }
.m-cat i svg { width: 16px; height: 16px; }
.m-cat:hover i { transform: translateX(3px); background: var(--primary); color: var(--m-on); }

/* Horário e pagamento */
.m-hours p { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.m-hours p.closed { color: var(--soft); }
.m-pays { margin: 14px 0 0; font-size: 14px; color: var(--soft); }

/* Equipe */
.m-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 18px; }
.m-team li { display: flex; align-items: center; gap: 12px; }
.m-face { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; }
.m-ini { display: grid; place-items: center; font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--s)); }
.m-team b { display: block; font-size: 15px; font-weight: 600; }
.m-team small { display: block; font-size: 14px; color: var(--soft); }

/* Fotos */
.m-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-tile { padding: 0; border: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; background: var(--s2); }
.m-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--smooth); }
.m-tile:hover img { transform: scale(1.05); }

/* Fechamento: chamada + contatos */
.m-end { text-align: center; }
.m-end .m-text { max-width: 40ch; margin: 0 auto 18px; color: var(--soft); }
.m-end h2 { margin-bottom: 18px !important; }
.m-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 24px; }
.m-contacts a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--soft); text-decoration: none; }
.m-contacts a:hover { color: var(--ink); }
.m-contacts svg { width: 16px; height: 16px; flex: none; }
.m-imprint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 13px; color: var(--soft); }
.m-imprint .bk-logo { height: 15px; width: auto; }
.msite.dark .m-imprint .bk-logo { color: var(--ink); }

/* Barra "Agendar horário" quando os botões do topo saem da tela (a única sombra: ela flutua) */
.m-dock { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30; transform: translate(-50%, 160%); transition: transform .45s var(--smooth); }
.m-dock.on { transform: translate(-50%, 0); }
.m-dock .m-btn { box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .45); }

/* Entrada suave */
.m-idrow, .m-acts { animation: m-rise .8s var(--smooth) both; }
.m-acts { animation-delay: .08s; }
@keyframes m-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.m-anim .m-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--smooth), transform .7s var(--smooth); }
.m-anim .m-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .m-cover img, .m-idrow, .m-acts, .m-open.on i { animation: none; }
  .m-anim .m-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 640px) {
  .msite { padding: 10px 10px 110px; gap: 10px; }
  .m-cover { aspect-ratio: 4 / 3; border-radius: 20px; margin-bottom: 16px; }
  .m-sec { padding: 22px 18px 24px; border-radius: 20px; }
  .m-sec h2 { font-size: 22px; }
  .m-hours p { font-size: 17px; }
  .m-acts .m-btn { flex: 1 1 auto; }
  .m-tiles { grid-template-columns: repeat(2, 1fr); }
  .m-dock { width: calc(100% - 32px); }
  .m-dock .m-btn { width: 100%; }
}
@media (max-width: 640px) { .m-lead { flex-direction: column; align-items: flex-start; gap: 2px; } .m-dot::before { display: none; } }
.page-theme-row { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-bottom: 12px; }
.page-theme-row > .pn-seg { flex: none; }
.page-theme-row > span { display: flex; flex-direction: column; gap: 2px; }
/* Agendamento dentro do mini site: mesmo fundo, topo só com logo e nome, sem o cabeçalho próprio do passo a passo */
.msite-book .booking-head { display: none; }
.msite-book .m-head-min { padding: 6px 0 10px; }
.msite-book .booking-main { margin-top: 0; }
.msite-book .booking-powered { margin-top: 18px; }
.msite.dark.msite-book { --surface: #1c1b19; --surface-2: #262522; --text: #f1efeb; --text-2: #cfc9c0; --text-3: #a39d94; --border: #34322e; --border-strong: #46433e;
  --fill: rgba(255, 255, 255, .06); --fill-hover: rgba(255, 255, 255, .1); --surface-warm: color-mix(in srgb, var(--primary) 16%, #1c1b19); --bg: #121110; }
.msite-book .m-head-min .m-idtext h1 { font-size: 16px; line-height: 1.25; font-weight: 600; }
.msite-book .m-head-min .m-mark .brand-mark { width: 40px; height: 40px; border-radius: 11px; font-size: 16px; }
.msite-book .m-head-min .m-lead { font-size: 13px; margin-top: 2px; }
/* Fundo escuro: tons claros da cor principal (resumo, item escolhido, etapa atual) viram tons escuros, com texto legível */
.msite.dark.msite-book { --primary-50: color-mix(in srgb, var(--primary) 16%, #1c1b19); --primary-100: color-mix(in srgb, var(--primary) 26%, #1c1b19);
  --primary-ink: color-mix(in srgb, var(--primary) 50%, #ffffff); --ok-bg: color-mix(in srgb, #22c55e 18%, #1c1b19); --ok: #6ee7a0; }
.msite.dark.msite-book .booking-summary, .msite.dark.msite-book .booking-summary span { color: var(--text); }
.msite.dark.msite-book .booking-summary svg { color: var(--primary-ink); }
/* Botão do usuário no topo: foto centralizada (o span ficava como bloco e a foto subia uns pixels) */
#topbar .user-chip { align-items: center; }
#topbar #userAvatar { display: flex; align-items: center; flex: none; }
#topbar #userAvatar .avatar { width: 32px; height: 32px; }
@media (max-width: 900px) { #topbar .user-chip { height: 40px; padding: 0 8px 0 3px; gap: 4px; } }

/* Central de notificações (sino do topo, js/notificacoes.js) */
#topBell { position: relative; }
.bell-dot { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px var(--surface);
  animation: nt-dot .35s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
@keyframes nt-dot { from { transform: scale(0); } to { transform: none; } }
/* Aviso de notificação nova, canto de baixo à direita (no celular, acima da barra de baixo) */
.nt-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1300; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.nt-toast { pointer-events: auto; position: relative; display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(15, 17, 23, .4); opacity: 0; transform: translateX(24px); transition: opacity .25s var(--smooth), transform .3s var(--smooth); }
.nt-toast.in { opacity: 1; transform: none; }
.nt-toast-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 12px 6px 12px 12px; border: 0; background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; border-radius: 14px; }
.nt-toast-x { flex: none; align-self: flex-start; width: 28px; height: 28px; margin: 8px 8px 0 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--text-3); cursor: pointer; }
.nt-toast-x:hover { color: var(--text); background: var(--surface-2); }
.nt-toast-x svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .nt-toasts { right: 16px; left: 16px; width: auto; bottom: calc(var(--dock-space, 84px) + 8px); } }
.nt-pop { position: fixed; z-index: 1200; width: min(380px, calc(100vw - 16px)); max-height: min(520px, calc(100vh - 90px)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); box-shadow: 0 24px 60px -20px rgba(15, 17, 23, .35);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .18s var(--smooth), transform .22s var(--smooth); }
.nt-pop.in { opacity: 1; transform: none; }
.nt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.nt-head b { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.nt-cfg { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 4px 6px; border-radius: 8px; font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; }
.nt-cfg:hover { color: var(--text); background: var(--fill, var(--surface-2)); }
.nt-cfg svg { width: 14px; height: 14px; }
.nt-list { overflow-y: auto; padding: 4px 6px 8px; overscroll-behavior: contain; }
.nt-sec { margin: 10px 10px 4px; font-size: 11.5px; font-weight: 500; color: var(--text-3); }
.nt-item { position: relative; width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: start; gap: 10px; padding: 10px; border: 0; border-radius: 12px;
  background: none; font: inherit; text-align: left; color: var(--text); cursor: pointer; transition: background-color .2s var(--smooth); }
.nt-item:hover, .nt-item:focus-visible { background: var(--primary-50); outline: none; }
.nt-item.unread::after { content: ""; position: absolute; top: 15px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.nt-item.unread time { margin-right: 12px; }
.nt-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.nt-ico svg { width: 16px; height: 16px; }
.nt-ico.info { background: color-mix(in srgb, #3b82f6 13%, transparent); color: #2563eb; }
.nt-ico.ok { background: color-mix(in srgb, #22c55e 14%, transparent); color: #15803d; }
.nt-ico.bad { background: color-mix(in srgb, #e5484d 13%, transparent); color: #c62a2f; }
.nt-ico.warn { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.nt-ico.brand { background: var(--primary-50); color: var(--primary-ink); }
:root[data-theme="dark"] .nt-ico.info { color: #7cb0ff; }
:root[data-theme="dark"] .nt-ico.ok { color: #6ee7a0; }
:root[data-theme="dark"] .nt-ico.bad { color: #ff8a8d; }
:root[data-theme="dark"] .nt-ico.warn { color: #fbbf5a; }
.nt-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nt-main b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.nt-item:not(.unread) .nt-main b { font-weight: 500; }
.nt-main small { font-size: 12px; color: var(--text-2); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nt-item time { font-size: 11px; color: var(--text-3); white-space: nowrap; padding-top: 2px; }
.nt-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 34px 20px 30px; text-align: center; color: var(--text-2); }
.nt-empty svg { width: 26px; height: 26px; color: var(--text-3); margin-bottom: 6px; }
.nt-empty b { font-size: 14px; color: var(--text); font-weight: 600; }
.nt-empty small { font-size: 12.5px; max-width: 30ch; }
@media (prefers-reduced-motion: reduce) { .nt-pop, .bell-dot, .nt-toast { transition: none; animation: none; } }

/* Menu do usuário: título da parte "No celular" */
.menu-html .menu-sec { display: block; padding: 6px 12px 2px; font-size: 11.5px; font-weight: 500; color: var(--text-3); }

/* Meu perfil (js/pages/perfil.js) */
.pf-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.pf-wrap .card { margin: 0; padding: 18px 20px 8px; }
.pf-wrap .card:first-child { padding-bottom: 18px; }
.pf-wrap .sec-title { margin: 0 0 12px; }
.pf-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.pf-wrap .sec-title + .pf-row { border-top: 0; padding-top: 4px; }
.pf-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--text-2); }
.pf-ico svg { width: 16px; height: 16px; }
.pf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-txt strong { font-size: 13.5px; font-weight: 600; }
.pf-txt small { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.pf-row .btn { flex: none; }
.pf-wrap .acc-photo small + small { margin-top: 4px; }
@media (max-width: 600px) { .pf-row { flex-wrap: wrap; align-items: flex-start; } .pf-txt { flex-basis: calc(100% - 46px); } .pf-row .btn { margin-left: 46px; } }

/* Admin › Erros das telas */
.err-list { display: flex; flex-direction: column; gap: 10px; }
.err-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.err-top { display: flex; align-items: flex-start; gap: 14px; }
.err-msg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.err-msg strong { font-family: var(--font-mono); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.err-msg small { font-size: 12px; }
.err-num { flex: none; text-align: right; display: flex; flex-direction: column; line-height: 1.1; }
.err-num b { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.err-num small { font-size: 11px; color: var(--text-3); }
.err-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-2); }
.err-stack summary { cursor: pointer; font-size: 12px; color: var(--text-2); }
.err-stack pre { margin: 8px 0 0; padding: 10px 12px; max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.err-acts { display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); padding-top: 8px; }

/* Admin › Funil (CRM) */
.crm-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.crm-bar .search { flex: 1; min-width: 220px; max-width: 420px; }
.crm-bar select { height: 38px; }
.crm-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; scroll-snap-type: x proximity; }
.crm-col { flex: 0 0 272px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); display: flex; flex-direction: column; max-height: calc(100vh - 230px); transition: border-color .2s, box-shadow .2s; }
.crm-col.over { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.crm-col header { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--border); }
.crm-col header i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.crm-col header b { font-size: 13.5px; font-weight: 600; }
.crm-col header em { font-style: normal; font-size: 12px; color: var(--text-3); }
.crm-auto { margin-left: auto; font-size: 10.5px; color: var(--text-3); border: 1px solid var(--border); border-radius: 99px; padding: 0 7px; line-height: 17px; }
.crm-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; overflow-y: auto; min-height: 80px; }
.crm-empty { margin: 14px 0; text-align: center; font-size: 12px; color: var(--text-3); }
.crm-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: grab; transition: box-shadow .2s var(--smooth), transform .2s var(--smooth), border-color .2s; }
.crm-card:hover, .crm-card:focus-visible { border-color: var(--border-strong); box-shadow: var(--shadow-sm); outline: none; }
.crm-card.dragging { opacity: .45; }
.crm-card strong { font-size: 13.5px; font-weight: 600; line-height: 1.3; padding-right: 44px; overflow-wrap: anywhere; }
.crm-card > small.muted { font-size: 12px; }
.crm-ago { position: absolute; top: 11px; right: 12px; font-size: 11px; color: var(--text-3); }
.crm-chips, .crm-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-acc, .crm-next, .crm-tags span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.crm-acc.trial { color: #2563eb; border-color: color-mix(in srgb, #3b82f6 35%, transparent); }
.crm-acc.ok { color: #15803d; border-color: color-mix(in srgb, #22c55e 40%, transparent); }
.crm-acc.warn { color: #b45309; border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.crm-acc.bad { color: #c62a2f; border-color: color-mix(in srgb, #ef4444 40%, transparent); }
.crm-next svg { width: 12px; height: 12px; }
.crm-next.today { color: #b45309; border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.crm-next.late { color: #c62a2f; border-color: color-mix(in srgb, #ef4444 40%, transparent); font-weight: 600; }
.crm-tags span { color: var(--text-3); }
:root[data-theme="dark"] .crm-acc.trial { color: #7cb0ff; } :root[data-theme="dark"] .crm-acc.ok { color: #6ee7a0; }
:root[data-theme="dark"] .crm-acc.warn, :root[data-theme="dark"] .crm-next.today { color: #fbbf5a; }
:root[data-theme="dark"] .crm-acc.bad, :root[data-theme="dark"] .crm-next.late { color: #ff8a8d; }
.btn.active { border-color: var(--primary); color: var(--primary-ink); }
.page-actions .btn .nav-badge { margin-left: 2px; }
/* Para hoje */
.crm-today { padding: 6px; }
.crm-due { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 10px; }
.crm-due:last-child { border-bottom: 0; }
.crm-due:hover { background: var(--primary-50); }
.crm-due > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crm-stage-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.crm-stage-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
/* Ficha */
.crm-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.crm-ficha.solo { grid-template-columns: 1fr; }
.crm-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.crm-account { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.crm-account-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-account .info-grid { grid-template-columns: 1fr 1fr; }
/* Prospecção (admin › Funil): mensagem pronta para mandar pelo Instagram */
.crm-prospect .crm-account-top svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.crm-pitch { border-top: 1px solid var(--border); padding-top: 10px; }
.crm-pitch p { margin: 4px 0 0; white-space: pre-wrap; line-height: 1.5; }
.crm-phone { display: flex; gap: 6px; align-items: stretch; }
.crm-phone .btn { height: auto; min-width: 44px; justify-content: center; }
.crm-phone input { flex: 1; min-width: 0; }
.crm-next-row { display: grid; grid-template-columns: 200px 104px 1fr; gap: 8px; }
.crm-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; border-left: 1px solid var(--border); padding-left: 20px; }
.crm-log textarea { width: 100%; resize: vertical; min-height: 76px; }
.crm-log-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.crm-log-btns { display: flex; gap: 6px; }
.crm-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.crm-timeline li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.crm-timeline li:last-child { border-bottom: 0; }
.crm-tl-ico { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-3); }
.crm-tl-ico svg { width: 14px; height: 14px; }
.crm-timeline li.k-contato .crm-tl-ico { color: #15803d; border-color: color-mix(in srgb, #22c55e 40%, transparent); }
.crm-timeline li.k-conta .crm-tl-ico { color: #2563eb; border-color: color-mix(in srgb, #3b82f6 35%, transparent); }
:root[data-theme="dark"] .crm-timeline li.k-contato .crm-tl-ico { color: #6ee7a0; }
:root[data-theme="dark"] .crm-timeline li.k-conta .crm-tl-ico { color: #7cb0ff; }
.crm-timeline p { margin: 0; font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-timeline small { font-size: 11.5px; color: var(--text-3); }
.crm-stage-edit { display: flex; flex-direction: column; gap: 8px; }
.crm-stage-row { display: grid; grid-template-columns: 40px 1fr 36px; gap: 8px; align-items: center; }
.crm-stage-row input[type=color] { width: 40px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
@media (max-width: 900px) {
  .crm-ficha { grid-template-columns: 1fr; }
  .crm-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
  .crm-next-row { grid-template-columns: 1fr 96px; }
  .crm-next-row input[name=next_what] { grid-column: 1 / -1; }
  .crm-col { flex-basis: 82vw; max-height: none; }
}
/* Admin no celular: não tem a barra flutuante do app, então os botões do topo da página ficam na página */
@media (max-width: 900px) {
  body.admin-page .page-head .page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  body.admin-page .page-head .page-actions > .btn { display: inline-flex; }
}

/* Admin › Conversas (WhatsApp do Bukme): três cartões (lista, conversa, contato) nas cores do Bukme */
.wa-chip i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent); }
.wa-chip.warn i { background: #f59e0b; } .wa-chip.bad i { background: #ef4444; }
:root {
  --wa-out: color-mix(in srgb, var(--primary) 17%, var(--surface)); --wa-out-line: color-mix(in srgb, var(--primary) 34%, var(--border));
  --wa-in: var(--surface); --wa-wall: color-mix(in srgb, var(--bg) 70%, var(--surface)); --wa-dot: color-mix(in srgb, var(--text) 7%, transparent);
  --wa-sub: var(--text-3); --wa-ok: #15803d; --wa-ok-bg: color-mix(in srgb, #22c55e 12%, var(--surface)); --wa-warn: #b45309; --wa-warn-bg: color-mix(in srgb, #f59e0b 13%, var(--surface));
  --wa-bad: #b91c1c; --wa-bad-bg: color-mix(in srgb, #ef4444 11%, var(--surface)); --wa-shadow: 0 1px 2px rgba(15, 17, 23, .06);
}
:root[data-theme="dark"] {
  --wa-out: color-mix(in srgb, var(--primary) 20%, var(--surface)); --wa-wall: color-mix(in srgb, var(--bg) 60%, #000);
  --wa-ok: #4ade80; --wa-warn: #fbbf24; --wa-bad: #f87171; --wa-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.wa-shell { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; height: calc(100vh - 170px); min-height: 500px; }
.wa-shell.side-open { grid-template-columns: 340px minmax(0, 1fr) 330px; }
.wa-shell:not(.side-open) .wa-side { display: none; }
.wa-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-sm, none); overflow: clip; min-height: 0; min-width: 0; }

/* pílulas (situação, etapa, etiquetas) */
.wa-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; line-height: 1; padding: 5px 9px; border-radius: 999px; white-space: nowrap; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); }
.wa-pill svg { width: 13px; height: 13px; flex: none; }
.wa-pill b { font-weight: 700; }
.wa-pill.ok { color: var(--wa-ok); background: var(--wa-ok-bg); border-color: transparent; }
.wa-pill.warn { color: var(--wa-warn); background: var(--wa-warn-bg); border-color: transparent; }
.wa-pill.bad { color: var(--wa-bad); background: var(--wa-bad-bg); border-color: transparent; }
.wa-pill.stage { color: var(--st); background: color-mix(in srgb, var(--st) 13%, var(--surface)); border-color: transparent; font-weight: 600; }

/* lista */
.wa-list { display: flex; flex-direction: column; }
.wa-list-top { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 0; border-bottom: 1px solid var(--border); }
.wa-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.wa-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.wa-search svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.wa-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 13.5px; color: var(--text); }
.wa-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.wa-tabs::-webkit-scrollbar { display: none; }
.wa-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; background: none; padding: 8px 8px 10px; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.wa-tabs button:hover { color: var(--text); }
.wa-tabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--primary); }
.wa-tabs em { font-style: normal; font-size: 11px; font-weight: 600; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, var(--surface)); color: var(--text-2); text-align: center; }
.wa-tabs em.hot { background: var(--primary); color: var(--on-primary, #1d1f23); }
.wa-items { overflow-y: auto; flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.wa-item { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 12px; border: 0; border-radius: 14px; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; position: relative; transition: background .15s; }
.wa-item:hover { background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.wa-item.on { background: var(--primary-50); }
.wa-item.on::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--primary); }
.wa-av { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--av, #475569); background: color-mix(in srgb, var(--av, #475569) 14%, var(--surface)); }
.wa-av.lg { width: 56px; height: 56px; font-size: 18px; }
.wa-av.has-img { background: none; overflow: hidden; }
.wa-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.wa-item-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wa-item-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wa-item-row b { min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-item-row time { margin-left: auto; font-size: 11.5px; color: var(--text-3); flex: none; }
.wa-item.unread time { color: var(--primary-ink); font-weight: 600; }
.wa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }
.wa-item-row small { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-item.unread .wa-item-row small { color: var(--text); }
.wa-item-row small .wa-st svg { width: 15px; height: 15px; }
.wa-item-row em { flex: none; font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--primary); color: var(--on-primary, #1d1f23); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.wa-item-row.foot { margin-top: 3px; align-items: center; }
.wa-tags { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; flex: 1; }
.wa-mini { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid var(--border); color: var(--text-3); background: var(--surface); }
.wa-mini.ai { color: var(--primary-ink); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.wa-mini svg { width: 12px; height: 12px; }
.wa-empty { padding: 30px 16px; }
/* Nova conversa: contatos do funil parecidos com o que foi digitado */
.nc-found { display: flex; flex-direction: column; gap: 6px; }
.nc-found:empty { display: none; }
.nc-hit { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); cursor: pointer; }
.nc-hit:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--primary-50); }
.nc-hit b { font-size: 13px; font-weight: 600; }
.nc-hit small { grid-column: 1; color: var(--text-3); font-size: 12px; }
.nc-hit span { grid-column: 2; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--primary-ink); }
.nc-hit span svg { width: 15px; height: 15px; }
.wa-num-filter { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }

/* conversa */
.wa-thread { display: flex; flex-direction: column; min-width: 0; }
.wa-thread > .wa-head { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex: none; }
.wa-head-top { display: flex; align-items: center; gap: 8px; }
.wa-head-who { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 12px; height: auto; border: 0; background: none; padding: 0; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.wa-head-main { min-width: 0; display: flex; flex-direction: column; }
.wa-head-main b { font-size: 16px; font-weight: 600; font-family: var(--font-display, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-head-main small { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-head-pills { display: flex; justify-content: flex-start; gap: 6px; flex-wrap: wrap; padding-left: 56px; }
.wa-head-pills .wa-ai { font-size: 11.5px; padding: 4px 9px; }
.wa-round { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-2); }
.wa-round:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, var(--border)); }
.wa-round.on { color: var(--primary-ink); border-color: var(--primary); background: var(--primary-50); }
.wa-who-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; max-width: 180px; }
.wa-who-btn > span:not(.wa-who-ico) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-who-btn:disabled { cursor: default; color: var(--text-2); }
.wa-who-btn > svg { width: 14px; height: 14px; color: var(--text-3); flex: none; }
.wa-who-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--text) 7%, var(--surface)); color: var(--text-2); }
.wa-who-ico.ai { background: var(--primary-50); color: var(--primary-ink); }
.wa-who-ico svg { width: 14px; height: 14px; }
.wa-back { display: none; }
.wa-banner { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12.5px; color: var(--text-2); background: var(--surface); border-bottom: 1px solid var(--border); }
.wa-banner svg { width: 16px; height: 16px; flex: none; color: var(--wa-warn); }
.wa-banner span { flex: 1; min-width: 0; }
.wa-banner.warn { color: var(--wa-warn); }
.wa-msgs-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.wa-msgs { flex: 1; overflow-y: auto; padding: 16px 7% 20px; display: flex; flex-direction: column; gap: 2px; }
.wa-shell .wa-msgs { background-color: var(--wa-wall); background-image: radial-gradient(var(--wa-dot) 1px, transparent 1.2px); background-size: 18px 18px; }
.wa-day { display: flex; justify-content: center; margin: 12px 0 8px; position: sticky; top: 0; z-index: 1; }
.wa-day span { font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; box-shadow: var(--wa-shadow); }
.wa-unread-mark { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; }
.wa-unread-mark::before, .wa-unread-mark::after { content: ''; flex: 1; border-top: 1px solid color-mix(in srgb, var(--primary) 55%, transparent); }
.wa-unread-mark span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary-ink); background: var(--primary-50); border-radius: 999px; padding: 4px 12px; }
.wa-note { align-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 86%; font-size: 12px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; margin: 8px 0; box-shadow: var(--wa-shadow); }
.wa-note svg { width: 14px; height: 14px; flex: none; color: var(--text-3); }
.wa-msg { display: flex; flex-direction: column; max-width: min(72%, 580px); margin-top: 8px; }
.wa-msg.cont { margin-top: 2px; }
.wa-msg.in { align-self: flex-start; }
.wa-msg.out { align-self: flex-end; align-items: flex-end; }
.wa-bubble { position: relative; padding: 8px 12px 9px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); background: var(--wa-in); border: 1px solid var(--border); box-shadow: var(--wa-shadow); }
.wa-msg.out .wa-bubble { background: var(--wa-out); border-color: var(--wa-out-line); }
.wa-msg.in:not(.cont) .wa-bubble { border-bottom-left-radius: 16px; border-top-left-radius: 5px; }
.wa-msg.out:not(.cont) .wa-bubble { border-top-right-radius: 5px; }
.wa-msg.failed .wa-bubble { border-color: #ef4444; }
.wa-who { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; color: var(--primary-ink); }
.wa-who svg { width: 13px; height: 13px; }
.wa-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -4px 12px; font-size: 11px; color: var(--wa-sub); white-space: nowrap; position: relative; top: 4px; }
.wa-meta b { font-weight: 500; }
.wa-media { color: var(--wa-sub); }
.wa-st svg { width: 16px; height: 16px; }
.wa-st.ok { color: var(--primary-ink); } .wa-st.bad { color: #dc2626; }
.wa-st:not(.ok):not(.bad) svg { width: 12px; height: 12px; }
.wa-retry { font-size: 12px; color: #dc2626; margin-top: 3px; }
.wa-down { position: absolute; right: 18px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; cursor: pointer; background: var(--surface); color: var(--text-2); box-shadow: 0 4px 12px rgba(15, 17, 23, .14); }
.wa-down svg { width: 18px; height: 18px; }
.wa-foot { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 14px; border-top: 1px solid var(--border); }
.wa-quick-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wa-quick-chips::-webkit-scrollbar { display: none; }
.wa-quick-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.wa-quick-chips button:hover { border-color: var(--primary); background: var(--primary-50); }
.wa-quick-chips button svg { width: 13px; height: 13px; color: var(--primary-ink); }
.wa-quick-chips button.add { color: var(--text-2); border-style: dashed; }
.wa-quick-chips button.add svg { color: var(--text-3); }
.wa-compose { display: flex; align-items: flex-end; gap: 8px; }
.wa-compose textarea { flex: 1; box-sizing: border-box; resize: none; min-height: 46px; max-height: 160px; scrollbar-width: none; padding: 12px 18px; border: 1px solid var(--border); border-radius: 23px; font: inherit; font-size: 14px; background: var(--surface); color: var(--text); }
.wa-compose textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.wa-compose textarea:disabled { background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.wa-send { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 82%, #fff), var(--primary)); color: var(--on-primary, #1d1f23); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent); transition: transform .12s, filter .15s; }
.wa-send:hover { filter: brightness(1.04); } .wa-send:active { transform: scale(.94); }
.wa-send:disabled { background: color-mix(in srgb, var(--text) 8%, var(--surface)); color: var(--text-3); box-shadow: none; cursor: default; }
.wa-send svg { width: 19px; height: 19px; }
.wa-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 30px; text-align: center; }
.wa-none-ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: var(--primary-ink); background: var(--primary-50); margin-bottom: 8px; }
.wa-none-ico svg { width: 34px; height: 34px; }
.wa-none b { font-size: 18px; font-weight: 600; }

/* contato */
.wa-side { display: flex; flex-direction: column; }
.wa-side-body { overflow-y: auto; flex: 1; }
.wa-profile { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 16px 12px; }
.wa-profile-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wa-profile-main b { font-size: 17px; font-weight: 600; font-family: var(--font-display, inherit); overflow-wrap: anywhere; }
.wa-profile-main span { font-size: 13px; color: var(--text-2); }
.wa-side-x { position: absolute; top: 10px; right: 8px; }
.wa-phone { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; padding: 0; }
.wa-phone:hover { color: var(--text); }
.wa-phone svg { width: 13px; height: 13px; }
.wa-profile-tags { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 8px; }
.wa-profile-tags:empty { display: none; }
.wa-since { display: block; padding: 0 16px 12px; font-size: 12px; color: var(--text-3); }
.wa-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px 16px; border-bottom: 1px solid var(--border); }
.wa-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.wa-actions button:hover { border-color: var(--primary); background: var(--primary-50); }
.wa-actions svg { width: 15px; height: 15px; color: var(--primary-ink); }
.wa-sec { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.wa-sec h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.wa-sec h4 > span { flex: 1; }
.wa-sec h4 .link-btn { font-size: 12.5px; font-weight: 500; }
.wa-box { border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.wa-box-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-box-top b { font-size: 15px; font-weight: 600; }
.wa-box p { margin: 0; font-size: 13px; color: var(--text-2); }
.wa-box .wa-btns { margin-top: 4px; }
.wa-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 13px; }
.wa-kv small { color: var(--text-3); font-size: 12px; }
.wa-kv span { min-width: 0; overflow-wrap: anywhere; }
.wa-select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.wa-serve { display: flex; }
.wa-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.wa-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; padding-top: 2px; }
.wa-switch > span { flex: 1; display: flex; flex-direction: column; font-size: 13px; }
.wa-switch b { font-weight: 500; } .wa-switch small { color: var(--text-3); font-size: 12px; }
.wa-switch input { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.wa-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; }
.wa-switch input:checked { background: var(--primary); }
.wa-switch input:checked::after { transform: translateX(16px); }
.wa-sum { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.wa-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wa-notes li { display: flex; flex-direction: column; font-size: 13px; padding-left: 10px; border-left: 2px solid var(--primary); }
.wa-notes b { font-weight: 500; } .wa-notes span { color: var(--text-2); font-size: 12.5px; }
.wa-sec textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 58px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.wa-sec textarea:focus { outline: none; border-color: var(--primary); }
.wa-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wa-acts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
.wa-act-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); color: var(--text-2); }
.wa-act-ico svg { width: 13px; height: 13px; }
.wa-acts p { margin: 0; font-size: 12.5px; line-height: 1.4; }
.wa-acts small { font-size: 11.5px; color: var(--text-3); }

/* respostas rápidas */
.wa-quick-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wa-quick-list li { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.wa-quick-list p { margin: 0; font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.wa-quick-top { display: flex; align-items: center; gap: 6px; }

.wa-qr-admin { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.wa-qr-img { flex: none; width: 240px; height: 240px; margin: 0 auto; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
.wa-qr-img img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.wa-qr-admin .install-steps { margin: 0; }

@media (max-width: 1599px) { .wa-shell { grid-template-columns: 300px minmax(0, 1fr); gap: 12px; } .wa-shell.side-open { grid-template-columns: 300px minmax(0, 1fr) 310px; } .wa-msgs { padding-inline: 4%; } }
/* arquivos nas Conversas: foto, áudio, vídeo, documento */
.wa-bubble.has-file { padding: 4px 4px 7px; }
.wa-bubble.has-file > .wa-who, .wa-bubble.has-file > .wa-cap, .wa-bubble.has-file > .wa-meta { margin-left: 8px; margin-right: 8px; }
.wa-bubble.has-file.k-audio, .wa-bubble.has-file.k-documento { padding: 6px 8px 8px; }
.wa-bubble.has-file.k-audio > *, .wa-bubble.has-file.k-documento > * { margin-left: 0; margin-right: 0; }
.wa-cap { display: block; margin-top: 6px; }
.wa-cap.tr { font-size: 13px; color: var(--text-2); }
.wa-cap.tr small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1px; }
.wa-img { display: block; border: 0; padding: 0; background: color-mix(in srgb, var(--text) 6%, var(--surface)); border-radius: 12px; overflow: hidden; cursor: zoom-in; width: 260px; max-width: 100%; aspect-ratio: 4 / 3; }
.wa-img.ok { aspect-ratio: auto; background: none; }
.wa-img img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.wa-img.sticker { width: 140px; background: none; }
.wa-img.sticker img { object-fit: contain; }
.wa-img-ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-3); }
.wa-img-ph svg { width: 34px; height: 34px; }
.wa-img.bad .wa-img-ph { color: #dc2626; }
.wa-video { display: block; width: 300px; max-width: 100%; max-height: 360px; border-radius: 12px; background: #000; }
.wa-vid { display: flex; align-items: center; justify-content: center; gap: 8px; width: 260px; max-width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #1f2229; color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.wa-vid svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.wa-doc { display: flex; align-items: center; gap: 10px; width: 280px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.wa-doc:hover { border-color: var(--primary); }
.wa-doc-ico { position: relative; width: 36px; height: 42px; flex: none; display: grid; place-items: center; color: var(--primary-ink); }
.wa-doc-ico svg { width: 34px; height: 34px; }
.wa-doc-ico b { position: absolute; bottom: 4px; font-size: 7.5px; font-weight: 800; letter-spacing: .02em; }
.wa-doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-doc-main b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-doc-main small { font-size: 11.5px; color: var(--text-3); }
.wa-doc > svg { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.wa-doc.loading, .wa-vid.loading { opacity: .6; cursor: progress; }
.wa-audio { display: flex; align-items: center; gap: 10px; width: 260px; max-width: 100%; }
.wa-play { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--primary); color: var(--on-primary, #1d1f23); }
.wa-play svg { width: 16px; height: 16px; }
.wa-play svg:last-child, .wa-audio.playing .wa-play svg:first-child { display: none; }
.wa-audio.playing .wa-play svg:last-child { display: block; }
.wa-audio-track { flex: 1; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--text) 12%, transparent); cursor: pointer; position: relative; overflow: hidden; }
.wa-audio-track i { position: absolute; inset: 0 auto 0 0; background: var(--primary-ink); border-radius: inherit; transition: width .2s linear; }
.wa-audio-t { font-size: 11.5px; color: var(--text-3); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.wa-file-wait, .wa-file-gone { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); font-style: italic; padding: 2px 0; }
.wa-file-gone svg { width: 14px; height: 14px; }
.wa-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 18%, transparent); border-top-color: var(--primary-ink); animation: wa-spin .8s linear infinite; flex: none; }
@keyframes wa-spin { to { transform: rotate(360deg); } }
.wa-lightbox .modal-body img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 12px; }
.wa-lightbox .modal-body p { margin: 12px 0 0; text-align: center; color: var(--text-2); }

/* anexar e gravar */
.wa-attach { color: var(--text-2); }
.wa-attach svg { width: 20px; height: 20px; }
.wa-compose .wa-mic { display: none; }
.wa-compose:not(.has-text):not(.recording) .wa-send:not(.wa-mic):not(:disabled) { display: none; }
.wa-compose:not(.has-text):not(.recording) .wa-mic { display: grid; }
.wa-compose.recording textarea, .wa-compose.recording .wa-attach, .wa-compose.recording .wa-mic { display: none; }
.wa-rec { flex: 1; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 4px; border: 1px solid color-mix(in srgb, #ef4444 40%, var(--border)); border-radius: 23px; font-variant-numeric: tabular-nums; font-weight: 600; }
.wa-rec .icon-btn { color: #dc2626; }
.wa-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: wa-rec 1s ease-in-out infinite; }
@keyframes wa-rec { 50% { opacity: .25; } }
.wa-attach-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 14px; }
.wa-attach-bar img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; flex: none; }
.wa-attach-ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--primary-50); color: var(--primary-ink); }
.wa-attach-ico svg { width: 22px; height: 22px; }
.wa-attach-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wa-attach-main b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-attach-main small { font-size: 12px; color: var(--text-3); }
.wa-thread.drop { outline: 2px dashed var(--primary); outline-offset: -8px; }
.wa-thread.drop .wa-msgs { opacity: .55; }

/* lista mais junta e pílulas menores dentro dela */
.wa-items { gap: 0; padding: 6px; }
.wa-item { padding: 8px 10px; gap: 11px; }
.wa-item-main { gap: 1px; }
.wa-item-row.foot { margin-top: 3px; }
.wa-item .wa-pill { font-size: 10.5px; padding: 2px 7px; gap: 3px; font-weight: 600; }
.wa-item .wa-mini { width: 19px; height: 19px; }
.wa-item .wa-mini svg { width: 11px; height: 11px; }
.wa-item.on::before { top: 10px; bottom: 10px; }

/* animações (só quando algo muda; quem pede menos movimento não vê) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes wa-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes wa-pop-in { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 60% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { transform: none; } }
  @keyframes wa-bump { 0% { background: color-mix(in srgb, var(--primary) 26%, var(--surface)); } 100% { background: transparent; } }
  @keyframes wa-badge { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
  @keyframes wa-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes wa-fade { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
  @keyframes wa-side { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
  @keyframes wa-swap { from { opacity: .35; } to { opacity: 1; } }
  .wa-item.intro { animation: wa-rise .38s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 35ms); }
  .wa-item.bump { animation: wa-bump 1.4s ease-out; }
  .wa-item.bump em, .wa-item.bump .wa-dot { animation: wa-badge .45s cubic-bezier(.3, 1.6, .5, 1); }
  .wa-item.just-on::before { animation: wa-bar .3s cubic-bezier(.2, .8, .2, 1); transform-origin: center; }
  .wa-av img.fresh { animation: wa-fade .4s ease-out; }
  .wa-msg.enter { animation: wa-rise .35s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 28ms); }
  .wa-msg.pop { animation: wa-pop-in .42s cubic-bezier(.2, .8, .2, 1) both; }
  .wa-msg.in.pop { transform-origin: left bottom; } .wa-msg.out.pop { transform-origin: right bottom; }
  .wa-thread.swap .wa-head, .wa-thread.swap .wa-foot { animation: wa-swap .3s ease-out; }
  .wa-side.slide-in { animation: wa-side .32s cubic-bezier(.2, .8, .2, 1); }
  .wa-down:not([hidden]) { animation: wa-fade .2s ease-out; }
  .wa-quick-chips button, .wa-actions button, .wa-round, .wa-who-btn { transition: transform .15s, border-color .15s, background .15s, color .15s; }
  .wa-quick-chips button:hover, .wa-actions button:hover { transform: translateY(-1px); }
  .wa-quick-chips button:active, .wa-actions button:active, .wa-round:active, .wa-who-btn:active { transform: scale(.95); }
  .wa-item { transition: background .18s, transform .12s; }
  .wa-item:active { transform: scale(.985); }
  .wa-tabs button { transition: color .15s, border-color .2s; }
}

/* telas médias: o contato abre por cima da conversa */
@media (max-width: 1279px) {
  .wa-shell.side-open { grid-template-columns: 300px minmax(0, 1fr); }
  .wa-shell.side-open .wa-side { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 100%); z-index: 5; box-shadow: -8px 0 28px rgba(15, 17, 23, .16); }
  .wa-head-pills { padding-left: 0; }
}
@media (max-width: 900px) {
  .wa-shell, .wa-shell.side-open { grid-template-columns: 1fr; height: calc(100dvh - 190px); }
  .wa-shell .wa-thread { display: none; }
  .wa-shell.has-sel .wa-list { display: none; }
  .wa-shell.has-sel .wa-thread { display: flex; }
  .wa-back { display: inline-grid; }
  .wa-who-btn > span:not(.wa-who-ico), .wa-who-btn > svg { display: none; }
  .wa-who-btn { padding: 0 4px; }
  [data-head-notes] { display: none; }
  .wa-msg { max-width: 86%; }
  .wa-msgs { padding: 12px 10px 16px; }
  .wa-shell.side-open .wa-side { width: 100%; box-shadow: none; }
}

/* ---------- Atendente IA (admin) ---------- */
.ai-kpis { margin-top: 4px; }
.ai-tabs { margin-bottom: 16px; }
.ai-form { display: flex; flex-direction: column; gap: 14px; max-width: 920px; }
.ai-sec h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.ai-sec .field:last-child, .ai-sec .check-row:last-child, .ai-sec p:last-child { margin-bottom: 0; }
.ai-sec .pn-seg { margin-bottom: 12px; }
.ai-note { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius, 14px); background: var(--surface); font-size: 13px; }
.ai-note svg { width: 16px; height: 16px; flex: none; color: #b45309; }
.ai-days { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ai-day { display: grid; grid-template-columns: 130px 110px auto 110px; align-items: center; gap: 8px; }
.ai-day .check-row { margin: 0; }
.ai-day input[type=time] { height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.ai-days .field { margin-top: 8px; }
.ai-savebar { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius, 14px); background: var(--surface); box-shadow: var(--shadow-sm); }
.ai-savebar .muted { flex: 1; font-size: 13px; }
.ai-test { display: flex; flex-direction: column; height: min(72vh, 760px); overflow: hidden; }
.ai-test-top { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 12px 14px 0; }
.ai-test-top .field { margin: 0; flex: 1; min-width: 200px; max-width: 280px; }
.ai-test-help { padding: 6px 14px 10px; margin: 0; border-bottom: 1px solid var(--border); }
.ai-test-msgs .wa-none { margin: auto; }
.ai-run { align-self: stretch; margin: 2px 0 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 10px; font-size: 12.5px; }
.ai-run-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ai-run summary { cursor: pointer; margin-top: 6px; color: var(--text-2); }
.ai-steps { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.ai-steps pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: 11.5px; margin: 4px 0 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; max-height: 160px; overflow: auto; }
.ai-steps .bad { color: var(--danger-ink, #b91c1c); }
.ai-steps s { display: block; color: var(--text-2); margin-top: 2px; }
.ai-reason { display: block; margin-top: 2px; }
.ai-reply { white-space: pre-wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; max-height: 280px; overflow: auto; }
.ai-more { display: flex; justify-content: center; padding: 12px; }
.ai-versions, .ai-conns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ai-version, .ai-conn { display: flex; align-items: center; gap: 14px; }
.ai-version-main, .ai-conn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-version-act, .ai-conn-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ai-conn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.ai-conn-head h3 { font-size: 15px; font-weight: 600; margin: 0; }
.ai-conn-head p { margin: 0; }
.ai-bad { display: inline-flex; align-items: center; gap: 6px; color: var(--danger-ink, #b91c1c); font-size: 12.5px; }
.ai-bad svg { width: 14px; height: 14px; }
/* Conversas: quem atende e o resumo da IA */
.wa-ai { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.wa-ai svg { width: 13px; height: 13px; }
.wa-ai.on { color: #15803d; }
.wa-ai.hum { color: #b45309; }
:root[data-theme="dark"] .wa-ai.on { color: #6ee7a0; }
:root[data-theme="dark"] .wa-ai.hum { color: #fbbf5a; }
:root[data-theme="dark"] :is(.wa-st.bad, .wa-retry, .wa-rec .icon-btn, .wa-img.bad .wa-img-ph) { color: #ff8a8d; }
.wa-ai.wait { color: var(--text-2); }
@media (max-width: 900px) {
  .ai-day { grid-template-columns: 1fr 96px auto 96px; }
  .ai-version, .ai-conn { flex-direction: column; align-items: stretch; }
  .ai-version-act, .ai-conn-act { justify-content: flex-start; }
  .ai-conn-head { flex-direction: column; align-items: stretch; }
}

/* ---------- Agente de IA: entrada com cartões e telas de acompanhamento ---------- */
.ai-back { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-2); text-decoration: none; margin-bottom: 4px; }
.ai-back svg { width: 14px; height: 14px; }
.ai-back:hover { color: var(--text); }
.ai-sec-title { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); margin: 18px 0 10px; }
.ai-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ai-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ai-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ai-card-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); flex: none; color: var(--primary-ink); }
.ai-card-ico svg { width: 18px; height: 18px; }
.ai-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ai-card-main b { font-size: 14.5px; font-weight: 600; }
.ai-card-main small { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.ai-card-st { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-2); margin-top: 4px; }
.ai-card-st.st-ok { color: #15803d; }
.ai-card-st.st-warn { color: #b45309; }
.ai-card-st.st-bad { color: var(--danger-ink, #b91c1c); }
.ai-urgent { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #ef4444; border-radius: var(--radius, 14px); color: var(--danger-ink, #b91c1c); background: var(--surface); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.ai-urgent svg { width: 16px; height: 16px; }
.ai-h3 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.ai-budget { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ai-budget-top { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.ai-budget-top > div { display: flex; flex-direction: column; }
.ai-budget-top b { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.ai-budget-top .btn { margin-left: auto; }
.ai-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ai-bar i { display: block; height: 100%; background: #22c55e; border-radius: inherit; }
.ai-bar.warn i { background: #f5a524; }
.ai-bar.bad i { background: #ef4444; }
.ai-usage-grid { margin-top: 14px; align-items: start; }
.ai-split { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ai-split li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ai-split li:last-child { border-bottom: 0; }
.ai-split small { display: block; }
.ai-alerts { display: flex; flex-direction: column; gap: 10px; }
.ai-alert { display: flex; align-items: center; gap: 14px; border-left: 3px solid var(--border); }
.ai-alert.critico { border-left-color: #ef4444; }
.ai-alert.aviso { border-left-color: #f5a524; }
.ai-alert-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 13.5px; }
.ai-alert-main b { font-weight: 600; }
.ai-alert-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ai-sec h3 + .grid-3 { margin-bottom: 4px; }
.ai-sec h3:not(:first-child) { margin-top: 14px; }
.ai-switch { margin-bottom: 6px; }
.ai-savebar .spacer { flex: 1; }
#nav .nav-group + .nav-group { margin-top: 6px; }
@media (max-width: 900px) {
  .ai-alert { flex-direction: column; align-items: stretch; }
  .ai-alert-act { justify-content: flex-start; }
  .ai-budget-top .btn { margin-left: 0; }
}

/* ---------- Agente de IA, fase B: Conhecimento, Memória, Skills, Provedores ---------- */
.aia-list { display: flex; flex-direction: column; gap: 10px; }
.ai-item { display: flex; align-items: center; gap: 14px; }
.ai-item.off { opacity: .62; }
.ai-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; font-size: 13.5px; }
.ai-item-main b { font-weight: 600; font-size: 14px; }
.ai-item-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.ai-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ai-tags em { font-style: normal; font-size: 11.5px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 99px; color: var(--text-2); }
.ai-actions { display: flex; flex-direction: column; }
.ai-action { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.ai-action > span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.ai-actions p { margin: 10px 0 0; }
.ai-funcs { display: flex; flex-direction: column; gap: 12px; max-width: 920px; }
.ai-func-head { display: flex; align-items: center; gap: 8px; }
.ai-func-head b { font-size: 15px; font-weight: 600; }
.ai-func p { margin: 4px 0 10px; }
.ai-func .grid-2, .ai-func .grid-3 { margin-bottom: 8px; }
.ai-func-act { display: flex; justify-content: flex-end; }
.ai-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.ai-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px; font-size: 13px; color: var(--text); text-decoration: none; }
.ai-links a:hover { border-color: var(--primary); }
.ai-links svg { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .ai-item { flex-direction: column; align-items: stretch; }
  .ai-item-act { justify-content: flex-start; }
}
.ai-login-steps { margin: 12px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; }
.ai-login-steps li { display: list-item; }
.ai-login-steps .btn { vertical-align: middle; margin-right: 4px; }
.ai-login-steps code { font-family: var(--font-mono); font-size: 12px; }

/* Números de WhatsApp (admin › Números de WhatsApp): QR Code e API oficial da Meta */
.wn-list { display: flex; flex-direction: column; gap: 12px; }
.wn-card { display: flex; flex-direction: column; gap: 12px; }
.wn-top { display: flex; align-items: center; gap: 12px; }
.wn-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #15803d; border: 1px solid var(--border); background: var(--surface); }
.wn-ico.meta { color: #2563eb; }
.wn-ico svg { width: 20px; height: 20px; }
.wn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wn-main b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.wn-state { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.wn-state i { flex: none; display: block; }
.wn-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); }
.wn-ai { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.wn-hook { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--border)); border-radius: 12px; }
.wn-hook p { margin: 0; font-size: 13.5px; }
.wn-hook .btn { align-self: flex-start; }
.wn-copy { display: flex; flex-direction: column; gap: 4px; }
.wn-copy > span { font-size: 12px; color: var(--text-2); }
.wn-copy > div { display: flex; align-items: center; gap: 8px; }
.wn-copy code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-mono); font-size: 12px; scrollbar-width: none; }
.wn-choose { display: grid; gap: 10px; }
.wn-opt { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wn-opt:hover, .wn-opt:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); outline: none; }
.wn-opt b { display: block; font-weight: 600; margin-bottom: 4px; }
.wn-opt small { display: block; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.wa-num-filter { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.wa-num-tag { display: inline-block; align-self: flex-start; margin-top: 3px; font-size: 11px; color: var(--text-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .wn-top { flex-wrap: wrap; }
  .wn-state { order: 3; }
}
/* Conexão de WhatsApp: abas, cartões em grade e painéis dentro do cartão (sem janela) */
.wn-tabs { margin-bottom: 14px; }
.wn-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.wn-intro p { margin: 0; flex: 1 1 360px; font-size: 13.5px; max-width: 720px; }
.wn-add { display: flex; gap: 8px; flex: 0 1 460px; }
.wn-add input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.wn-add input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.wn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; margin-top: 14px; }
.wn-empty { grid-column: 1 / -1; }
.wn-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.wn-hint { margin: 0; }
.wn-card.is-paused .wn-ico { opacity: .45; }
.wn-card .wn-foot .btn svg { width: 15px; height: 15px; }
.wn-qr { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.wn-qr .install-steps { margin: 0; }
.wn-rename { display: flex; gap: 6px; align-items: center; }
.wn-rename input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--primary); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; }
.wn-access, .wn-meta-form { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.wn-access > b, .wn-meta-form > b { font-weight: 600; font-size: 14px; }
.wn-meta-form p { margin: 0; }
.card > .wn-meta-form { padding-top: 0; border-top: 0; }
.wn-mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.wn-mode:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.wn-mode input { margin-top: 3px; accent-color: var(--primary); }
.wn-mode b { display: block; font-weight: 600; font-size: 13.5px; }
.wn-mode small { display: block; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.wn-phones { margin: -2px 0 2px 28px; }
.wn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .wn-add { flex-basis: 100%; }
}
/* Proteção de envio (dentro do cartão do número por QR) */
.wn-protect { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.wn-protect > b { font-weight: 600; font-size: 14px; }
.wn-protect > p { margin: 0; }
.wn-protect fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wn-protect legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.wn-protect legend small { font-weight: 400; color: var(--text-2); }
.wn-protect fieldset p { margin: 0; }
.wn-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.wn-line > span:first-child { min-width: 100%; color: var(--text); font-weight: 500; }
.wn-line input[type=number] { width: 72px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.wn-line input[type=date] { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.wn-days { display: flex; gap: 4px; flex-wrap: wrap; }
.wn-days label { cursor: pointer; }
.wn-days input { position: absolute; opacity: 0; pointer-events: none; }
.wn-days span { display: inline-block; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; color: var(--text-2); }
.wn-days input:checked + span { border-color: var(--primary); color: var(--text); box-shadow: inset 0 0 0 1px var(--primary); font-weight: 500; }
.wn-days input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.wn-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.wn-tabs button svg { width: 16px; height: 16px; }
.wn-ico svg { stroke-width: 1.7; }
.wn-menu { flex: none; margin: -6px -8px 0 -4px; }
/* Janela "Editar número" (Conexão de WhatsApp): o layout das fichas, com um Salvar para tudo */
.modal.wn-edit-modal { width: min(860px, 100%); }
.wn-edit-modal .modal-content { padding: 0; }
.wn-edit { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 460px; max-height: calc(100vh - 210px); }
.wn-edit .ficha-nav { border-right: 1px solid var(--border); }
.wn-edit .ficha-panels { overflow-y: auto; }
.wn-edit .ficha-panel { display: flex; flex-direction: column; gap: 12px; }
.wn-sec { margin: 0; font-size: 15px; font-weight: 600; }
.wn-fs { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wn-fs legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.wn-fs legend small { font-weight: 400; color: var(--text-2); }
.wn-fs p { margin: 0; }
.wn-edit [data-protect-reset] { align-self: flex-start; }
.wn-edit-modal .modal-foot .ai-bad { margin: 0; max-width: 60%; }
.wn-tag { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 999px; }
.wn-tag:hover .badge, .wn-tag:focus-visible .badge { filter: brightness(.95); text-decoration: underline; }
@media (max-width: 700px) {
  .wn-edit { grid-template-columns: 1fr; max-height: none; }
  .wn-edit .ficha-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 0; }
  .wn-edit .ficha-nav button { white-space: nowrap; padding: 12px 14px; border-right: 0; }
}
/* Uma janela por botão do cartão (Renomear, Acesso da IA, Proteção de envio, Trocar credencial) */
.wn-edit-modal .modal-content { padding: 20px 24px; }
.wn-edit-one, .wn-edit-one > section { display: flex; flex-direction: column; gap: 12px; }
.wn-edit-one p { margin: 0; }
.wn-edit-one [data-protect-reset] { align-self: flex-start; }
.modal.wn-edit-modal.wn-edit-protecao { width: min(640px, 100%); }
.modal.wn-edit-modal.wn-edit-nome { width: min(440px, 100%); }
.modal.wn-edit-modal.wn-edit-ia, .modal.wn-edit-modal.wn-edit-credencial { width: min(580px, 100%); }
/* Agente de IA › Casos */
.ai-cases { display: flex; flex-direction: column; gap: 10px; }
.ai-case { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.ai-case-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--primary-ink); }
.ai-case-ico svg { width: 19px; height: 19px; }
.ai-case-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-case-main b { font-weight: 600; }
.ai-case-view { display: flex; flex-direction: column; gap: 14px; }
.ai-case-view section { display: flex; flex-direction: column; gap: 4px; }
.ai-case-view h4 { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ai-case-view p { margin: 0; white-space: pre-wrap; }
.ai-case-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ai-case-who .ai-case-name { flex: 1; min-width: 160px; }
.modal.ai-case-modal { width: min(760px, 100%); }
.ai-case-tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.ai-case-tl p { color: var(--text-2); margin-top: 2px; }
.ai-case-reply { padding-top: 12px; border-top: 1px solid var(--border); }
.ai-case-modal .modal-foot { flex-wrap: wrap; }
.wa-case { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.wa-case svg { width: 16px; height: 16px; color: #d97706; flex: none; }
.wa-case span { flex: 1; min-width: 0; }
@media (max-width: 640px) { .ai-case { flex-wrap: wrap; } }
/* Agente de IA › Follow-ups */
.ai-flows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: start; }
.ai-flow { display: flex; flex-direction: column; gap: 10px; }
.ai-flow-top { display: flex; align-items: center; gap: 12px; }
.ai-flow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ai-flow-main b { font-weight: 600; }
.ai-flow-steps { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ai-flow-steps b { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ai-flow-steps svg { width: 14px; height: 14px; }
.ai-flow-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
.ai-flow-form { display: flex; flex-direction: column; gap: 12px; }
.ai-flow-msgs { display: flex; flex-direction: column; gap: 10px; }
.ai-flow-msg .wn-line select { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.ai-flow-msg [data-rm] { align-self: flex-start; }
.ai-flow-form [data-add] { align-self: flex-start; }
.modal.ai-flow-modal { width: min(680px, 100%); }
/* Agente de IA › Propostas */
.ai-prop-last { margin: -6px 0 12px; }
.ai-props { display: flex; flex-direction: column; gap: 10px; }
.ai-prop { display: flex; flex-direction: column; gap: 8px; }
.ai-prop-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-prop-head b { font-weight: 600; }
.ai-prop-body { margin: 0; white-space: pre-wrap; font-size: 14px; }
.ai-prop p.small { margin: 0; }
.ai-prop-ev summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); }
.ai-prop-ev ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); }
.ai-prop-res { display: inline-flex; align-items: center; gap: 6px; color: #15803d; }
.ai-prop-res svg { width: 14px; height: 14px; }
/* Agente de IA: escolher o agente (fase F) */
/* Notas permanentes do contato */
.ai-notes { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-notes > li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 4px; }
.ai-notes > li.muted { border-style: dashed; }
.ai-note-top { display: flex; align-items: center; gap: 8px; }
.ai-note-top b { font-weight: 600; }
.ai-note-top .icon-btn svg { width: 15px; height: 15px; }
.ai-notes p { margin: 0; font-size: 13.5px; }
.ai-note-new { margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
.ai-note-form { display: flex; flex-direction: column; gap: 8px; }
.crm-notes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.crm-notes-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crm-notes ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.crm-notes p { margin: 6px 0 0; }

/* Agente de IA › Memória: regras da casa */
.ai-org { display: grid; gap: 12px; margin-bottom: 22px; }
.ai-org-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.ai-org-head > div { display: grid; gap: 2px; }
.ai-org textarea { width: 100%; min-height: 200px; resize: vertical; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; line-height: 1.55; }
.ai-org textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.ai-org-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-org-learn { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.ai-org-learn > div { display: grid; gap: 2px; }
.ai-org-learn .ai-sec-title { margin: 0; }
.ai-org-vers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ai-org-vers li { border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.ai-org-v-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-org-vers pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: 13px; color: var(--text-2, var(--muted)); max-height: 160px; overflow: auto; }
@media (max-width: 640px) { .ai-org-head, .ai-org-learn { flex-direction: column; align-items: stretch; } }

/* Página pública de agendamento: letras um pouco menores (pedido do dono, 31/10) */
.m-idtext h1 { font-size: clamp(20px, 3vw, 24px); }
.m-lead { font-size: 12.5px; }
.m-sec { padding: 24px 26px 26px; }
.m-sec h2 { font-size: 20px; margin-bottom: 12px; }
.m-sec h3 { font-size: 16px; margin: 22px 0 12px; }
.m-text { font-size: 15px; line-height: 1.55; }
.m-cat { padding: 12px; }
.m-cat-name { font-size: 16px; }
.m-cat small { font-size: 13px; }
.m-cat i { width: 30px; height: 30px; }
.m-hours p { font-size: 16px; line-height: 1.55; }
.m-pays { font-size: 13px; }
.m-team b { font-size: 14px; }
.m-team small { font-size: 13px; }
.m-face { width: 42px; height: 42px; }
.m-ini { font-size: 17px; }
.m-contacts a { font-size: 13px; }
.m-btn { font-size: 14px; }
.m-btn.big { height: 48px; font-size: 14.5px; }
@media (max-width: 640px) {
  .m-sec { padding: 20px 18px 22px; }
  .m-sec h2 { font-size: 19px; }
  .m-hours p { font-size: 15px; }
}

/* Escolha dos serviços: "Continuar" grande, preso no rodapé (no celular, na largura toda) */
.svc-bar { padding: 14px 0 6px; gap: 12px; }
.svc-bar-sum { font-size: 14px; }
.svc-bar [data-next] { height: 50px; padding: 0 30px; font-size: 15px; font-weight: 600; border-radius: 999px; }
.svc-bar [data-next] svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .svc-bar { padding: 12px 0 calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 18px -14px rgba(0, 0, 0, .25); }
  .svc-bar-sum { flex: 1 1 100%; order: -1; }
  .svc-bar [data-next] { flex: 1 1 auto; justify-content: center; }
}

/* Página pública: horário como quadro da semana */
.m-week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 16px; }
.m-week-head h2 { margin: 0 !important; }
.m-week-head .m-open { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 99px; background: var(--s2); color: var(--soft); }
.m-week-head .m-open.on { background: color-mix(in srgb, #22c55e 14%, var(--s)); color: #15803d; }
.msite.dark .m-week-head .m-open.on { color: #6ee7a0; }
.m-week { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.m-week li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 98px; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px; }
.m-week li.today { background: color-mix(in srgb, var(--primary) 12%, var(--s)); }
.m-wday { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.m-wday em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 99px; background: var(--primary); color: var(--m-on); }
.m-wtrack { position: relative; height: 10px; border-radius: 99px; background: var(--s2); overflow: hidden; }
.m-wtrack i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 70%, var(--s)), var(--primary)); }
.m-anim .m-reveal .m-wtrack i { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--smooth); }
.m-anim .m-reveal.in .m-wtrack i { transform: none; }
.m-anim .m-reveal.in li:nth-child(2) .m-wtrack i { transition-delay: .05s; } .m-anim .m-reveal.in li:nth-child(3) .m-wtrack i { transition-delay: .1s; }
.m-anim .m-reveal.in li:nth-child(4) .m-wtrack i { transition-delay: .15s; } .m-anim .m-reveal.in li:nth-child(5) .m-wtrack i { transition-delay: .2s; }
.m-anim .m-reveal.in li:nth-child(6) .m-wtrack i { transition-delay: .25s; } .m-anim .m-reveal.in li:nth-child(7) .m-wtrack i { transition-delay: .3s; }
.m-whrs { text-align: right; font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-week li.closed .m-wday, .m-week li.closed .m-whrs { color: var(--soft); font-weight: 500; }
.m-wscale { display: grid; grid-template-columns: 74px minmax(0, 1fr) 98px; gap: 12px; padding: 4px 10px 0; }
.m-wticks { position: relative; height: 14px; }
.m-wticks b { position: absolute; transform: translateX(-50%); font-size: 10.5px; font-weight: 500; color: var(--soft); }
.m-pays { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--s2); }
.m-pays small { display: block; font-size: 12px; color: var(--soft); margin-bottom: 8px; }
.m-pays > div { display: flex; flex-wrap: wrap; gap: 6px; }
.m-pays span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: var(--s2); font-size: 13px; color: var(--ink); }
.m-pays svg { width: 15px; height: 15px; }

/* Página pública: fotos em carrossel */
.m-gal { overflow: hidden; }
.m-gal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.m-gal-head h2 { margin: 0 !important; }
.m-gal-nav { display: flex; gap: 6px; }
.m-arrow { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--s2); color: var(--ink); transition: background .2s, transform .15s; }
.m-arrow:hover { background: var(--primary); color: var(--m-on); }
.m-arrow:active { transform: scale(.92); }
.m-arrow svg { width: 17px; height: 17px; }
.m-car { position: relative; display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin: 0 -28px; padding: 16px calc(50% + 28px - min(160px, 35vw)) 20px; overscroll-behavior-x: contain; }
.m-car::-webkit-scrollbar { display: none; }
.m-car:focus-visible { outline: none; }
.m-slide { position: relative; flex: 0 0 min(320px, 70vw); aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; background: var(--s2); scroll-snap-align: center;
  transform: scale(.82); opacity: .55; filter: blur(3px) saturate(.8); transition: transform .5s var(--smooth), opacity .5s var(--smooth), filter .5s var(--smooth), box-shadow .5s var(--smooth); }
.m-slide.on { transform: none; opacity: 1; filter: none; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .45); z-index: 1; }
.m-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--smooth); }
.m-slide:hover img { transform: scale(1.04); }
.m-slide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; font-size: 13px; text-align: left; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.m-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.m-dots i { width: 6px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--soft) 45%, transparent); transition: width .3s var(--smooth), background .3s; }
.m-dots i.on { width: 20px; background: var(--primary); }

/* Página pública: fotos da equipe maiores */
.m-team { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 20px; }
.m-team li { gap: 14px; }
.m-face { width: 64px; height: 64px; }
.m-ini { font-size: 22px; }

@media (max-width: 640px) {
  .m-week li { grid-template-columns: 64px minmax(0, 1fr) 84px; gap: 10px; padding: 7px 8px; }
  .m-wscale { grid-template-columns: 64px minmax(0, 1fr) 84px; gap: 10px; padding: 4px 8px 0; }
  .m-whrs { font-size: 12.5px; }
  .m-wday em { display: none; }
  .m-week li.today .m-wday { color: var(--ink); }
  .m-gal-nav { display: none; }
  .m-car { margin: 0 -18px; padding: 12px calc(50% + 18px - 33vw) 16px; gap: 2px; }
  .m-slide { flex-basis: 66vw; }
  .m-face { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) { .m-slide { transition: none; } .m-car { scroll-behavior: auto; } }

/* Página pública sem caixas (pedido do dono, 31/10): seções separadas por uma linha fina, textos centralizados,
   tudo dentro da mesma largura de antes. O passo a passo do agendamento (.m-head-min) não muda. */
.msite .m-sec { background: transparent; border-radius: 0; padding: 48px 4px; }
.msite .m-sec h2 { margin-bottom: 22px; }
.msite .m-sec + .m-sec, .msite .m-head + .m-sec { border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.msite { gap: 0; }
.msite .m-sec h2, .msite .m-sec h3 { text-align: center; }
.msite .m-text { text-align: center; max-width: 52ch; margin-left: auto; margin-right: auto; }
.msite .m-head:not(.m-head-min) { padding: 28px 0 44px; text-align: center; }
.msite .m-head:not(.m-head-min) .m-idrow { flex-direction: column; justify-content: center; gap: 10px; }
.msite .m-head:not(.m-head-min) .m-mark .brand-mark { width: 60px; height: 60px; border-radius: 16px; font-size: 24px; }
.msite .m-head:not(.m-head-min) .m-lead { justify-content: center; }
.msite .m-head:not(.m-head-min) .m-acts { justify-content: center; }
.msite .m-head:not(.m-head-min) .m-idrow { align-items: center; text-align: center; }
.msite .m-head:not(.m-head-min) .m-idtext { width: 100%; text-align: center; }
.msite .m-head:not(.m-head-min) .m-idtext h1 { text-align: center; }
@media (max-width: 640px) { .msite .m-head:not(.m-head-min) .m-lead { align-items: center; text-align: center; } }
.msite .m-cats { max-width: 560px; margin: 0 auto; }
.msite .m-week-head { flex-direction: column; justify-content: center; }
.msite .m-week, .msite .m-wscale { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
.msite .m-wscale { box-sizing: border-box; }
.msite .m-pays { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; }
.msite .m-pays > div { justify-content: center; }
.msite .m-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 28px; }
.msite .m-team li { flex-direction: column; text-align: center; gap: 8px; width: 150px; }
/* fotos: o carrossel não passa da largura; setas nas laterais das fotos */
.msite .m-gal { position: relative; }
.msite .m-gal-head { justify-content: center; }
.msite .m-gal-nav { position: absolute; left: 0; right: 0; top: calc(50% + 14px); display: flex; justify-content: space-between; pointer-events: none; z-index: 3; }
.msite .m-gal-nav .m-arrow { pointer-events: auto; background: color-mix(in srgb, var(--s) 85%, transparent); backdrop-filter: blur(6px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.msite .m-car { margin: 0; padding-left: calc(50% - min(160px, 35vw)); padding-right: calc(50% - min(160px, 35vw)); }
@media (max-width: 640px) {
  .msite .m-sec { padding: 38px 2px; }
  .msite .m-car { margin: 0; padding-left: calc(50% - 33vw); padding-right: calc(50% - 33vw); }
}
/* botão: a letra segue o contraste com a cor (escura em cor clara, branca em cor escura) — a regra dos links não vale aqui */
.msite a.m-btn, .msite .m-btn { color: var(--m-on); }
.msite a.m-btn.ghost { color: var(--ink); }

/* Página pública: foto ampliada (só a foto e o X) */
.m-zoom { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 56px 16px 24px; background: rgba(8, 8, 8, .95); backdrop-filter: blur(8px); animation: m-zoom-in .22s ease-out both; }
.m-zoom.out { animation: m-zoom-out .2s ease-in both; }
.m-zoom img { max-width: min(100%, 980px); max-height: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); animation: m-zoom-img .3s cubic-bezier(.2, .8, .2, 1) both; }
.m-zoom-x { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, .14); color: #fff; transition: background .2s; }
.m-zoom-x:hover { background: rgba(255, 255, 255, .26); }
.m-zoom-x svg { width: 22px; height: 22px; }
@keyframes m-zoom-in { from { opacity: 0; } }
@keyframes m-zoom-out { to { opacity: 0; } }
@keyframes m-zoom-img { from { transform: scale(.94); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .m-zoom, .m-zoom img { animation: none; } }
/* régua do horário: a primeira marca encosta no início e a última no fim */
.m-wticks b.first { transform: none; }
.m-wticks b.last { transform: translateX(-100%); }

/* Agendamento: escolha do profissional no mesmo cartão da escolha de serviço (foto quadrada grande) */
.choice-ini { display: grid; place-items: center; font-family: var(--font-display, inherit); font-size: 30px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
.choice-any { display: grid; place-items: center; color: var(--text-2); background: color-mix(in srgb, var(--text) 7%, var(--surface)); }
.choice-any svg { width: 30px; height: 30px; }

/* Agendamento: resumo de cada horário — "Serviço com Profissional" fora da caixa, lista com ícone dentro */
.bs-item { margin-bottom: 14px; }
.bs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
.bs-title { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--text-2); }
.bs-title b { color: var(--text); font-weight: 600; }
.bs-rm { flex: none; color: var(--text-2); }
.bs-rm svg { width: 14px; height: 14px; }
.booking-summary.bs-list { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; margin-bottom: 0; }
.bs-svcs { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-2); }
.bs-svcs small { color: var(--text-3); margin-left: 4px; }
.booking-summary.bs-list > .bs-row { display: grid; grid-template-columns: 18px 76px minmax(0, 1fr); align-items: center; gap: 10px; }
.bs-row svg { width: 17px; height: 17px; color: var(--primary-ink, var(--primary)); }
.bs-row > span { font-size: 13.5px; color: var(--text-2); }
.bs-row > b { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.bs-row s { font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.booking-summary.bs-list > .promo-row { display: flex; align-items: center; gap: 10px; }
.bs-add { display: inline-flex; align-items: center; gap: 6px; margin: -2px 0 18px 2px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--primary-ink, var(--primary)); cursor: pointer; }
.bs-add:hover { text-decoration: underline; text-underline-offset: 3px; }
.bs-add svg { width: 15px; height: 15px; }
.bk-failed { display: inline-flex; align-items: center; gap: 6px; color: #dc2626; font-size: 13px; }
.bk-failed svg { width: 15px; height: 15px; }

/* Carregando (login, admin, parceiro): sem caixa nem texto à vista; o símbolo do Bukme com o disco
   "encaixando" e uma barrinha correndo embaixo. O texto continua lá para leitor de tela. */
.auth-card:has(> .auth-loading:only-child) { background: transparent; border-color: transparent; box-shadow: none; }
.auth-loading {
  position: relative; width: 132px; height: 84px; margin: 0 auto; padding: 0;
  font-size: 0; color: transparent; user-select: none;
  background:
    linear-gradient(var(--primary), var(--primary)) no-repeat,
    linear-gradient(var(--border), var(--border)) no-repeat;
  background-size: 38% 3px, 100% 3px;
  background-position: -60% 100%, 0 100%;
  border-radius: 2px;
  animation: ld-bar 1.3s cubic-bezier(.65, 0, .35, 1) infinite;
}
.auth-loading::before, .auth-loading::after { content: ""; position: absolute; top: 0; }
.auth-loading::before { left: calc(50% - 24px); width: 19px; height: 55px; border-radius: 10px; background: var(--text); }
.auth-loading::after {
  left: calc(50% - 8px); top: 20px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3.5px var(--bg), 0 6px 18px color-mix(in srgb, var(--primary) 45%, transparent);
  animation: ld-disc 1.6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
/* no login o logo já está em cima: fica só a barrinha */
.auth-main .auth-loading { height: 3px; margin: 28px auto; }
.auth-main .auth-loading::before, .auth-main .auth-loading::after { display: none; }
@keyframes ld-bar { from { background-position: -60% 100%, 0 100%; } to { background-position: 160% 100%, 0 100%; } }
@keyframes ld-disc {
  0% { transform: translate(14px, -22px) scale(.4); opacity: 0; }
  35%, 75% { transform: none; opacity: 1; }
  100% { transform: scale(.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-loading { animation-duration: 2.6s; }
  .auth-loading::after { animation: none; }
}
/* Agendamento online: a página é do estabelecimento, então sem o traço do símbolo Bukme — só o disco e a barra */
.booking-wait { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.booking-wait .auth-loading { height: 64px; }
.booking-wait .auth-loading::before { display: none; }
.booking-wait .auth-loading::after { left: calc(50% - 16px); top: 6px; }

/* Calendário do campo de data (ui.dateField): janela própria, no lugar do calendário do navegador */
.dd-cal { position: fixed; z-index: 140; width: min(300px, calc(100vw - 16px)); padding: 10px 10px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); animation: pop .12s ease; }
.dd-cal .mini-cal { padding: 0; }
.dd-cal .mini-grid button { font: inherit; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.dd-cal .mini-grid button:hover:not(:disabled), .dd-cal .mini-months button:hover { background: var(--fill-hover); }
.dd-cal .mini-grid button.muted { color: var(--text-3); }
.dd-cal .mini-grid button.today, .dd-cal .mini-months button.today { color: var(--primary-ink); font-weight: 600; }
.dd-cal .mini-grid button.selected, .dd-cal .mini-months button.selected { background: var(--primary); color: var(--on-primary); }
.dd-cal .mini-grid button:disabled { opacity: .3; cursor: not-allowed; }
.dd-cal .mini-grid button:focus-visible, .dd-cal .mini-months button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
.dd-cal .mini-months button { color: var(--text); }
.dd-cal span.mini-title { cursor: default; }
.dd-cal .mini-foot { justify-content: space-between; }
.dd-btn .dd-ph { color: var(--text-3); }
.dd-btn.dd-date-sm { min-width: 0; font-variant-numeric: tabular-nums; }
.dd-btn.dd-date-sm svg { transform: none !important; }
.cmd-filter-dates .dd-btn { flex: 1; min-width: 0; padding: 0 8px; justify-content: center; }
.cmd-filter-dates .dd-btn svg { display: none; }

/* Primeiros passos (js/pages/inicio.js) */
.pp-wrap { max-width: 720px; margin: 0 auto; padding: 32px 0 48px; display: flex; flex-direction: column; gap: 18px; }
.pp-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; }
.pp-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary-50); color: var(--primary-ink); }
.pp-ico svg { width: 24px; height: 24px; }
.pp-title h1 { margin: 0 0 6px; font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.2; }
.pp-title p { margin: 0; font-size: 15px; line-height: 1.5; }
.pp-skip { margin-top: 6px; white-space: nowrap; font-size: 13px; color: var(--text-2); }
.pp-prog-txt { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.pp-prog-txt b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.pp-bar { height: 8px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.pp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .6s var(--ease-out, ease); }
.pp-group, .pp-help { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-sm); overflow: hidden; }
.pp-group.open { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.pp-ghead { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pp-gico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--primary-50); color: var(--primary-ink); }
.pp-gico svg { width: 19px; height: 19px; }
.pp-gname, .pp-stxt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pp-gname b, .pp-stxt b { font-size: 15px; font-weight: 600; }
.pp-gname small, .pp-stxt small { color: var(--text-3); font-size: 13px; line-height: 1.4; }
.pp-count { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.pp-group.complete .pp-count { color: var(--tone-ok, var(--success)); font-weight: 600; }
.pp-chev svg { width: 16px; height: 16px; color: var(--text-3); transition: transform .2s; }
.pp-group.open .pp-chev svg { transform: rotate(180deg); }
.pp-steps { border-top: 1px solid var(--border); padding: 6px 0; }
.pp-step { display: flex; align-items: center; gap: 14px; padding: 12px 20px; }
.pp-step + .pp-step { border-top: 1px solid var(--border); }
.pp-check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: #fff; transition: background .25s, border-color .25s; }
.pp-check svg { width: 13px; height: 13px; stroke-width: 3; }
.pp-step.ok .pp-check { background: var(--tone-ok, var(--success)); border-color: var(--tone-ok, var(--success)); }
.pp-step.ok .pp-stxt b { color: var(--text-2); }
.pp-step .btn { flex: none; }
.pp-step .btn svg { width: 14px; height: 14px; }
.pp-help { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.pp-end { display: flex; justify-content: center; }
.nav-item.pp-nav { margin-bottom: 6px; }
.nav-item.pp-nav svg { color: var(--primary); }
@media (max-width: 640px) {
  .pp-wrap { padding: 16px 0 96px; }
  .pp-head { grid-template-columns: auto 1fr; }
  .pp-skip { grid-column: 1 / -1; justify-self: start; margin: 0; }
  .pp-title h1 { font-size: 21px; }
  .pp-step, .pp-help { flex-wrap: wrap; }
  .pp-step .btn, .pp-help .btn { width: 100%; justify-content: center; margin-left: 36px; width: calc(100% - 36px); }
  .pp-help .btn { margin-left: 0; width: 100%; }
}
.phone-input .dd-btn { width: 104px; flex: none; }
.phone-input .dd-btn.dd-field { padding: 0 8px 0 10px; }

/* Automação › Configuração: conexão do WhatsApp em cartão (não esticado na largura toda) */
.wa-config { max-width: 460px; }
.wa-cfg { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); box-shadow: var(--shadow-sm); }
.wa-cfg-head { display: flex; align-items: flex-start; gap: 12px; }
.wa-cfg-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-cfg-head strong { font-size: 15px; font-weight: 600; }
.wa-cfg-head .wa-conn-line { margin: 0; }
.wa-cfg-rows { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.wa-cfg-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.wa-cfg-row span { color: var(--text-3); flex: none; }
.wa-cfg-row b { font-weight: 500; text-align: right; min-width: 0; }
.wa-cfg > small { font-size: 12px; line-height: 1.45; }
.wa-cfg .btn.block { width: 100%; justify-content: center; }
.wa-config .auto-risk { margin: 0; }
/* Ícone da conexão: altura do título + situação, verde conectado / vermelho desconectado */
.wa-cfg-head { align-items: center; gap: 14px; }
.wa-cfg-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--fill); color: var(--text-3); transition: background .25s, color .25s; }
.wa-cfg-ic svg { width: 24px; height: 24px; }
.wa-cfg-ic.ok { background: var(--ok-bg); color: var(--ok); }
.wa-cfg-ic.bad { background: var(--danger-bg); color: var(--danger); }
.wa-cfg-warn { color: var(--warn, #b45309); font-weight: 600; }

/* ---------- Filiais: unidade aberta no topo e lista de unidades (js/unidades.js) ---------- */
.top-unit { display: inline-flex; align-items: center; gap: 7px; height: 32px; max-width: 240px; padding: 0 10px 0 11px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .32s var(--smooth), box-shadow .32s var(--smooth); }
.top-unit:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.top-unit b { font-weight: 500; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top-unit svg { width: 15px; height: 15px; flex: none; }
.top-unit .top-unit-chev { width: 13px; height: 13px; color: var(--text-3); }
.unit-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.unit-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); }
.unit-row + .unit-row { border-top: 1px solid var(--border); }
.unit-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--primary-ink);
  background: color-mix(in srgb, var(--primary) 12%, transparent); }
.unit-ico svg { width: 17px; height: 17px; }
.unit-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.unit-name b { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.unit-name small { color: var(--text-3); font-size: 12px; }
.unit-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) { .top-unit { display: none; } }
.unit-copy { display: grid; gap: 12px; margin: 4px 0 12px; }
.unit-copy .switch-row { align-items: flex-start; }
.unit-copy .switch-row small { display: block; font-size: 12px; line-height: 1.4; }
/* Ficha do cliente › Outras unidades (filiais) */
.net-unit + .net-unit { margin-top: 12px; }
.net-unit .panel-title { display: flex; align-items: center; gap: 8px; }
.net-unit .panel-title svg { width: 16px; height: 16px; color: var(--primary-ink); }
.net-visits { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--border); }
.net-visits li { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.net-visits li:last-child { border-bottom: 0; }
.net-visits li span:first-child { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
/* Agendamento online › link da rede (filiais): escolher a unidade */
.net-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.net-head h2 { margin: 0; }
.net-head p { margin: 2px 0 0; }
.net-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; border: 1px solid var(--border); }
.net-units { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.net-unit-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--text); text-decoration: none; background: var(--surface);
  transition: background-color .2s var(--smooth); }
.net-unit-link + .net-unit-link { border-top: 1px solid var(--border); }
.net-unit-link:hover { background: var(--primary-50); }
.net-unit-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--primary-ink);
  background: color-mix(in srgb, var(--primary) 12%, transparent); }
.net-unit-ico svg, .net-unit-link > svg { width: 18px; height: 18px; }
.net-unit-link > svg { color: var(--text-3); flex: none; }
.net-unit-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.net-unit-txt b { font-weight: 600; }
.net-unit-txt small { color: var(--text-2); font-size: 12.5px; }

/* Avisos dentro da pergunta de confirmação (ex.: reabrir comanda) */
:is(.modal, .ui-ghost-box).confirm .confirm-notes { margin: 12px 0 0; padding-left: 18px; text-align: left; color: var(--text-2); font-size: 13px; }
:is(.modal, .ui-ghost-box).confirm .confirm-notes li + li { margin-top: 6px; }
.perm-info .perm-note { display: block; margin-top: 4px; color: var(--primary-ink, var(--text-2)); }
.comanda-modal .pay-box[hidden] { display: none; }
/* Primeiros passos: escolha em dois cartões (ex.: quem lança na comanda) */
.pp-choice { display: grid; gap: 10px; }
.pp-choice .btn { height: auto; padding: 12px 14px; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; white-space: normal; }
.pp-choice .btn small { color: var(--text-2); font-weight: 400; }

/* Seletor de unidade dentro do campo de valor (ex.: desconto geral "R$ / %"): mesmo visual do "R$" fixo, sem encolher */
.unit-input .dd-btn { flex: none; min-height: 0; height: 100%; gap: 2px; padding: 0 6px 0 10px; border: 0; border-radius: 0; background: var(--surface-2); color: var(--text-2); font-weight: 500; }
.unit-input .dd-btn:hover:not(:disabled) { background: var(--fill-hover); border: 0; }
.unit-input .dd-btn span { overflow: visible; }
.unit-input .dd-btn svg { width: 12px; height: 12px; }

/* ---------- Admin: abas das telas agrupadas e a tela Hoje ---------- */
.admin-subnav { flex: none; padding: 22px 24px 0; }
.admin-subnav[hidden] { display: none; }
.admin-subnav .page-head { margin-bottom: 14px; }
.admin-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs button { flex: none; border: 0; background: none; padding: 0 2px 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; font: inherit; font-size: 14.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; }
.admin-tabs button:hover { color: var(--text); }
.admin-tabs button.active { color: var(--text); font-weight: 600; border-bottom-color: var(--primary); }
.admin-tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
/* Telas agrupadas: o título é o do grupo (acima das abas); a tela mostra só a explicação dela e os botões */
body.has-subnav .view { padding-top: 16px; }
body.has-subnav .view > .page-head h2, body.has-subnav .view > .page-head .ai-back { display: none; }
@media (min-width: 901px) { .admin-subnav { padding: 18px 4px 0; } } /* mesmo recuo da .view no computador */
@media (max-width: 900px) { .admin-subnav { padding: 16px 16px 0; } .admin-tabs { gap: 18px; } }
.today-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 520px) { .today-board { grid-template-columns: 1fr; } }
.today-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px); overflow: hidden; }
.today-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.today-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; }
.today-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border); flex: none; color: var(--primary-ink); }
.today-ico svg { width: 16px; height: 16px; }
.tone-warn .today-ico { color: var(--warn-ink); border-color: var(--warn); }
.tone-bad .today-ico { color: var(--danger-ink); border-color: var(--danger); }
.tone-ok .today-ico { color: var(--ok-ink); border-color: var(--ok); }
.today-more { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.today-more svg { width: 14px; height: 14px; }
.today-more:hover { color: var(--text); }
.today-list { list-style: none; margin: 0; padding: 0; }
.today-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.today-row + .today-row { border-top: 1px solid var(--border); }
.today-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.today-main b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-main small { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-act { display: flex; align-items: center; gap: 6px; flex: none; }
.today-done { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px); }
.today-done .today-ico { color: var(--ok-ink); border-color: var(--ok); }
.today-done div { display: flex; flex-direction: column; gap: 2px; }
.today-done small { color: var(--text-2); font-size: 12.5px; }

/* Tabela em cartões (celular): o rodapé "Total" vira uma linha com o valor à direita */
@container (max-width: 640px) {
  .table.stack tfoot { display: block; }
  .table.stack tfoot tr { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--border); }
  .table.stack tfoot td { display: block; padding: 0; border: 0; }
  .table.stack tfoot td:empty { display: none; }
}

/* Observações do cliente para quem não pode alterar: texto, não um campo que parece editável */
.notes-read { margin: 0; white-space: pre-wrap; color: var(--text); }

/* Menu do profissional: lista simples, sem grupos */
.nav-flat { display: flex; flex-direction: column; gap: 2px; }

/* Link próprio do profissional: começo fixo do endereço + o final editável */
.pro-link-field { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pro-link-field > span { overflow-wrap: anywhere; }
.pro-link-field input { flex: 1 1 140px; min-width: 0; }

/* Página do link próprio do profissional: saída discreta para a página do estabelecimento */
.pro-link-other { text-align: center; margin: 20px 0 8px; }

.pro-link-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 15px; color: var(--text); }

/* Painel do profissional: aviso para ativar o resumo da manhã */
.morning-tip { align-items: center; margin-bottom: 16px; }
.morning-tip > span { flex: 1; }

/* Editor de permissões: botão "Copiar de…" ao lado dos modelos */
.perm-presets [data-perm-copy] { display: inline-flex; align-items: center; gap: 4px; }
.perm-presets [data-perm-copy] svg { width: 13px; height: 13px; flex: none; }

/* Admin › Divulgação (Fila e Calendário das redes sociais) */
.soc-sec + .soc-sec { margin-top: 22px; }
.soc-vigia { margin-bottom: 22px; }
.soc-vigia .muted.small { margin-top: 4px; }
.soc-sec > .muted.small { margin: -4px 0 10px; }
.soc-empty { padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius, 14px); }
.soc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 520px) { .soc-list { grid-template-columns: 1fr; } }
.soc-card { display: flex; gap: 14px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px); min-width: 0; }
.soc-thumb { position: relative; flex: none; width: 112px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--text-3); }
.soc-thumb.tall { aspect-ratio: 9 / 16; }
.soc-thumb.post { aspect-ratio: 4 / 5; }
.soc-thumb.wide { aspect-ratio: 16 / 9; width: 150px; align-self: flex-start; }
.soc-thumb img, .soc-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.soc-thumb em { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; }
.soc-thumb .soc-play { position: absolute; inset: auto auto 6px 6px; width: 24px; height: 24px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; }
.soc-thumb .soc-play svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.soc-thumb.fail::after { content: 'Sem prévia'; font-size: 12px; }
.soc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.soc-top { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.soc-top b { font-weight: 600; font-size: 14px; }
.soc-nets { display: flex; flex-wrap: wrap; gap: 6px; }
.soc-net { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-family: inherit; }
button.soc-net { cursor: pointer; }
button.soc-net:hover { border-color: var(--border-strong); color: var(--text); }
.soc-net.done { border-color: var(--ok); color: var(--ok-ink); }
.soc-net svg { width: 12px; height: 12px; }
.soc-cap { margin: 0; font-size: 13px; color: var(--text-2); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.soc-fb { margin: 0; font-size: 12.5px; padding: 8px 10px; border-left: 2px solid var(--primary); background: var(--surface); color: var(--text-2); }
.soc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; align-items: center; }
.soc-acts .icon-btn { margin-left: auto; }
.soc-view .soc-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.soc-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.soc-slide { flex: none; width: min(300px, 80%); min-height: 120px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; scroll-snap-align: start; display: grid; place-items: center; }
.soc-slide.wide { width: 100%; }
.soc-slide img, .soc-slide video { width: 100%; display: block; }
.soc-copy { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); }
.soc-copy > div { flex: 1; min-width: 0; }
.soc-copy p { margin: 2px 0 0; white-space: pre-line; font-size: 13.5px; overflow-wrap: anywhere; }
/* roteiro do YouTube na Fila: texto inteiro para ler antes de aprovar */
.soc-roteiro { white-space: pre-wrap; font-size: 14px; line-height: 1.55; max-height: 62vh; overflow: auto; padding: 12px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.soc-month { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.soc-month b { min-width: 150px; text-align: center; }
.soc-month .muted { margin-left: auto; }
.soc-day { margin-bottom: 14px; }
.soc-day h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: capitalize; }
.soc-day.today h4 { color: var(--primary-ink); }
.soc-day ul { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius, 14px); overflow: hidden; }
.soc-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.soc-row + .soc-row { border-top: 1px solid var(--border); }
.soc-row:hover { background: var(--surface-2); }
.soc-time { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); width: 44px; flex: none; }
.soc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.soc-row-main b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-row-main small { font-size: 12px; }
.soc-from { font-size: 12px; }
.soc-from a { color: var(--text-2); text-decoration: underline; }
.soc-teste { font-size: 12px; color: var(--text-2); }
.soc-work { font-size: 12px; color: var(--text-2); }
.soc-work.now { color: var(--primary-ink); font-weight: 600; }
.soc-auto { font-size: 12px; color: var(--primary-ink); font-weight: 600; }
.soc-auto.off { color: var(--text-2); font-weight: 400; }
.soc-auto.fail { color: var(--danger-ink); font-weight: 400; display: flex; gap: 4px; align-items: flex-start; }
.soc-meta { margin-bottom: 22px; display: grid; gap: 8px; }
.soc-meta-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.soc-meta-row .muted.small { margin-top: 4px; }
.soc-meta-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.soc-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.soc-steps code { font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.soc-page { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 14px; }
@media (max-width: 640px) { .soc-meta-row { flex-direction: column; align-items: flex-start; } }

/* Respostas rápidas do painel do WhatsApp: variáveis logo abaixo da mensagem; pronta escondida fica apagada */
.wa-qm-vars { margin-top: -4px; padding-right: 0; }
.wa-qm-item.is-off .wa-qm-info { opacity: .55; }

/* Respostas rápidas: fechada mostra até 2 linhas (o resto fica no "Mais"); aberta mostra todas, com rolagem se passar da tela */
.wa-quick-acts { display: inline-flex; align-items: center; gap: 12px; }
.wa-quick-dock .wa-quick { max-height: 56px; overflow: hidden; }
.wa-quick-dock.is-open .wa-quick { max-height: calc(100dvh - 190px); overflow-y: auto; overscroll-behavior: contain; }
.wa-quick-more { position: absolute; right: 16px; bottom: 5px; margin: 0; padding: 0; line-height: 1.1; border: 0; background: none; font: inherit; font-size: 11px; color: var(--text-3); cursor: pointer; }
.wa-quick-more:hover { color: var(--text); text-decoration: underline; }
.wa-quick-more[hidden] { display: none; }
.wa-quick-dock:has(.wa-quick-more:not([hidden])) { padding-bottom: 20px; }

/* Presente do voucher (link de aniversário): o cliente descobre o presente antes de agendar */
.gift-reveal { max-width: 420px; margin: 18px auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.gift-reveal .gift-ico { width: 76px; height: 76px; border-radius: 50%; background: var(--primary-50); color: var(--primary-ink); display: grid; place-items: center; }
.gift-reveal .gift-ico svg { width: 36px; height: 36px; }
.gift-reveal .gift-hi { margin: 0; color: var(--text-3); font-size: 14px; }
.gift-reveal h2 { margin: -8px 0 0; font-size: 24px; }
.gift-card { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 22px 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gift-card .gift-value { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--text); }
.gift-card .gift-sub { color: var(--text-2); font-size: 15px; }
.gift-rows { width: 100%; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.gift-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.gift-rows dt { color: var(--text-3); }
.gift-rows dd { margin: 0; font-weight: 600; }
.gift-rows dd.mono { font-family: var(--font-mono); letter-spacing: .04em; }
.gift-reveal .gift-go { width: 100%; min-height: 50px; justify-content: center; font-size: 15px; }
.gift-reveal p { margin: 0; }
.gift-reveal .gift-foot { margin-top: 6px; }

/* Prévia de mensagem com a formatação do WhatsApp (ui.waHtml) */
.wa-bubble-text b { font-weight: 700; }
.wa-bubble-text .wa-code, .wa-bubble-text .wa-mono { font-family: var(--font-mono); font-size: .92em; }
.wa-bubble-text .wa-code { background: color-mix(in srgb, currentColor 8%, transparent); border-radius: 4px; padding: 0 4px; }
.wa-bubble-text .wa-quote { display: inline-block; width: 100%; box-sizing: border-box; border-left: 3px solid color-mix(in srgb, currentColor 25%, transparent); padding-left: 8px; opacity: .8; }
.wa-bubble-text .wa-li { display: inline-block; padding-left: 4px; }

/* Tela de sem internet (js/app.js › semConexao) */
.offline-tela { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px 16px; text-align: center; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; }
.offline-icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.offline-icone svg { width: 30px; height: 30px; }
.offline-tela h1 { margin: 0; font-size: 20px; font-weight: 600; }
.offline-tela p { margin: 0; max-width: 320px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.offline-tela .btn { margin-top: 12px; min-width: 180px; justify-content: center; }