:root {
  --bg: #fdf7f9;
  --surface: #ffffff;
  --surface-alt: #fff0f6;
  --border: #f0dfe7;
  --text: #2b2530;
  --text-muted: #8a7d87;
  --shadow: rgba(43, 37, 48, 0.06);

  --primary: #d6336c;
  --primary-dark: #a61e4d;
  --primary-soft: #ffe3ec;
  --on-primary: #ffffff;

  --success: #2f9e44;
  --success-soft: #ebfbee;
  --danger: #e03131;
  --danger-soft: #fff0f0;
  --neutral-soft: #eef0f4;
  --neutral-text: #5c6370;

  /* "Poppins" pro corpo (mais boutique/arredondada que o
     stack de sistema anterior), "Playball" (script) SO pro nome do negocio
     (topbar + login) — inspirado em referencia de app de salao de unhas.
     Nunca usar --font-display em corpo de texto/dado (lista, numero, tabela),
     script fica ilegivel em volume — so em heading de marca, ver .brand-name. */
  --font-body: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Playball", cursive;

  /* Redesign (ref. manicure-admin.html): cantos menos "bolha", cards de borda
     fina com sombra quase imperceptivel — mais cara de painel de gestao. */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1520;
    --surface: #251e2a;
    --surface-alt: #2f2432;
    --border: #3b2e3d;
    --text: #f3edf1;
    --text-muted: #ab9ba6;
    --shadow: rgba(0, 0, 0, 0.35);

    --primary: #ff6f9c;
    --primary-dark: #ff8fb3;
    --primary-soft: rgba(255, 111, 156, 0.16);
    --on-primary: #241019;

    --success: #51cf66;
    --success-soft: rgba(81, 207, 102, 0.14);
    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, 0.14);
    --neutral-soft: rgba(255, 255, 255, 0.06);
    --neutral-text: #b8bfca;
  }
}

/* paletas de cor pre-configuradas (aba Horarios do painel, campo
   "Paleta de cor"). Troca so a familia --primary*/--surface-alt, o resto do
   design system (espacamento, tipografia, sombra) continua igual. Selecionada
   via app_settings.theme_palette e aplicada como
   document.documentElement.dataset.palette = "..." (ver admin/app.js e
   admin-login.html). "rosa" e' o default — ja coberto pelo :root acima, sem
   bloco proprio aqui. */
