/* Skin "nicho-petshop" de ESPAÇOS E QUADRAS (layout aprovado layouts/aecd886f_Espaços-Webbots-SaaS): verde #16A34A com céu #0EA5E9 e
   âmbar #F59E0B, texto #1D2B22, fundo #F6FAF5, títulos Baloo 2 e texto Nunito. Mesmo nome de arquivo do padrão (login, cadastro,
   recuperação e includes/header.php carregam assets/css/nicho-petshop.css). As 7 primeiras variáveis vêm do nicho.json
   (nicho_aplicar.php as regrava); o resto aplica a estrutura do layout aprovado só com CSS, por variáveis, sem mexer no PHP. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');
:root {
  --nicho-primaria: #16A34A;
  --nicho-primaria-hover: #15803D;
  --nicho-escuro: #1D2B22;
  --nicho-fundo: #F6FAF5;
  --nicho-texto: #1D2B22;
  --nicho-suave: #5A6B61;
  --nicho-borda: #E6EFE8;
  /* paleta extra do layout aprovado (nicho.json -> layout.cores_extra) */
  --nicho-verde-claro: #22B858;
  --nicho-verde-suave: #ECFDF3;
  --nicho-verde-suave-2: #DCFCE7;
  --nicho-ceu: #0EA5E9;
  --nicho-ceu-escuro: #0284C7;
  --nicho-ceu-texto: #0369A1;
  --nicho-ceu-suave: #EAF6FD;
  --nicho-ambar: #F59E0B;
  --nicho-ambar-escuro: #D97706;
  --nicho-ambar-texto: #92580A;
  --nicho-ambar-ink: #3B2604;
  --nicho-ambar-suave: #FFF6E5;
  --nicho-vermelho: #EF4444;
  --nicho-superficie: #FFFFFF;
  --nicho-linha: #EDF3EE;
  --nicho-borda-campo: #E1EBE4;
  --nicho-borda-botao: #D6E6DB;
  --nicho-suave-2: #4A5B51;
  --nicho-suave-3: #8A978F;
  --nicho-placeholder: #9AA8A0;
  --nicho-fundo-site: #FBFDF8;
  --nicho-degrade: linear-gradient(135deg, var(--nicho-primaria), var(--nicho-verde-claro));
  --nicho-fonte-titulo: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --nicho-fonte-texto: 'Nunito', system-ui, sans-serif;
  --nicho-sombra: 0 8px 22px rgba(29, 43, 34, .05);
  --nicho-sombra-botao: 0 12px 24px color-mix(in oklab, var(--nicho-primaria) 28%, transparent);
  --nicho-foco: 0 0 0 4px color-mix(in oklab, var(--nicho-primaria) 18%, transparent);
}
/* o sistema deriva todos os destaques de --accent*: aqui eles passam a vir da paleta do nicho (e não da matiz) */
:root {
  --stark-accent: var(--nicho-primaria);
  --accent: var(--nicho-primaria);
  --accent-hover: var(--nicho-primaria-hover);
  --accent-text: var(--nicho-primaria-hover);
  --accent-solid: var(--nicho-primaria);
  --accent-soft: color-mix(in oklab, var(--nicho-primaria) 12%, #fff);
  --accent-ring: color-mix(in oklab, var(--nicho-primaria) 22%, transparent);
  --accent-gradient: linear-gradient(135deg, color-mix(in oklab, var(--nicho-primaria) 88%, #fff) 0%, var(--nicho-primaria) 100%);
  --accent-gradient-hover: linear-gradient(135deg, var(--nicho-primaria) 0%, var(--nicho-primaria-hover) 100%);
}

/* ===== login, recuperação e redefinição (Login.dc.html aprovado): formulário em cartão branco à ESQUERDA (cantos de 32px, campos
   de 56px com cantos de 18px e fundo claro, botão pílula verde) e, à DIREITA, o painel arredondado com a foto da quadra e o cartão
   flutuante com a frase do produto. Sobrescreve o auth-v2.css (carregado antes). ===== */
body .auth-page {
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  background: linear-gradient(180deg, var(--nicho-verde-suave) 0%, var(--nicho-fundo-site) 60%) !important;
  color: var(--nicho-texto);
  font-family: var(--nicho-fonte-texto);
  padding: 20px !important;
  gap: 20px;
}
body .auth-page::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  min-height: calc(100vh - 40px);
  padding: 0;
  border-radius: 40px;
  background: linear-gradient(0deg, color-mix(in oklab, var(--nicho-escuro) 55%, transparent) 0%, transparent 45%), var(--nicho-primaria) url('../../site/imagens/foto_3.webp') center / cover no-repeat;
  box-shadow: 0 24px 60px color-mix(in oklab, var(--nicho-primaria) 25%, transparent);
}
body .auth-page::after {
  content: 'Sua quadra lotada, sem você preso no WhatsApp.';
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  margin: 0 28px 28px;
  padding: 18px 22px;
  max-width: 420px;
  height: auto;
  border-radius: 22px;
  background: var(--nicho-superficie);
  color: var(--nicho-texto);
  font: 800 clamp(20px, 1.8vw, 26px) / 1.15 var(--nicho-fonte-titulo);
  text-wrap: balance;
  box-shadow: 0 14px 30px rgba(29, 43, 34, .18);
}
body .auth-card {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: calc(100% - 24px);
  max-width: 460px;
  margin: 24px 12px;
  padding: clamp(26px, 5vw, 40px) !important;
  background: var(--nicho-superficie) !important;
  border: 1px solid var(--nicho-linha) !important;
  border-radius: 32px;
  box-shadow: 0 20px 50px rgba(29, 43, 34, .08) !important;
}
/* cadastro (Cadastro.dc.html aprovado): o painel verde fica à ESQUERDA, com a frase no topo e a foto do salão embaixo; o formulário à direita */
body .auth-page:has(#cadastro-form) {
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  background: linear-gradient(180deg, var(--nicho-ambar-suave) 0%, var(--nicho-fundo-site) 60%) !important;
}
body .auth-page:has(#cadastro-form)::before {
  grid-column: 1;
  background: var(--nicho-primaria) url('../../site/imagens/foto_1.webp') center bottom / 100% 52% no-repeat;
}
body .auth-page:has(#cadastro-form)::after {
  content: 'Sua atendente de IA no WhatsApp pronta em 10 minutos. Responde e reserva 24h, cobra o sinal por Pix e lembra o cliente antes do jogo ou da festa.';
  grid-column: 1;
  align-self: start;
  margin: 36px 36px 0;
  max-width: 480px;
  padding: 0;
  background: transparent;
  color: var(--nicho-superficie);
  font: 800 clamp(24px, 2.4vw, 34px) / 1.1 var(--nicho-fonte-titulo);
  box-shadow: none;
}
body .auth-page:has(#cadastro-form) .auth-card { grid-column: 2; border-color: color-mix(in oklab, var(--nicho-ambar-suave) 70%, var(--nicho-ambar)) !important; }
body .auth-card h1 {
  font-family: var(--nicho-fonte-titulo) !important;
  font-size: clamp(28px, 3.6vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.1;
  letter-spacing: 0 !important;
  color: var(--nicho-texto) !important;
}
body .auth-card p.subtitulo { color: var(--nicho-suave) !important; font-size: 16px !important; line-height: 1.45; margin-bottom: 20px; }
body .auth-card label, body .auth-card .campo label { color: var(--nicho-texto); font-family: var(--nicho-fonte-texto); font-weight: 800; font-size: 15px; }
body .auth-card input[type=text], body .auth-card input[type=email], body .auth-card input[type=password], body .auth-card input[type=tel], body .auth-card select {
  min-height: 56px;
  border: 2px solid var(--nicho-borda-campo);
  border-radius: 18px;
  background: var(--nicho-fundo-site);
  color: var(--nicho-texto);
  font-family: var(--nicho-fonte-texto);
  font-size: 17px;
  font-weight: 600;
}
body .auth-card input::placeholder { color: var(--nicho-placeholder); opacity: 1; }
body .auth-card input:focus, body .auth-card select:focus { border-color: var(--nicho-primaria); box-shadow: var(--nicho-foco); background: var(--nicho-superficie); }
body .auth-card .btn {
  min-height: 58px;
  border-radius: 999px;
  background: var(--nicho-primaria) !important;
  color: #fff !important;
  font-family: var(--nicho-fonte-texto);
  font-weight: 800;
  font-size: 17px;
  box-shadow: var(--nicho-sombra-botao) !important;
}
body .auth-card .btn:hover { background: var(--nicho-primaria-hover) !important; }
body .auth-card .btn-tab-login { border-radius: 999px !important; font-family: var(--nicho-fonte-texto); }
body .auth-links { color: var(--nicho-suave); font-weight: 700; text-align: center; }
body .auth-links a { color: var(--nicho-primaria) !important; font-weight: 800; text-decoration: none !important; }
body .auth-links a:hover { color: var(--nicho-primaria-hover) !important; }
body .auth-card .alerta { border-radius: 16px; font-weight: 700; border-color: transparent; }
body .auth-card .alerta-erro { background: var(--nicho-ambar-suave); color: var(--nicho-ambar-texto); }
body .auth-card .alerta-sucesso { background: var(--nicho-verde-suave); color: var(--nicho-primaria-hover); }
body .auth-card .btn-toggle-senha { color: var(--nicho-suave); }
body .auth-card .btn-toggle-senha:hover { color: var(--nicho-primaria); background: var(--nicho-verde-suave); }
body .auth-card input[type=checkbox] { accent-color: var(--nicho-primaria); }
@media (max-width: 960px) {
  /* no celular o layout aprovado mostra só o formulário sobre o fundo claro */
  body .auth-page, body .auth-page:has(#cadastro-form) { grid-template-columns: 1fr; grid-template-rows: auto; padding: 12px !important; gap: 0; }
  body .auth-page::before, body .auth-page::after { display: none; }
  body .auth-card, body .auth-page:has(#cadastro-form) .auth-card { grid-column: 1; grid-row: 1; margin: 12px auto; width: calc(100% - 8px); }
  body .auth-card h1 { font-size: 28px !important; }
}

/* ===== painel (Painel.dc.html aprovado): menu lateral BRANCO com item ativo em pílula verde sólida, marca em quadrado verde,
   fundo #F6FAF5, cartões de 24-28px com sombra leve, títulos Baloo 2 e botões pílula ===== */
html body.stark-backend.stark-backend {
  font-family: var(--nicho-fonte-texto);
  --stark-app-bg: var(--nicho-fundo);
  --stark-text: var(--nicho-texto);
  --stark-muted: var(--nicho-suave);
  --stark-muted-2: var(--nicho-suave);
  --stark-card: var(--nicho-superficie);
  --stark-card-solid: var(--nicho-superficie);
  --stark-border: var(--nicho-borda);
  --stark-border-strong: var(--nicho-borda);
  --stark-radius-xl: 28px;
  --stark-radius-lg: 24px;
  --stark-radius-md: 16px;
  --stark-font-display: var(--nicho-fonte-titulo);
  /* o menu branco do layout vence a cor de menu gravada pelo nicho_aplicar.php (lida em :root) porque o body está mais perto */
  --menu-bg: var(--nicho-superficie);
  --menu-texto: var(--nicho-texto);
}
html body.stark-backend.stark-backend a:not(.btn):not([class*="nav"]) { color: var(--nicho-primaria-hover); }
html body.stark-backend .sidebar {
  border: 1px solid var(--nicho-linha) !important;
  border-radius: 24px;
  background: var(--nicho-superficie) !important;
  color: var(--nicho-texto);
  box-shadow: var(--nicho-sombra) !important;
}
html body.stark-backend .sidebar-brand-mark,
html body.stark-backend .mobile-brand-mark { display: grid; }
html body.stark-backend .sidebar-brand-mark,
html body.stark-backend .sidebar-brand-compact,
html body.stark-backend .mobile-brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px;
  place-items: center;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--nicho-primaria) !important;
  color: #fff !important;
  font-size: 22px;
  box-shadow: 0 6px 14px color-mix(in oklab, var(--nicho-primaria) 30%, transparent) !important;
}
html body.stark-backend .sidebar-brand-mark i, html body.stark-backend .sidebar-brand-compact i, html body.stark-backend .mobile-brand-mark i { color: #fff; }
html body.stark-backend .sidebar-brand-name { color: var(--nicho-texto) !important; font-family: var(--nicho-fonte-titulo) !important; font-weight: 800; font-size: 19px; }
html body.stark-backend .sidebar-brand-sub { color: var(--nicho-suave); }
html body.stark-backend .sidebar-section-label { color: var(--nicho-suave) !important; font-family: var(--nicho-fonte-texto) !important; opacity: .85; }
html body.stark-backend .sidebar-divider { background: var(--nicho-linha); }
html body.stark-backend .sidebar-nav a,
html body.stark-backend .sidebar-logout {
  color: var(--nicho-suave-2) !important;
  border-radius: 16px;
  font-family: var(--nicho-fonte-texto);
  font-weight: 800;
  font-size: 15px;
}
html body.stark-backend .sidebar-nav a > i, html body.stark-backend .sidebar-logout > i { color: var(--nicho-suave); }
html body.stark-backend .sidebar-nav a:not(.active):hover,
html body.stark-backend .sidebar-logout:hover {
  color: var(--nicho-texto) !important;
  background: color-mix(in oklab, var(--nicho-verde-suave) 60%, var(--nicho-superficie));
  box-shadow: none;
}
html body.stark-backend .sidebar-nav a:not(.active):hover > i, html body.stark-backend .sidebar-logout:hover > i { color: var(--nicho-primaria); }
/* item ativo: pílula verde sólida com texto branco, como no Painel.dc.html */
html body.stark-backend .sidebar-nav a.active,
html body.stark-backend .sidebar-nav a.active:hover {
  color: #fff !important;
  background: var(--nicho-primaria) !important;
  box-shadow: 0 8px 18px color-mix(in oklab, var(--nicho-primaria) 25%, transparent) !important;
  transform: none;
}
html body.stark-backend .sidebar-nav a.active > i { color: #fff !important; }
html body.stark-backend .sidebar-status-card,
html body.stark-backend .sidebar-cor-tema {
  border-color: transparent !important;
  border-radius: 22px;
  background: var(--nicho-ambar-suave) !important;
  box-shadow: none !important;
}
html body.stark-backend .sidebar-status-icon { background: var(--nicho-superficie) !important; color: var(--nicho-ambar-escuro) !important; box-shadow: none !important; }
html body.stark-backend .sidebar-status-copy span { color: var(--nicho-ambar-texto) !important; font-weight: 800; }
html body.stark-backend .sidebar-status-copy strong { color: var(--nicho-texto) !important; }
html body.stark-backend .sidebar-user-copy .nome { color: var(--nicho-texto) !important; }
html body.stark-backend .sidebar-user-copy .papel, html body.stark-backend .sidebar-user-copy small { color: var(--nicho-suave) !important; }
html body.stark-backend .sidebar-usuario .avatar { background: var(--nicho-ceu-suave); color: var(--nicho-ceu-escuro); font-family: var(--nicho-fonte-titulo); }
html body.stark-backend .sidebar-collapse-btn {
  color: var(--nicho-suave);
  border: 1px solid var(--nicho-borda-campo);
  background: var(--nicho-superficie);
  box-shadow: none;
}
html body.stark-backend .sidebar-collapse-btn:hover { color: var(--nicho-primaria); background: var(--nicho-verde-suave); border-color: var(--nicho-verde-suave); box-shadow: none; }
html body.stark-backend .topbar-desktop {
  background: color-mix(in oklab, var(--nicho-fundo) 90%, transparent);
  border-bottom: 1px solid var(--nicho-linha);
}
html body.stark-backend .topbar-desktop .titulos .principal { font-family: var(--nicho-fonte-titulo); color: var(--nicho-texto); }
html body.stark-backend .topbar-desktop .titulos .secundario { color: var(--nicho-suave); }
html body.stark-backend .hamb-desktop { border-color: var(--nicho-borda-campo); background: var(--nicho-superficie); border-radius: 14px; }
@media (max-width: 1100px) {
  html body.stark-backend .topbar-mobile {
    color: var(--nicho-texto);
    background: color-mix(in oklab, var(--nicho-fundo) 90%, transparent);
    border-bottom: 1px solid var(--nicho-linha);
    box-shadow: none;
  }
  html body.stark-backend .logo-mobile { color: var(--nicho-texto); font-family: var(--nicho-fonte-titulo); }
  html body.stark-backend .botao-menu { color: #fff; background: var(--nicho-primaria); border: 0; border-radius: 14px; }
}
/* cartões, títulos e campos do painel */
html body.stark-backend .stat-card,
html body.stark-backend .card,
html body.stark-backend .painel-box,
html body.stark-backend .finance-card,
html body.stark-backend .crm-kpi,
html body.stark-backend .crm-card {
  border: 1px solid var(--nicho-linha);
  background: var(--nicho-superficie);
  box-shadow: var(--nicho-sombra);
}
html body.stark-backend .stat-card, html body.stark-backend .card, html body.stark-backend .crm-kpi { border-radius: 24px; }
html body.stark-backend .painel-box, html body.stark-backend .finance-card, html body.stark-backend .crm-card { border-radius: 28px; }
html body.stark-backend h1, html body.stark-backend h2, html body.stark-backend h3,
html body.stark-backend .painel-box h2, html body.stark-backend .painel-box h3,
html body.stark-backend .stat-card .valor, html body.stark-backend .card .valor, html body.stark-backend .crm-kpi-value, html body.stark-backend .finance-card .top h2 {
  font-family: var(--nicho-fonte-titulo) !important;
  color: var(--nicho-texto);
  letter-spacing: 0;
}
html body.stark-backend .stat-card .rotulo, html body.stark-backend .card .rotulo, html body.stark-backend .subtitulo, html body.stark-backend .crm-kpi-label { color: var(--nicho-suave); }
html body.stark-backend .stat-card .delta { color: var(--nicho-primaria-hover); }
html body.stark-backend .app-shell .btn {
  border: 0;
  border-radius: 999px;
  font-family: var(--nicho-fonte-texto);
  font-weight: 800;
}
/* botão pílula verde liso do layout (o painel.css pinta o botão com degradê e !important; perigo e secundário ficam como são) */
html body.stark-backend .app-shell .btn:not(.btn-secundario):not(.btn-perigo) {
  color: #fff;
  background: var(--nicho-primaria) !important;
  box-shadow: 0 8px 18px color-mix(in oklab, var(--nicho-primaria) 28%, transparent) !important;
}
html body.stark-backend .app-shell .btn:not(.btn-secundario):not(.btn-perigo):hover {
  color: #fff; filter: none;
  background: var(--nicho-primaria-hover) !important;
  box-shadow: 0 12px 26px color-mix(in oklab, var(--nicho-primaria) 34%, transparent) !important;
}
/* botão secundário = pílula branca com borda verde-clara do layout ("Ajustar IA", "Já tenho conta") */
html body.stark-backend .app-shell .btn-secundario {
  color: var(--nicho-texto) !important; border: 2px solid var(--nicho-borda-botao);
  background: var(--nicho-superficie); box-shadow: none;
}
html body.stark-backend .app-shell .btn-secundario:hover { color: var(--nicho-primaria) !important; border-color: var(--nicho-primaria); background: var(--nicho-superficie); filter: none; }
html body.stark-backend .app-shell .campo input, html body.stark-backend .app-shell .campo select, html body.stark-backend .app-shell .campo textarea {
  border: 2px solid var(--nicho-borda-campo);
  border-radius: 16px;
  background: var(--nicho-fundo-site);
  font-family: var(--nicho-fonte-texto);
  color: var(--nicho-texto);
}
html body.stark-backend .app-shell .campo input:focus, html body.stark-backend .app-shell .campo select:focus, html body.stark-backend .app-shell .campo textarea:focus {
  border-color: var(--nicho-primaria);
  box-shadow: var(--nicho-foco);
  background: var(--nicho-superficie);
}
html body.stark-backend .app-shell .campo label { color: var(--nicho-texto); font-weight: 800; }
html body.stark-backend .app-shell .alerta { border-radius: 16px; font-weight: 700; border-color: transparent; }
html body.stark-backend .app-shell .alerta-erro { background: var(--nicho-ambar-suave); color: var(--nicho-ambar-texto); }
html body.stark-backend .app-shell .alerta-sucesso { background: var(--nicho-verde-suave); color: var(--nicho-primaria-hover); }
html body.stark-backend .app-shell .tabela th { color: var(--nicho-suave); font-family: var(--nicho-fonte-texto); }
html body.stark-backend input[type=checkbox], html body.stark-backend input[type=radio] { accent-color: var(--nicho-primaria); }