/* ==========================================================================
   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); }
@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; }
}

/* ---------- 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 svg { width: 100%; height: auto; display: block; overflow: visible; }
.pn-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.pn-grid.base { stroke-dasharray: none; }
.pn-axis { font-family: var(--font-mono); font-size: 10px; font-weight: 500; fill: var(--text-3); stroke: none; }
.pn-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: pnDraw 1.1s var(--smooth) both; }
.pn-area { animation: pnFade .9s var(--smooth) .25s both; }
.pn-dot { fill: var(--primary); stroke: var(--surface); stroke-width: 1.5; animation: pnFade .5s var(--smooth) .7s both; }
.pn-dot.zero { fill: var(--border-strong); }
@keyframes pnDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@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-line, .pn-area, .pn-dot, .pn-ring-fill { animation: none; }
}
@media (max-width: 600px) {
  .pn-kpi-foot small { display: none; }
  .pn-kpi .kpi-top { font-size: 11.5px; }
  .pn-axis { font-size: 18px; } /* o gráfico encolhe no celular: letra maior na escala do desenho */
  .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-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: space-between; gap: 16px; margin-bottom: 12px; }
.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); }