[data-palette="roxo"] { --primary: #7048e8; --primary-dark: #5f3dc4; --primary-soft: #f3f0ff; --surface-alt: #f3f0ff; }
[data-palette="azul"] { --primary: #1971c2; --primary-dark: #1864ab; --primary-soft: #e7f5ff; --surface-alt: #e7f5ff; }
[data-palette="verde"] { --primary: #2f9e44; --primary-dark: #2b8a3e; --primary-soft: #ebfbee; --surface-alt: #ebfbee; }
[data-palette="neutro"] { --primary: #495057; --primary-dark: #343a40; --primary-soft: #f1f3f5; --surface-alt: #f1f3f5; }
/* Rosé (ref. manicure-admin.html): rosa queimado + bordas rosadas suaves. Troca
   tambem --bg/--border/--text-muted pra casar com o protótipo, nao so a cor. */
[data-palette="rose"] {
  --primary: #c2566b; --primary-dark: #a84460; --primary-soft: #f7e8ec; --surface-alt: #fdf3f5;
  --bg: #faf5f6; --border: #efe0e4; --text: #1a0f12; --text-muted: #7a5560;
}

/* faltava --surface-alt aqui — sem override, ficava presa no valor
   CLARO definido acima (ex: verde #ebfbee), mesmo com o resto da pagina
   escuro (bug achado na pratica: card/fundo verde-claro brilhando no meio
   de fundo escuro). Cada valor abaixo segue o mesmo espirito do :root base
   (--surface-alt um pouco mais claro que --surface, aqui tingido pela cor
   da paleta em vez do rosa/roxo padrao). */
@media (prefers-color-scheme: dark) {
  [data-palette="roxo"] { --primary: #9775fa; --primary-dark: #b197fc; --primary-soft: rgba(151, 117, 250, 0.16); --surface-alt: #2a2440; }
  [data-palette="azul"] { --primary: #4dabf7; --primary-dark: #74c0fc; --primary-soft: rgba(77, 171, 247, 0.16); --surface-alt: #1e2a38; }
  [data-palette="verde"] { --primary: #51cf66; --primary-dark: #69db7c; --primary-soft: rgba(81, 207, 102, 0.16); --surface-alt: #1e2e22; }
  [data-palette="neutro"] { --primary: #ced4da; --primary-dark: #e9ecef; --primary-soft: rgba(206, 212, 218, 0.16); --on-primary: #1b1520; --surface-alt: #2b2d30; }
  [data-palette="rose"] {
    --primary: #e58aa0; --primary-dark: #f0a3b5; --primary-soft: rgba(229, 138, 160, 0.16); --on-primary: #241019; --surface-alt: #2f2432;
    --bg: #1b1520; --border: #3b2e3d; --text: #f3edf1; --text-muted: #ab9ba6;
  }
}

/* painel /dev com visual proprio de dashboard (referencia: fotos de
   dashboard SaaS escuro/verde-neon que a usuaria mandou) — diferente das
   paletas acima, essa NAO segue o tema claro/escuro do sistema, e' sempre
   escura de proposito (:root[data-palette="dev"], nao dentro do @media —
   troca TODOS os tokens de cor, nao so --primary). So usada em /dev
   (dev/index.html, dev-login.html) — nunca no /admin da manicure. */
:root[data-palette="dev"] {
  /* redesign (ref. manicure-dev.html): cinza-azulado estilo editor/GitHub escuro,
     acento verde mais sobrio que o neon anterior, numeros em fonte mono. */
  --bg: #0d1117;
  --surface: #161b22;
  --surface-alt: #1c2128;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --shadow: rgba(0, 0, 0, 0.4);

  --primary: #39d353;
  --primary-dark: #56d364;
  --primary-soft: #122d20;
  --on-primary: #0d1117;

  --success: #39d353;
  --success-soft: #122d20;
  --danger: #f85149;
  --danger-soft: #3b0d0c;
  --neutral-soft: #21262d;
  --neutral-text: #8b949e;

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-sm: 6px;
  --radius: 8px;
}

/* /dev: numeros dos cards de resumo em mono, rotulo em caixa-alta (mesmo .stat
   do /admin) e badges de status com borda fina, no estilo do protótipo. */
:root[data-palette="dev"] .summary-pill.stat .num { font-family: var(--font-mono); font-size: 24px; }
:root[data-palette="dev"] .summary-pill { box-shadow: none; transition: border-color 0.12s; }
:root[data-palette="dev"] .summary-pill:hover { border-color: var(--primary); }
:root[data-palette="dev"] .card { box-shadow: none; }
:root[data-palette="dev"] .status-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--border);
}
:root[data-palette="dev"] .status-active,
:root[data-palette="dev"] .status-em_dia,
:root[data-palette="dev"] .status-pago { border-color: #2ea043; }
:root[data-palette="dev"] .status-suspended_panel,
:root[data-palette="dev"] .status-suspended_full,
:root[data-palette="dev"] .status-atrasado { border-color: #6b1c1c; }
/* filtros compactos no desktop (16px so' existe pra evitar zoom no iOS) */
@media (min-width: 900px) {
  :root[data-palette="dev"] .list-toolbar input,
  :root[data-palette="dev"] .list-toolbar select { font-size: 13px; padding: 8px 10px; background: var(--surface-alt); }
  :root[data-palette="dev"] .list-toolbar input { flex: 2 1 240px; }
}
:root[data-palette="dev"] .dev-business-card { transition: border-color 0.12s; }
:root[data-palette="dev"] .dev-business-card:hover { border-color: var(--primary); }

/* cartao do ambiente no topo da barra do /dev (ref. .sb-env): bolinha + nome */
.drawer-env {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
  padding: 8px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
  overflow: hidden;
}
.drawer-env .env-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 6px var(--primary); flex-shrink: 0; }
.drawer-env .env-name { flex: 1; font-family: var(--font-mono, monospace); white-space: nowrap; }
.drawer-env .env-tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid #2ea043; background: var(--primary-soft); color: var(--primary); font-family: var(--font-mono, monospace); }
@media (min-width: 900px) {
  .drawer:not(:hover) .drawer-env { background: none; border-color: transparent; padding: 8px 0; justify-content: center; }
  .drawer:not(:hover) .drawer-env .env-name, .drawer:not(:hover) .drawer-env .env-tag { display: none; }
  body.nav-pinned .drawer .drawer-env { background: var(--surface-alt); border-color: var(--border); padding: 8px 10px; justify-content: flex-start; }
  body.nav-pinned .drawer .drawer-env .env-name, body.nav-pinned .drawer .drawer-env .env-tag { display: inline; }
}

/* mesmo "clima" classic do site publico (ver comentario grande em
   src/public/site/style.css) aplicado tambem ao painel — sem isso, o painel
   de uma barbearia continuava rosa/script mesmo com o site publico dela ja
   escuro (2 relatos reais seguidos: "design da barbearia nao ta legal" no
   painel, so' o site tinha sido corrigido). Diferente das paletas
   rosa/roxo/azul/verde/neutro (manuais, so trocam --primary), esse aqui e'
   AUTOMATICO pelo segmento (mood, ver src/segments.js) e sobrescreve TUDO
   (mesmo padrao do bloco [data-palette="dev"] acima) — admin-login.html e
   admin/app.js setam data-mood a partir de cfg.mood (GET /admin/config). */
:root[data-mood="classic"] {
  --bg: #14110f;
  --surface: #1c1815;
  --surface-alt: #241f1a;
  --border: rgba(255, 255, 255, 0.12);
  --text: #f3ece1;
  --text-muted: #a89d8d;
  --shadow: rgba(0, 0, 0, 0.5);

  --primary: #e0592a; /* laranja-avermelhado — mesma cor do site publico, ver src/public/site/style.css */
  --primary-dark: #b8451f;
  --primary-soft: rgba(224, 89, 42, 0.16);
  --on-primary: #1c1006;

  --success: #6b9e6a;
  --success-soft: rgba(107, 158, 106, 0.16);
  --danger: #d9534f;
  --danger-soft: rgba(217, 83, 79, 0.16);
  --neutral-soft: rgba(255, 255, 255, 0.06);
  --neutral-text: #a89d8d;

  --font-display: "Bebas Neue", "Oswald", var(--font-body);

  /* cantos mais retos — sinalizacao de barbearia, nao o arredondado "boutique" */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
}
:root[data-mood="classic"] .brand-name {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

* { box-sizing: border-box; overflow-wrap: break-word; }

html { -webkit-text-size-adjust: 100%; }

/* rede de seguranca contra overflow horizontal no celular ("aba do
   /dev fazendo scroll pro lado", bug real reportado) — a página nunca
   devia rolar de lado, só de cima pra baixo. overflow-wrap: break-word no
   `*` acima cobre a causa mais provavel (texto sem espaço — nome de
   negócio comprido, mensagem de sugestão com uma palavra/link grande —
   nunca tinha isso, um texto assim empurrava a largura da página inteira
   em vez de quebrar linha); overflow-x:hidden aqui é o fallback pra
   qualquer outra causa que escapar disso. So no <html>, de propósito —
   NÃO em <body> também: `nav.tabs` usa `position: sticky`, e
   colocar overflow (mesmo só o eixo x) num ANCESTRAL direto de elemento
   sticky pode quebrar a "colagem" dele em alguns navegadores (vira
   container de scroll novo, sticky passa a calcular relativo a ele em vez
   da viewport) — <html> é ancestral mais distante, sem esse risco. */
html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  font-size: 15px;
  line-height: 1.45;
  /* mesmo "pisca" do site publico (ver comentario grande em
     src/public/site/style.css) — admin-login.html/admin/app.js marcam
     .ready depois de aplicar data-palette/data-mood vindos de /admin/config. */
  opacity: 0;
  transition: opacity 0.25s ease;
}
body.ready { opacity: 1; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 400; /* Playball so tem um peso — bold sintetico fica ruim */
  color: var(--primary-dark);
}

button { font-family: inherit; cursor: pointer; }

input, select {
  font-family: inherit;
  font-size: 16px; /* evita zoom automatico no iOS */
  color: var(--text);
  background: var(--surface);
}

a { color: var(--primary); }

/* --- login --- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 30% 15%, var(--primary-soft), transparent 55%), var(--bg);
}

.login-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 44px 28px 32px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 16px 44px var(--shadow);
  text-align: center;
  border: 1px solid var(--border);
}

.login-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--surface-alt), var(--primary-soft));
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin: 0 auto 18px;
}
.login-icon svg { width: 38px; height: 38px; }

.login-card h1 { margin: 0 0 6px; font-size: 32px; letter-spacing: 0.01em; }
.login-card .muted { color: var(--text-muted); margin: 0 0 26px; font-size: 13.5px; }

.login-card input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.15s;
}
.login-card input:focus { border-color: var(--primary); }

.login-card button {
  width: 100%;
  padding: 13px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  transition: filter 0.15s, transform 0.05s;
}
.login-card button:hover { filter: brightness(1.05); }
.login-card button:active { transform: scale(0.98); }

.error { color: var(--danger); font-size: 13px; margin: 14px 0 0; min-height: 16px; font-weight: 500; }

/* --- painel --- */

header.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 60px;
}

header.topbar h1 {
  font-size: 20px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
header.topbar h1 .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.topbar-icon svg { width: 16px; height: 16px; }

#logout-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
  transition: background 0.15s;
}
#logout-btn:hover { background: var(--neutral-soft); }

/* nav.tabs — ainda usado por /dev e /o (tira de abas no topo). O /admin
   passou pra gaveta lateral (.drawer). */
nav.tabs {
  display: flex;
  gap: 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 60px;
  z-index: 20;
  overflow-x: auto;
  padding: 10px 12px;
}
nav.tabs button {
  flex: 1;
  min-width: 76px;
  padding: 9px 12px;
  border: none;
  background: var(--surface-alt);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
nav.tabs button.active { color: var(--on-primary); background: var(--primary); }

/* --- gaveta lateral do /admin --- */
.drawer-toggle {
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
  margin-right: 8px;
  line-height: 0;
  flex-shrink: 0;
}
.drawer-toggle svg { width: 22px; height: 22px; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(272px, 82vw);
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 50;
  padding: 0 12px calc(14px + env(safe-area-inset-bottom));
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer.open { transform: translateX(0); box-shadow: 0 0 60px -10px var(--shadow); }
/* com os grupos de Configurações a gaveta passou da altura da tela —
   sem isso o flex "espremia" os itens (os rótulos de grupo, com overflow
   hidden, saíam cortados). Item nunca encolhe; a gaveta rola. */
.drawer > * { flex-shrink: 0; }
.drawer { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* cabecalho proprio da gaveta — a barra lateral passa a ser "dona"
   do canto superior esquerdo (antes ficava um vazio ali, ver print). */
.drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  flex-shrink: 0;
  margin: 0 -12px 6px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
}
.drawer-brand .brand-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--on-primary);
}
.drawer-brand .brand-ico svg { width: 16px; height: 16px; }

/* card do negocio no topo da barra (ref. .sb-biz do protótipo) */
.drawer-biz {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 2px;
  padding: 9px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-shrink: 0;
  overflow: hidden;
}
.drawer-biz .biz-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
}
.drawer-biz .biz-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.drawer-biz .biz-text b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-biz .biz-text small { font-size: 11px; color: var(--text-muted); }

.drawer-group-label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  opacity: 0.8;
  white-space: nowrap;
  padding: 16px 12px 6px;
}
.drawer-group-label:first-of-type { padding-top: 6px; }

.drawer button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.drawer button svg { width: 17px; height: 17px; flex-shrink: 0; color: currentColor; opacity: 0.75; }
.drawer button [data-nav-icon] { display: inline-flex; flex-shrink: 0; }
.drawer button:hover { background: var(--surface-alt); color: var(--text); }
.drawer button.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.drawer button.active svg { color: var(--primary); opacity: 1; }

/* --- grupos sanfona (Configurações) na gaveta ---
   abrir um grupo fecha os outros (app.js). Altura anima via grid 0fr→1fr. */
.nav-acc { display: flex; flex-direction: column; flex-shrink: 0; }
.drawer .nav-acc-head { position: relative; }
.nav-acc-head .nav-acc-chev {
  margin-left: auto;
  width: 15px !important;
  height: 15px !important;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.12s ease;
}
.nav-acc.open .nav-acc-head { color: var(--text); }
.nav-acc.open .nav-acc-head .nav-acc-chev { transform: rotate(180deg); opacity: 0.85; }
/* grupo com o item atual dentro: o cabeçalho ganha a cor de destaque */
.nav-acc.has-active .nav-acc-head { color: var(--primary); }
.nav-acc.has-active .nav-acc-head svg { color: var(--primary); opacity: 1; }
.nav-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.nav-acc.open .nav-acc-body { grid-template-rows: 1fr; }
.nav-acc-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  visibility: hidden;
  transition: visibility 0s linear 0.22s;
}
.nav-acc.open .nav-acc-inner { visibility: visible; transition-delay: 0s; padding-block: 2px 6px; }
.drawer .nav-acc-inner button {
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 7px;
  position: relative;
}
.drawer .nav-acc-inner button.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
/* marquinha na linha-guia ao lado do item ativo */
.drawer .nav-acc-inner button.active::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: var(--primary);
}
@media (prefers-reduced-motion: reduce) {
  .nav-acc-body, .nav-acc-head .nav-acc-chev { transition: none; }
}

/* "Fixar menu" foi pro RODAPE da gaveta (antes ficava solto no topo,
   cortado — ver print). margin-top:auto empurra pro fim. */
.drawer-pin {
  margin-top: auto;
  gap: 10px !important;
  color: var(--text-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
  border-top: 1px solid var(--border);
  border-radius: 0 !important;
  margin-left: -12px;
  margin-right: -12px;
  padding-left: 24px !important;
}
.drawer-pin svg { width: 15px !important; height: 15px !important; }
.drawer-pin:hover { background: var(--surface-alt); }
body.nav-pinned .drawer-pin { color: var(--primary) !important; }
body.nav-pinned .drawer-pin svg { color: var(--primary) !important; }

main { padding: 16px; max-width: 720px; margin: 0 auto; padding-bottom: 64px; }

/* titulo da secao atual no topbar — so aparece no desktop (ver @media abaixo) */
header.topbar h1 .page-title { display: none; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

/* --- desktop: gaveta vira barra fixa; rail (só ícones) por padrão, expande no
   hover; "Fixar menu" trava ela aberta (localStorage) e empurra o conteúdo. --- */
@media (min-width: 900px) {
  .drawer-toggle { display: none; }
  .drawer-backdrop { display: none !important; }

  /* topbar fica só sobre a área de conteúdo; a gaveta é dona do canto esquerdo.
     Escopado em body:has(.drawer) — /o (org) ainda usa nav.tabs, sem gaveta. */
  body:has(.drawer) header.topbar { z-index: 40; margin-left: 64px; transition: margin-left 0.18s ease; }
  body:has(.drawer).nav-pinned header.topbar { margin-left: 236px; }

  .drawer {
    transform: none;
    top: 0;                 /* altura total — sem o vazio no topo */
    width: 64px;
    z-index: 60;            /* acima do topbar */
    box-shadow: none;
    overflow: hidden;
    transition: width 0.18s ease, box-shadow 0.18s ease;
  }
  .drawer .dl { opacity: 0; white-space: nowrap; transition: opacity 0.12s ease; }
  /* rótulo de grupo some SEM deixar buraco quando a gaveta está recolhida */
  .drawer .drawer-group-label {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.12s ease;
  }
  .drawer button.drawer-pin { display: none; }

  .drawer:hover {
    width: 236px;
    overflow-y: auto;
    box-shadow: 10px 0 44px -14px var(--shadow);
  }
  .drawer:hover .dl { opacity: 1; }
  .drawer:hover .drawer-group-label { height: auto; padding: 16px 12px 6px; opacity: 0.8; }
  .drawer:hover button.drawer-pin { display: flex; opacity: 1; }

  /* rail recolhido: sanfona fica só com o ícone do grupo (subitens não cabem);
     o grupo do item atual ganha um pontinho pra não "sumir" da barra */
  body:not(.nav-pinned) .drawer:not(:hover) .nav-acc-body { grid-template-rows: 0fr; }
  body:not(.nav-pinned) .drawer:not(:hover) .nav-acc-inner { visibility: hidden; }
  body:not(.nav-pinned) .drawer:not(:hover) .nav-acc-chev { display: none; }
  body:not(.nav-pinned) .drawer:not(:hover) .nav-acc.has-active .nav-acc-head { background: var(--primary-soft); }

  /* rail recolhido: card do negocio vira so o avatar (sem caixa) */
  .drawer:not(:hover) .drawer-biz { background: none; border-color: transparent; padding: 9px 0; justify-content: center; }
  body.nav-pinned .drawer .drawer-biz { background: var(--surface-alt); border-color: var(--border); padding: 9px 10px; justify-content: flex-start; }

  /* desktop: o titulo da pagina atual assume o topo; o nome do negocio ja esta no card da barra */
  body:has(.page-title) header.topbar h1 .topbar-icon,
  body:has(.page-title) header.topbar h1 .brand-name,
  body:has(.page-title) header.topbar h1 .brand-name-plain { display: none; }
  body:has(.page-title) header.topbar h1 .page-title { display: block; }

  /* só empurra o conteúdo quando REALMENTE há gaveta (não em /o) — usa a largura
     toda (antes: coluna de 760px com 2/3 da tela vazia no desktop) */
  .drawer ~ main { margin-left: 64px; margin-right: 0; transition: margin-left 0.18s ease; max-width: 1240px; padding: 24px; padding-bottom: 64px; }

  body.nav-pinned .drawer { width: 236px; overflow-y: auto; box-shadow: none; }
  body.nav-pinned .drawer .dl { opacity: 1; }
  body.nav-pinned .drawer .drawer-group-label { height: auto; padding: 16px 12px 6px; opacity: 0.8; }
  body.nav-pinned .drawer button.drawer-pin { display: flex; opacity: 1; }
  body.nav-pinned .drawer ~ main { margin-left: 236px; }
}
@media (max-width: 899px) {
  .drawer button.drawer-pin { display: none; }
}

.tab-panel { display: none; animation: fade-in 0.18s ease; }
.tab-panel.active { display: block; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px var(--shadow);
}

.card h3 { margin: 0 0 12px; font-size: 14.5px; font-weight: 700; }
.card p.hint { margin: -8px 0 12px; font-size: 12.5px; color: var(--text-muted); }

/* cabecalho de card com titulo + acao (ex: "+ Novo cliente") na
   mesma linha, em vez do formulario ficar sempre visivel embaixo da lista */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h3 { margin: 0; }

.search-input {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.muted { color: var(--text-muted); }
.empty { color: var(--text-muted); text-align: center; padding: 28px 0; font-size: 13.5px; }

/* dashboard (aba Inicio) */

.greeting {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 4px 0 14px;
}

.next-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.next-card.empty-state {
  color: var(--text-muted);
  font-size: 13.5px;
  justify-content: center;
  text-align: center;
  padding: 22px 0;
}

.next-time-badge {
  background: radial-gradient(circle at 30% 20%, var(--surface-alt), var(--primary-soft));
  color: var(--primary-dark);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-align: center;
  min-width: 64px;
  flex-shrink: 0;
}
.next-time-badge .time { font-size: 18px; font-weight: 800; line-height: 1.1; }
.next-time-badge .rel { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }

.next-card .details { min-width: 0; }
.next-card .details .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; margin-bottom: 2px; }
.next-card .details .client { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-card .details .service { color: var(--text-muted); font-size: 13px; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.qa-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text);
  font-weight: 600;
  text-align: center;
  transition: background 0.15s, transform 0.05s;
  box-shadow: 0 1px 3px var(--shadow);
}
.qa-btn:hover { background: var(--surface-alt); }
.qa-btn:active { transform: scale(0.97); }
.qa-btn .qa-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qa-btn .qa-icon svg { width: 18px; height: 18px; }

/* resumo do dia */

.summary-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap; /* sem isso, com 5 pills (Fase 62 acrescentou "Mostruário") o texto ("Receita prevista/mês") não cabe numa tela de celular e estoura a largura da página */
}

.summary-pill {
  flex: 1 1 130px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 1px 3px var(--shadow);
}

.summary-pill .num { font-size: 22px; font-weight: 800; color: var(--primary); line-height: 1.1; }
.summary-pill .label { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* variante "stat" (aba Inicio): rotulo em caixa-alta em cima, numero grande
   embaixo, como o .stat-card do protótipo. Mesmo markup base, so a ordem muda. */
.summary-pill.stat { padding: 16px 18px; }
.summary-pill.stat .label {
  order: -1;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.summary-pill.stat { display: flex; flex-direction: column; }
.summary-pill.stat .num { font-size: 26px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* aba Inicio no desktop: resumo em linha cheia; "proximo" + "hoje" a esquerda,
   atalhos numa coluna lateral (antes tudo empilhado numa faixa de ~730px). */
@media (min-width: 1100px) {
  #tab-inicio.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "greet greet" "sum sum" "next qa" "today qa";
    column-gap: 16px;
    align-items: start;
  }
  #tab-inicio .greeting { grid-area: greet; }
  #tab-inicio .summary-strip { grid-area: sum; }
  #tab-inicio .next-card { grid-area: next; }
  #tab-inicio > .card:not(.next-card) { grid-area: today; }
  #tab-inicio .quick-actions { grid-area: qa; grid-template-columns: 1fr; margin-top: 0; }
  #tab-inicio .qa-btn { flex-direction: row; justify-content: flex-start; padding: 12px 14px; gap: 12px; font-size: 13px; }
}

/* agenda */

/* barra de modo (dia/semana/mês) + navegação pra frente/trás */
.agenda-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.agenda-viewmode, .agenda-nav { display: flex; gap: 4px; }
.agenda-viewmode button, .agenda-nav button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.agenda-viewmode button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.agenda-nav button { min-width: 38px; }
.agenda-nav #agenda-today { font-size: 12.5px; }
.agenda-range {
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: capitalize;
}

/* grade do mês */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}
.month-dow {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 2px 0 4px;
}
.month-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 5px 6px;
  cursor: pointer;
}
.month-cell .month-num { font-size: 12.5px; font-weight: 600; color: var(--text); }
.month-cell.other-month { opacity: 0.4; }
.month-cell.today { border-color: var(--primary); }
.month-cell.today .month-num { color: var(--primary); }
.month-cell.active { background: var(--primary); border-color: var(--primary); }
.month-cell.active .month-num { color: var(--on-primary); }
.month-count, .day-count {
  position: absolute;
  left: 6px;
  bottom: 5px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 10px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.month-cell.active .month-count { background: var(--on-primary); color: var(--primary); }
.week-strip button { position: relative; }
.week-strip button .day-count { position: static; margin: 3px auto 0; }
.week-strip button.active .day-count { background: var(--on-primary); color: var(--primary); }

.week-strip {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.week-strip button {
  flex: 1;
  min-width: 44px;
  padding: 9px 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  font-size: 11.5px;
  text-align: center;
  line-height: 1.5;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background 0.15s, border-color 0.15s;
}

.week-strip button .day-num { display: block; font-size: 16px; font-weight: 700; color: var(--text); }

.week-strip button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.week-strip button.active .day-num { color: var(--on-primary); }

.week-strip button.today:not(.active) { border-color: var(--primary); color: var(--primary); }
.week-strip button.today:not(.active) .day-num { color: var(--primary); }

.appt-item, .block-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  gap: 10px;
}

.appt-item .last-visit { font-size: 12px; text-align: right; white-space: nowrap; }

.appt-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-basis: 100%;
  justify-content: flex-end;
}

.pay-select {
  padding: 6px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}

/* desconto/credito de indicacao na hora de concluir */
.discount-input {
  width: 78px;
  padding: 6px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.credit-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--primary);
  white-space: nowrap;
  cursor: pointer;
}
.credit-check input { margin: 0; }
.credit-tag { color: var(--primary); font-weight: 600; }

.appt-item:last-child, .block-item:last-child { margin-bottom: 0; }

.appt-time { font-weight: 700; min-width: 46px; font-variant-numeric: tabular-nums; }
.appt-info { flex: 1; min-width: 0; }
.appt-info .client { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-info .service { color: var(--text-muted); font-size: 12.5px; margin-top: 1px; }

.status-badge {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--neutral-soft);
  color: var(--neutral-text);
}
.status-cancelled { background: var(--danger-soft); color: var(--danger); }
.status-confirmed { background: var(--success-soft); color: var(--success); }
.status-completed { background: var(--primary-soft); color: var(--primary-dark); }
.status-no_show { background: var(--danger-soft); color: var(--danger); }
.status-inactive { background: var(--danger-soft); color: var(--danger); margin-left: 4px; }
/* negocio de mostruario no /dev */
.dev-business-card.showcase { opacity: 0.82; border-style: dashed; }

/* aba Mostruário do /dev */
.showcase-add { margin: 14px 0 18px; }
.showcase-add > label { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.showcase-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.showcase-add-row select { flex: 1; min-width: 180px; }
.showcase-add-row .btn-primary { flex: 0 0 auto; }
#showcase-preview {
  width: 100%;
  height: 620px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

/* seletor segmentado (tipo de bloqueio no modal) */
.seg-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface-alt);
  border-radius: 12px;
  padding: 3px;
}
.seg-toggle button {
  flex: 1;
  border: 0;
  background: none;
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.seg-toggle button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px var(--shadow); }

/**/
.promo-tag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 1px 6px; border-radius: 20px;
  background: var(--danger-soft); color: var(--danger); vertical-align: 1px;
}
.service-row .muted s { opacity: 0.6; }
.review-stars { color: #e0a800; letter-spacing: 1px; font-size: 12px; }
.geo-row { display: flex; gap: 8px; }
.geo-row input { flex: 1; min-width: 0; }
.confirmed-tick { display: inline-flex; vertical-align: -2px; color: var(--success); }
.confirmed-tick svg { display: block; width: 14px; height: 14px; }

/* agendamento feito pela cliente na pagina publica */
.source-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  vertical-align: 1px;
}
.status-active { background: var(--success-soft); color: var(--success); }
.status-suspended_panel, .status-suspended_full { background: var(--danger-soft); color: var(--danger); }

/* cobranca do painel dev — so indicativo, nunca cobranca de verdade */
.status-em_dia { background: var(--success-soft); color: var(--success); }
.status-atrasado { background: var(--danger-soft); color: var(--danger); }
.status-sem_cobranca { background: var(--neutral-soft); color: var(--neutral-text); }

/* faturas manuais — .status-atrasado reaproveitado de cima de
   proposito (mesma cor, mesmo sentido). so falta pago/pendente. */
.status-pago { background: var(--success-soft); color: var(--success); }
.status-pendente { background: var(--neutral-soft); color: var(--neutral-text); }

/* painel dev */

.dev-business {
  padding: 14px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.dev-business:last-child { margin-bottom: 0; }

/* busca/filtro/ordenação da lista de negócios do /dev — tudo
   client-side (cachedBusinesses já está em memória). */
.list-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
/* busca sempre sozinha na 1a linha (basis 100%) — os selects tem basis
   pequeno de proposito, pra caber 2-3 por linha tanto no desktop quanto
   empilhado no celular, sem depender de quanto sobra da busca. */
.list-toolbar input { flex: 1 1 100%; }
.list-toolbar select { flex: 1 1 140px; }
/* sem isso, os dois usam a aparencia NATIVA do navegador (input
   vira retangulo reto, select vira pilula arredondada no iOS) — mesmo
   padrao visual do .form-row (borda + raio + fundo consistente com o resto
   do painel). font-size fica de fora de proposito (o `input, select` global
   ja fixa 16px — abaixo disso o iOS da zoom automatico ao focar, o mesmo
   bug de "tela forçada pro lado" desta sessao). */
.list-toolbar input,
.list-toolbar select {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.list-toolbar input:focus,
.list-toolbar select:focus {
  border-color: var(--primary);
}

/* negócio virou card compacto (era .dev-business inteira, sempre
   com todo campo de edição visível) — grid pra caber vários lado a lado,
   card só com o essencial + lápis pra abrir o modal de edição. */
.dev-business-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.dev-business-card {
  padding: 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.dev-business-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}
.dev-business-card-head strong { line-height: 1.3; }
.dev-business-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.dev-business-card .btn-secondary {
  display: block;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  text-decoration: none;
}

.dev-business-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.dev-business-actions .btn-primary, .dev-business-actions .btn-secondary {
  padding: 9px 14px;
  font-size: 13px;
  text-decoration: none;
}

.business-history {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.history-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 6px 0;
}

/* faturas manuais — mesmo bloco visual de .business-history,
   classe separada so' pra nao misturar os dois toggles */
.business-invoices {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.invoice-new-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 10px;
}
.invoice-new-form .form-row { margin-bottom: 0; }
.invoice-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.invoice-row:last-child { border-bottom: none; }
.invoice-row-info { display: flex; flex-direction: column; gap: 2px; }
.invoice-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.invoice-row-actions button {
  font-size: 11.5px;
  padding: 5px 8px;
}

.dev-business-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.icon-btn {
  border: none;
  background: none;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background 0.15s;
  line-height: 1;
}
.icon-btn svg { display: block; width: 18px; height: 18px; }
.icon-btn:hover { background: var(--neutral-soft); }
.icon-btn.danger { color: var(--danger); }
.icon-btn.primary { color: var(--primary); }

/* formularios */

.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 5px; font-weight: 500; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  font-size: 14px;
}
.form-row textarea { resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--primary); }

/* foto/descricao por servico */
.service-row-wrap { margin-bottom: 8px; }
.service-row-wrap .service-row { margin-bottom: 6px; }
.service-photo-panel {
  padding: 12px 14px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}
.service-photo-preview, .about-image-preview {
  max-width: 140px;
  border-radius: var(--radius-sm);
  display: block;
  margin-bottom: 10px;
}
.about-image-preview { max-width: 200px; aspect-ratio: 4 / 5; object-fit: cover; }

.form-row.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.form-row.switch-row label:first-child { margin-bottom: 0; font-size: 14px; color: var(--text); }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  transition: filter 0.15s, transform 0.05s;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
}

.btn-with-icon { display: inline-flex; align-items: center; gap: 8px; }
.btn-with-icon svg { width: 16px; height: 16px; flex-shrink: 0; }

.service-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.service-row:last-child { margin-bottom: 0; }
.service-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.service-row.inactive { opacity: 0.45; }
.service-row input[type="number"] {
  width: 68px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* financeiro */

.revenue-row { padding: 10px 14px; background: var(--surface-alt); border-radius: var(--radius-sm); margin-bottom: 8px; }
.revenue-row:last-child { margin-bottom: 0; }
.revenue-row-head { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.revenue-row-head span:first-child { font-weight: 600; }
.revenue-row-head span:last-child { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.revenue-bar { height: 6px; border-radius: 6px; background: var(--neutral-soft); overflow: hidden; }
.revenue-bar-fill { height: 100%; background: var(--primary); border-radius: 6px; }

/* toggle switch (horarios) */

.hours-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.hours-row:last-child { margin-bottom: 0; }
.hours-row .day-label { width: 38px; font-weight: 700; font-size: 12.5px; text-transform: uppercase; color: var(--text-muted); }

.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute;
  inset: 0;
  background: var(--neutral-soft);
  border-radius: 20px;
  transition: background 0.15s;
}
.switch .track::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: var(--surface);
  border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px var(--shadow);
}
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::before { transform: translateX(16px); }

.hours-row input[type="time"] {
  width: 104px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.hours-row.closed input[type="time"], .hours-row.closed .until-label { visibility: hidden; }
.hours-row.closed .day-label { color: var(--text-muted); }
.hours-row .closed-label {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  display: none;
}
.hours-row.closed .closed-label { display: inline; }

/* --- aba Ajustes: secoes (navegacao na gaveta, sanfona) --- */

/* cada secao = varios cards de 1 assunto + 1 botao salvar no fim.
   Largura de leitura confortavel no desktop (formulario esticado em 1240px
   fica com campo de 1m de largura). */
.settings-section { max-width: 760px; animation: fade-in 0.18s ease; }
.settings-section .card h3 { margin-bottom: 4px; }
.settings-section .card > .hint:first-of-type { margin-top: 0; margin-bottom: 14px; }
.settings-section .card .form-row:last-child { margin-bottom: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 4px;
}
.settings-actions .btn-primary { min-width: 160px; }
@media (max-width: 599px) {
  .settings-actions .btn-primary { width: 100%; }
}

.settings-section > .card:first-child { margin-top: 0; }

/* --- Aparencia: seletor de cor principal/secundaria --- */

.color-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.color-field input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: none;
  cursor: pointer;
  padding: 3px;
  flex-shrink: 0;
}
.color-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 9px; }
.color-field input[type="color"]::-moz-color-swatch { border: none; border-radius: 9px; }
.color-field .color-field-label { font-size: 14px; font-weight: 600; }
.color-field .color-field-hint { font-size: 12px; color: var(--text-muted); }

.palette-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 8px;
}
.palette-swatches button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.palette-swatches button.active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}
.palette-swatches button span {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
}

/* toast */

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--text);
  color: var(--bg);
  padding: 11px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 8px 24px var(--shadow);
  max-width: 90vw;
  text-align: center;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* modal do QR Pix — <dialog> nativo, sem lib nenhuma. ::backdrop e'
   pseudo-elemento proprio do <dialog>, so existe enquanto showModal() ta ativo. */
.pix-modal {
  border: none;
  border-radius: 20px;
  padding: 28px;
  width: min(320px, 90vw);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 20px 60px var(--shadow);
  text-align: center;
  position: relative;
}
.pix-modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.pix-modal h3 { margin: 0 0 4px; font-size: 17px; }
.pix-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}
.pix-modal-close svg { width: 18px; height: 18px; display: block; }
.pix-amount { font-size: 22px; font-weight: 700; color: var(--primary); margin: 0 0 16px; }
.pix-modal img { width: 220px; height: 220px; border-radius: 12px; background: #fff; padding: 8px; }
.pix-modal textarea {
  width: 100%;
  margin-top: 16px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  font-size: 11px;
  font-family: monospace;
  resize: none;
}
.pix-modal .btn-primary { width: 100%; margin-top: 14px; }

/* mesmo <dialog> nativo do pix-modal acima, generico pra um
   formulario em vez de so QR+texto (mais largo, texto alinhado a esquerda
   em vez de centralizado). */
.form-modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 28px;
  /* largura acompanha o aparelho: ate 560px no computador/tablet, quase a
     tela toda no celular (ver @media abaixo). max-width: none tira o limite
     padrao do <dialog> do navegador, que encolhia no celular. */
  width: min(560px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 20px 60px var(--shadow);
  position: relative;
}
.form-modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.form-modal h3 { margin: 0 0 4px; font-size: 17px; }
.form-modal .btn-primary { width: 100%; margin-top: 4px; }
@media (max-width: 640px) {
  .form-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 22px 16px; border-radius: 18px; }
  .form-modal .form-row-pair { flex-direction: column; gap: 0; }
}

/* modal de criar/editar negocio (/dev) — cabecalho, menu lateral de
   secoes, cartoes e rodape fixo (Cancelar/Salvar). So' o corpo rola.
   bug real achado em producao — "display: flex" sem o "[open]"
   sobrescreve a regra padrao do navegador "dialog:not([open]) { display:
   none }" (origem "author" ganha da UA independente de especificidade), ou
   seja o modal SEMPRE aparecia em fluxo normal no fim da pagina, mesmo
   fechado. Por isso todo display aqui vai com [open]. */
#business-modal[open] {
  padding: 0;
  width: min(1120px, 96vw);
  height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
}
#business-modal.is-create[open] { width: min(860px, 96vw); height: auto; max-height: 92vh; }
#business-modal .bm-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.bm-head-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
}
.bm-head-icon svg { width: 28px; height: 28px; }
.bm-head-text { flex: 1; min-width: 0; }
#business-modal .bm-head h3 { font-size: 20px; margin: 2px 0 2px; }
#business-modal .bm-head .hint { margin: 0; }
#business-modal .modal-quicklinks { margin-top: 8px; }
#business-modal .dev-business-actions:empty { display: none; }
#business-modal .dev-business-actions .btn-secondary { padding: 3px 10px; font-size: 12px; }
.bm-close {
  width: 38px; height: 38px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
  cursor: pointer;
}
.bm-close:hover { color: var(--text); border-color: var(--text-muted); }
.bm-close svg { width: 18px; height: 18px; }

.bm-layout { display: flex; flex: 1; min-height: 0; }
.bm-nav {
  width: 220px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.bm-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  color: var(--text-muted);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  line-height: 1.25;
}
.bm-nav-item[hidden] { display: none; }
.bm-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.bm-nav-item:hover { background: var(--surface-alt); color: var(--text); }
.bm-nav-item.is-active {
  background: var(--primary-soft);
  border-left-color: var(--primary);
  color: var(--text);
  font-weight: 600;
}
.bm-nav-item.is-active svg { color: var(--primary); }
.bm-nav-tip {
  margin-top: auto;
  padding: 18px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.bm-nav-tip svg { width: 26px; height: 26px; color: var(--primary); }
.bm-nav-tip p { margin: 8px 0 0; }

#business-modal .bm-body {
  position: relative; /* offsetParent das secoes (menu lateral usa offsetTop) */
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding: 18px 22px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.bm-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-alt);
  padding: 18px 20px 6px;
}
.bm-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.bm-card-head h4 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text); }
.bm-card-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.bm-card-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text); flex-shrink: 0; }
.bm-card-icon svg { width: 24px; height: 24px; }
.bm-card-icon.is-wa { color: var(--primary); }

.bm-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 22px; align-items: start; }
.bm-wa {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
  margin-bottom: 14px;
}
.bm-wa[hidden] { display: none; }
#business-modal.is-create .bm-info-grid { grid-template-columns: minmax(0, 1fr); }
.bm-wa .wa-panel { margin-top: 0; padding: 0; border: 0; background: none; }
.bm-wa .wa-status-line {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
}
.bm-wa-links { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bm-wa-links[hidden] { display: none; }

.bm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  min-height: 40px;
}
.bm-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.bm-wa .btn-primary.bm-btn { margin-top: 10px; font-weight: 700; }

/* input com icone a esquerda */
.bm-input { position: relative; }
.bm-input > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-muted); pointer-events: none;
}
.form-row .bm-input > input, .form-row .bm-input > select { padding-left: 40px; }
.bm-status-dot {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--success); pointer-events: none;
}
.bm-status[data-status="suspended_panel"] .bm-status-dot { background: #e0a800; }
.bm-status[data-status="suspended_full"] .bm-status-dot { background: var(--danger); }

.bm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
.bm-grid-2 .hint { margin: -6px 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.bm-grid-2 .switch-row label:first-child { font-weight: 600; }
.bm-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
.bm-span-2 { grid-column: span 2; }

#business-modal .business-history,
#business-modal .business-invoices { margin: 0 0 14px; }

.bm-foot {
  display: flex; justify-content: flex-end; gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.bm-foot .bm-btn { width: auto; min-width: 170px; }
#business-modal .bm-foot .btn-primary { margin-top: 0; min-width: 260px; font-weight: 700; }

/* tela media: some o texto do menu, fica so' o icone */
@media (max-width: 980px) {
  .bm-nav { width: 64px; padding: 14px 8px; }
  .bm-nav-item { justify-content: center; padding: 11px 0; }
  .bm-nav-item span, .bm-nav-tip { display: none; }
  .bm-info-grid { grid-template-columns: minmax(0, 1fr); }
}
/* celular: menu vira barra de abas no topo, campos em 1 coluna */
@media (max-width: 640px) {
  #business-modal[open], #business-modal.is-create[open] { width: 100vw; max-width: 100vw; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .bm-layout { flex-direction: column; }
  .bm-nav {
    width: auto; flex-direction: row; gap: 4px;
    padding: 8px 12px;
    border-right: 0; border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .bm-nav-item { padding: 9px 12px; border-left: 0; border-bottom: 2px solid transparent; border-radius: 8px; }
  .bm-nav-item.is-active { border-bottom-color: var(--primary); }
  #business-modal .bm-body { padding: 14px 14px 18px; }
  .bm-card { padding: 14px 14px 4px; }
  .bm-grid-2, .bm-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .bm-span-2 { grid-column: auto; }
  #business-modal .bm-head { padding: 14px 16px 12px; gap: 12px; }
  .bm-head-icon { width: 42px; height: 42px; }
  .bm-foot { padding: 12px 16px; }
  .bm-foot .bm-btn, #business-modal .bm-foot .btn-primary { min-width: 0; flex: 1; white-space: nowrap; font-size: 14px; padding-left: 10px; padding-right: 10px; }
}

.modal-quicklinks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; font-size: 12.5px; }
.modal-quicklinks code { background: var(--surface-alt); padding: 2px 6px; border-radius: 5px; color: var(--text-muted); }
.modal-quicklinks a { font-weight: 600; }

.modal-section { margin-top: 20px; }
.modal-section > h4 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.modal-section > h4 .hint { font-weight: 400; text-transform: none; letter-spacing: 0; display: inline; }
.form-row-pair { display: flex; gap: 12px; }
.form-row-pair > .form-row { flex: 1; min-width: 0; }

/* editor de horario da profissional — 7 linhas podem passar da tela */
#staff-hours-list { max-height: 62vh; overflow-y: auto; margin-top: 12px; }

/* painel de conexao WhatsApp do negocio no /dev */
.wa-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.wa-status-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.wa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-soft); flex-shrink: 0; }
.wa-dot.ok { background: var(--success); }
.wa-dot.warn { background: #e0a800; }
.wa-dot.bad { background: var(--danger); }
/* bug real — "#wa-qr { display:block }" tinha mais especificidade
   que a regra nativa "[hidden] { display:none }" do navegador, entao
   `qr.hidden = true` (JS) nunca escondia a imagem de verdade: o QR antigo
   ficava na tela mesmo depois de conectar. ":not([hidden])" faz essa regra
   SO' valer quando NAO tiver o atributo hidden, sem disputa de
   especificidade. Virou classe (.wa-qr-img) pra servir os 3 QRs que
   existem agora: WhatsApp de cada negocio (#wa-qr), da plataforma
   (#system-wa-qr) e o auto-servico da dona (#admin-wa-qr). */
.wa-qr-img:not([hidden]) {
  display: block;
  width: 220px;
  max-width: 100%;
  margin: 12px auto 0;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}
/* "p.hint" (nao so ".hint"): ".card p.hint" tem margem -8px no topo e
   ganhava por especificidade quando o painel fica dentro de um card (aba
   Conexoes do /dev, Ajustes do /admin) — o texto subia por cima do QR. */
.wa-panel p.hint { margin: 10px 0 0; }
.wa-panel .btn-secondary { margin-top: 10px; }

/* scrollbar discreta pras faixas horizontais */
.week-strip::-webkit-scrollbar, nav.tabs::-webkit-scrollbar { height: 0; }

/* --- telas de login (/admin, /dev, /o) alinhadas ao redesign das
   cartao mais largo, icone em quadrado arredondado, titulo menor,
   campo com borda 1.5px + anel de foco, botao com sombra do acento. Vale pras
   3 (mesmas classes), cada uma na sua paleta. --- */
.login-card { max-width: 380px; padding: 40px 32px 30px; border-radius: 20px; }
.login-icon { width: 60px; height: 60px; border-radius: 16px; background: var(--primary-soft); margin-bottom: 20px; }
.login-icon svg { width: 28px; height: 28px; }
.login-card h1 { font-size: 26px; letter-spacing: -0.01em; }
.login-card .muted { font-size: 13px; line-height: 1.5; margin-bottom: 24px; }
.login-card input { border-width: 1.5px; padding: 12px 14px; background: var(--bg); color: var(--text); }
.login-card input:focus { box-shadow: 0 0 0 3px var(--primary-soft); }
.login-card button { padding: 12px; box-shadow: 0 2px 12px var(--primary-soft); }

/* --- abas do /dev: Vendas, Sugestões, Organizações, Mostruário,
   Cobrança e Meu WhatsApp --- */

/* barra no topo da aba (ex: seletor de mês de Vendas), sem card em volta */
.tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tab-toolbar .hint { margin: 0; font-size: 13px; color: var(--text-muted); }
.month-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.month-picker input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  color-scheme: dark light;
}

/* 2 cards lado a lado no desktop, empilhados no celular */
.dev-grid-2 { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .dev-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* checkbox no meio da barra de filtros (ex: "Só não lidas") */
.toolbar-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  min-height: 40px;
}
.toolbar-check input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
:root[data-palette="dev"] .toolbar-check { background: var(--surface-alt); }

.count-badge {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--primary);
  color: var(--surface);
  vertical-align: middle;
}

/* lista vazia: aviso com borda tracejada, titulo e explicacao */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.empty-state strong { font-size: 14px; }
.empty-state span { font-size: 13px; color: var(--text-muted); max-width: 480px; line-height: 1.5; }

/* sugestões em cards (mensagem em destaque, acoes no rodape) */
.suggestion-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.suggestion-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.suggestion-card.is-read { opacity: 0.6; }
.suggestion-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.suggestion-card .suggestion-msg { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.suggestion-card .hint { margin: 0; }
.suggestion-card footer { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.suggestion-card footer select {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.suggestion-card footer .btn-secondary { flex: 0 0 auto; }

/* Mostruário: o select de "adicionar já cadastrado" usava a aparencia
   nativa (borda clara, fonte grande) — mesmo visual da barra de filtros */
.showcase-add-row select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
:root[data-palette="dev"] .showcase-add-row select { background: var(--surface-alt); }
@media (min-width: 900px) {
  :root[data-palette="dev"] .showcase-add-row select,
  :root[data-palette="dev"] .suggestion-card footer select { font-size: 13px; }
}

/* status do WhatsApp dentro do card de negócio */
.wa-status-line.card-wa { font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin: 2px 0 8px; }
/* ".list-toolbar input" (e a versao do /dev) pegaria o checkbox tambem */
.list-toolbar .toolbar-check input,
:root[data-palette="dev"] .list-toolbar .toolbar-check input {
  flex: none;
  padding: 0;
  border: none;
  background: none;
}

/* item de menu escondido por plano (applyPlanFeatures) — sem isso o
   "display: flex" dos botoes/grupos da gaveta ganharia do [hidden] nativo */
.drawer [hidden] { display: none !important; }

/* --- planos de assinatura (/dev, aba Planos) --- */
.plan-price { font-size: 22px; font-weight: 700; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
:root[data-palette="dev"] .plan-price { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.plan-features { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.plan-features li { position: relative; padding-left: 18px; }
.plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
.plan-features li.muted { color: var(--text-muted); }
.plan-features li.muted::before { content: '–'; color: var(--text-muted); }
.plan-card.is-inactive { opacity: 0.6; }

/* lista de checkboxes (recursos do plano) */
.check-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.check-item input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.check-item:has(input:checked) { border-color: var(--primary); }
/* ".form-row input" (largura 100%, padding, borda) pegaria os checkboxes */
.form-row .check-item input { width: 16px; height: 16px; padding: 0; border: none; background: none; }
/* ".form-row label" (bloco, margem embaixo, fonte de rotulo) vazava pro item */
.form-row .check-item { display: flex; margin: 0; font-size: 14px; font-weight: 500; color: var(--text); }

/* faixa de mensalidade no topo do /admin (showBillingNotice) */
.billing-notice {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #e0a800;
  border-radius: var(--radius-sm);
  background: rgba(224, 168, 0, 0.12);
  font-size: 13.5px;
  line-height: 1.5;
}
.billing-notice strong { font-weight: 700; }
.billing-notice.is-late { border-color: var(--danger); background: var(--danger-soft, rgba(220, 38, 38, 0.1)); }

/* --- Gestão › Equipe e › Permissões: listas + janelas --- */
.card-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-head-row h3 { margin: 0; }
.card .card-head-row p.hint { margin: 6px 0 0; }
.btn-sm { padding: 7px 14px !important; font-size: 13px !important; width: auto !important; white-space: nowrap; flex-shrink: 0; }
.btn-link { background: none; border: 0; padding: 4px 6px; color: var(--primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-link.danger { color: var(--danger); display: block; margin: 10px auto 0; }

.people-list { display: flex; flex-direction: column; gap: 6px; }
.person-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
}
button.person-row { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
button.person-row:hover { border-color: var(--primary); background: var(--surface-alt); }
.person-row.inactive { opacity: 0.55; }
.person-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary);
  font-weight: 700; font-size: 13px;
}
.group-avatar { border-radius: 10px; }
.person-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.person-main b { font-size: 14.5px; font-weight: 600; }
.person-main small { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-group { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.person-chevron svg { width: 18px; height: 18px; color: var(--text-muted); display: block; }
.staff-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px; white-space: nowrap; }
.staff-badge.ok { background: var(--success-soft); color: var(--success); }
.staff-badge.warn { background: #fff4d6; color: #8a6100; }
.staff-badge.off { background: var(--neutral-soft); color: var(--neutral-text); }
.perm-count { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.perm-meter { width: 56px; height: 6px; border-radius: 6px; background: var(--neutral-soft); overflow: hidden; display: inline-block; }
.perm-meter i { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
@media (max-width: 640px) {
  .person-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .person-group, .person-chevron { display: none; }
  .card-head-row { flex-wrap: wrap; }
}

/* janela de pessoa */
#staff-modal .hint#staff-modal-sub { margin: 0 0 14px; }
.seg-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; margin: 6px 0 16px;
  border-radius: 100px; background: var(--surface-alt); border: 1px solid var(--border);
}
.seg-tabs[hidden] { display: none; }
.seg-tab {
  border: 0; background: none; border-radius: 100px; padding: 8px 10px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.seg-tab.is-current { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgb(0 0 0 / 0.08); }
.form-modal p.hint, .form-modal .hint { font-size: 12.5px; color: var(--text-muted); }
.form-modal p.group-hint { margin: 6px 0 0; }
.staff-modal-extra { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.staff-modal-extra[hidden], #staff-modal [hidden] { display: none !important; }
.invite-result { margin: 0 0 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.invite-status { margin: 0 0 10px; font-size: 13.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.invite-status svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; }
.invite-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.invite-link-row input {
  flex: 1; min-width: 160px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px;
}
.invite-link-row a.btn-secondary { text-decoration: none; display: inline-flex; align-items: center; }
.invite-result .hint { margin: 8px 0 0; }

/* janela de grupo: uma linha por permissao, interruptor a direita */
.perm-list { display: flex; flex-direction: column; margin: 4px 0 16px; max-height: 55vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.perm-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 14px; cursor: pointer; }
.perm-item + .perm-item { border-top: 1px solid var(--border); }
.perm-item:hover { background: var(--surface-alt); }
.perm-item > span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.perm-item b { font-weight: 600; }
.perm-item small { color: var(--text-muted); font-size: 12px; }

/* --- Ajustes > Horário: calendário dos próximos dias + feriados --- */
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav strong { min-width: 130px; text-align: center; font-size: 14px; text-transform: capitalize; }
.cal-nav .icon-btn[disabled] { opacity: 0.3; cursor: default; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-muted); margin: 4px 0 12px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .lg { width: 12px; height: 12px; border-radius: 4px; display: inline-block; border: 1px solid var(--border); }
.lg.open, .cal-day.st-open { background: var(--surface); }
.lg.partial, .cal-day.st-partial { background: #fff4d6; }
.lg.blocked, .cal-day.st-blocked { background: var(--danger-soft); }
.lg.closed, .cal-day.st-closed { background: var(--neutral-soft); }
.lg.holiday, .cal-day.st-holiday { background: var(--primary-soft); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted); padding-bottom: 2px; }
.cal-day {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 62px; padding: 7px 8px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font: inherit; cursor: pointer;
  transition: border-color 0.12s, transform 0.08s;
}
.cal-day:hover:not([disabled]) { border-color: var(--primary); }
.cal-day:active:not([disabled]) { transform: scale(0.97); }
.cal-day b { font-size: 14px; }
.cal-day small { font-size: 10.5px; line-height: 1.25; color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal-day.st-holiday small { color: var(--primary); font-weight: 600; }
.cal-day.st-holiday-open { box-shadow: inset 0 0 0 2px var(--primary-soft); }
.cal-day.st-holiday-open small { color: var(--primary); }
.cal-day.st-blocked small { color: var(--danger); font-weight: 600; }
.cal-day.today { border-color: var(--primary); border-width: 2px; }
.cal-day.past { opacity: 0.4; cursor: default; }
@media (max-width: 560px) {
  .cal-grid { gap: 4px; }
  .cal-day { min-height: 46px; padding: 5px; align-items: center; }
  .cal-day small { display: none; }
  .cal-legend { font-size: 11px; }
}

.holiday-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 640px) { .holiday-mode { grid-template-columns: 1fr; } }
.radio-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer;
}
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.radio-card input { margin-top: 2px; accent-color: var(--primary); }
.radio-card span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.radio-card small { color: var(--text-muted); font-size: 12px; }
.holiday-list { display: flex; flex-direction: column; }
.holiday-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 56px; align-items: center; gap: 10px;
  padding: 10px 2px; border-top: 1px solid var(--border); font-size: 13.5px;
}
.holiday-date { font-weight: 700; font-variant-numeric: tabular-nums; }
.holiday-date small, .holiday-name small { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.holiday-state { font-size: 12px; color: var(--text-muted); }

/* Sugestões solto no fim da gaveta, logo acima de "Fixar menu" */
.drawer .drawer-bottom-item { margin-top: auto; }
.drawer .drawer-bottom-item + .drawer-pin { margin-top: 6px; }

/* --- Gestão › Serviços --- */
.svc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 16px; }
.svc-stat { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); display: flex; flex-direction: column; gap: 2px; }
.svc-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }
.svc-stat span { font-size: 12px; color: var(--text-muted); }
@media (max-width: 640px) { .svc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.svc-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.svc-search { position: relative; flex: 1; min-width: 200px; }
.svc-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); }
.svc-search input {
  width: 100%; padding: 9px 12px 9px 36px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px;
}
.svc-search input:focus { outline: none; border-color: var(--primary); }
.svc-filters { display: flex; gap: 4px; padding: 3px; border-radius: 100px; background: var(--surface-alt); border: 1px solid var(--border); overflow-x: auto; }
.svc-filter { border: 0; background: none; border-radius: 100px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.svc-filter.is-current { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgb(0 0 0 / 0.08); }

.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.svc-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--surface); cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.15s, transform 0.12s;
}
.svc-card:hover, .svc-card:focus-visible { border-color: var(--primary); box-shadow: 0 6px 20px var(--shadow); transform: translateY(-1px); outline: none; }
.svc-card.is-hidden .svc-photo, .svc-card.is-hidden .svc-body { opacity: 0.5; }
.svc-photo { position: relative; aspect-ratio: 16 / 9; background: var(--primary-soft); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-photo-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 30px; font-weight: 800; letter-spacing: 0.02em; color: var(--primary);
  background: linear-gradient(135deg, var(--primary-soft), var(--surface-alt));
}
.svc-off { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 100px; background: var(--primary); color: var(--on-primary, #fff); font-size: 11.5px; font-weight: 800; }
.svc-hidden-tag { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 100px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 11px; font-weight: 700; }
.svc-body { padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.svc-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.svc-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.svc-dur { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); }
.svc-dur svg { width: 14px; height: 14px; }
.svc-price { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.svc-price b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.svc-price s { margin-right: 4px; }
.svc-until { font-size: 11.5px; color: var(--primary); font-weight: 600; }
.svc-desc { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-desc i { opacity: 0.7; }
.svc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); cursor: default; }
.svc-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.svc-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--primary); }
.svc-link svg { width: 14px; height: 14px; }
.svc-empty { text-align: center; padding: 36px 16px; border: 1.5px dashed var(--border); border-radius: 14px; grid-column: 1 / -1; }
.svc-empty b { font-size: 15px; }
.svc-empty p { margin: 6px 0 14px; font-size: 13px; color: var(--text-muted); }

/* modal de serviço */
.svc-photo-drop {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 7; margin: 12px 0 16px;
  border: 1.5px dashed var(--border); border-radius: 14px; overflow: hidden;
  background: var(--surface-alt); cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.svc-photo-drop:hover, .svc-photo-drop.is-drag { border-color: var(--primary); background: var(--primary-soft); }
.svc-photo-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--text-muted); padding: 10px; }
.svc-photo-empty svg { width: 26px; height: 26px; color: var(--primary); }
.svc-photo-empty b { color: var(--text); font-size: 14px; }
.svc-photo-empty small { font-size: 12px; }
.svc-photo-change { position: absolute; bottom: 10px; right: 10px; padding: 5px 11px; border-radius: 100px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 12px; font-weight: 600; }
.svc-modal [hidden] { display: none !important; }
.svc-input-suffix { position: relative; }
.svc-input-suffix span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-muted); pointer-events: none; }
.svc-quick { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.svc-quick button {
  padding: 4px 10px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.svc-quick button:hover { border-color: var(--primary); color: var(--primary); }
.svc-quick button.is-current { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.svc-promo { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; transition: border-color 0.12s, background 0.12s; }
.svc-promo.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 45%, transparent); }
.svc-promo-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.svc-promo-head > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.svc-promo-head b { font-size: 14px; }
.svc-promo-head small { font-size: 12px; color: var(--text-muted); }
.svc-promo.is-on .svc-promo-head small { color: var(--primary); font-weight: 600; }
.svc-promo-fields { padding: 0 14px; }
.svc-counter { display: block; text-align: right; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.svc-modal-foot { display: flex; gap: 10px; margin-top: 6px; }
.svc-modal-foot .btn-secondary { flex: 0 0 auto; }
.svc-modal-foot .btn-primary { flex: 1; margin-top: 0 !important; }
@media (max-width: 640px) { .svc-modal-foot { flex-direction: column-reverse; } }
.svc-card.no-photo .svc-photo { aspect-ratio: 16 / 6; }
.svc-photo-drop:not(:has(img:not([hidden]))) { aspect-ratio: 16 / 5; }
.svc-filters { scrollbar-width: none; }
.svc-filters::-webkit-scrollbar { display: none; }

/* subitem comprido da sanfona ("Confirmação e fila de espera") quebra linha
   em vez de passar da borda da gaveta. So' com a gaveta aberta (recolhida,
   os subitens nem aparecem). */
.drawer .nav-acc-inner button { min-width: 0; }
.drawer .nav-acc-inner .dl { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  body.nav-pinned .drawer .nav-acc-inner .dl,
  .drawer:hover .nav-acc-inner .dl { white-space: normal; line-height: 1.3; }
}

/* --- Seu negócio › Endereço e localização --- */
.addr-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 12px; }
.addr-cep { grid-column: span 2; }
.addr-street { grid-column: span 4; }
.addr-number { grid-column: span 1; }
.addr-complement { grid-column: span 2; }
.addr-district { grid-column: span 3; }
.addr-city { grid-column: span 5; }
.addr-state { grid-column: span 1; }
@media (max-width: 640px) {
  .addr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .addr-cep { grid-column: span 4; }
  .addr-street { grid-column: span 4; }
  .addr-number { grid-column: span 1; }
  .addr-complement { grid-column: span 3; }
  .addr-district { grid-column: span 4; }
  .addr-city { grid-column: span 3; }
  .addr-state { grid-column: span 1; }
}
.addr-cep-wrap { position: relative; }
.addr-cep-status { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-muted); pointer-events: none; }
.addr-cep-status.ok { color: var(--success); font-weight: 700; font-size: 15px; }
.addr-cep-status.err { color: var(--danger); font-weight: 600; }
.addr-map-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.addr-map { height: 360px; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; z-index: 0; background: var(--surface-alt); }
@media (max-width: 640px) { .addr-map { height: 280px; } }
.addr-map-hint { margin: 8px 0 0 !important; min-height: 1em; }

/* endereço do site (slug) editável */
.slug-field { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.slug-field:focus-within { border-color: var(--primary); }
.slug-field-prefix { display: flex; align-items: center; padding: 0 2px 0 12px; font-size: 13px; color: var(--text-muted); white-space: nowrap; background: var(--surface-alt); border-right: 1px solid var(--border); padding-right: 8px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.form-row .slug-field input { border: 0; border-radius: 0; flex: 1; min-width: 0; background: transparent; }
.form-row .slug-field input:focus { outline: none; }
.slug-field .btn-sm { margin: 4px; border-radius: 8px; }
.slug-status { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); min-height: 1em; }
.slug-status.ok { color: var(--success); font-weight: 600; }
.slug-status.err { color: var(--danger); font-weight: 600; }

/* recorte da foto do serviço */
.svc-recrop { display: block; margin: -8px auto 12px; }
.svc-recrop[hidden] { display: none; }
.crop-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10; margin: 12px 0;
  overflow: hidden; border-radius: 12px; background: #111;
  touch-action: none; cursor: grab; user-select: none;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-grid {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.35) calc(33.33% - 0.5px), rgba(255,255,255,0.35) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255,255,255,0.35) calc(66.66% - 0.5px), rgba(255,255,255,0.35) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.35) calc(33.33% - 0.5px), rgba(255,255,255,0.35) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), rgba(255,255,255,0.35) calc(66.66% - 0.5px), rgba(255,255,255,0.35) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.crop-zoom { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.crop-zoom svg { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.crop-zoom input { flex: 1; accent-color: var(--primary); }

/* --- Cores e aparência: painel x site --- */
.site-look-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
@media (max-width: 760px) { .site-look-grid { grid-template-columns: minmax(0, 1fr); } }
.site-default-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.site-default-opt.active { border-color: var(--primary); background: var(--primary-soft); }
.site-default-opt span:last-child { display: flex; flex-direction: column; gap: 2px; }
.site-default-opt b { font-size: 14px; }
.site-default-opt small { font-size: 12px; color: var(--text-muted); }
.site-default-dot { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(#d6336c, #7048e8, #1971c2, #2f9e44, #c2566b, #d6336c); }

.site-preview {
  --sp-primary: #8a6f78; --sp-secondary: #f4eef0;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; color: #222;
  font-size: 12px; box-shadow: 0 8px 24px var(--shadow);
}
.sp-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #eee; }
.sp-logo { width: 18px; height: 18px; border-radius: 6px; background: var(--sp-primary); }
.sp-name { font-weight: 700; }
.sp-hero { display: flex; flex-direction: column; gap: 2px; padding: 18px 14px; background: var(--sp-secondary); }
.sp-hero b { font-size: 15px; }
.sp-hero small { color: #666; }
.sp-btn { align-self: flex-start; margin-top: 10px; padding: 7px 14px; border-radius: 100px; background: var(--sp-primary); color: #fff; font-weight: 700; }
.sp-card { display: flex; justify-content: space-between; margin: 8px 12px 0; padding: 9px 11px; border: 1px solid #eee; border-radius: 10px; }
.sp-card b { color: var(--sp-primary); }
.sp-default-note { margin: 10px 12px 12px; font-size: 11px; color: #888; text-align: center; min-height: 1em; }
.site-preview.is-default .sp-hero { background: repeating-linear-gradient(45deg, #f6f1f3, #f6f1f3 8px, #fbf8f9 8px, #fbf8f9 16px); }