/* Skin "nicho-petshop" da BOUTIQUE FLOR DE LIS (layout aprovado layouts/11d26e99_Marmita-Fit-Express): verde #E0337A com laranja #0F8C82,
   links e destaques em vermelho #8E1446, texto #2A1622, fundo creme #FFF8FA, menu lateral verde-escuro #2A1622 e fonte Plus Jakarta Sans.
   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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root {
  --nicho-primaria: #E0337A;
  --nicho-primaria-hover: #C7266A;
  --nicho-escuro: #2A1622;
  --nicho-fundo: #FFF8FA;
  --nicho-texto: #2A1622;
  --nicho-suave: #6D5866;
  --nicho-borda: #EBD3DF;
  /* paleta extra do layout aprovado (nicho.json -> layout.cores_extra) */
  --nicho-verde-2: #0F8C82;
  --nicho-verde-escuro-2: #0A5953;
  --nicho-lima: #FF8A3D;
  --nicho-verde-suave: #FFE3EE;
  --nicho-verde-suave-2: #FFEEF4;
  --nicho-verde-fundo: #FFF0F5;
  --nicho-laranja: #0F8C82;
  --nicho-laranja-escuro: #0A5953;
  --nicho-pessego: #FFE2D2;
  --nicho-creme: #FFF1EC;
  --nicho-vermelho: #8E1446;
  --nicho-vermelho-escuro: #6A0E38;
  --nicho-amarelo: #F5B60A;
  --nicho-amarelo-suave: #FFF6D9;
  --nicho-ambar-texto: #7A5408;
  --nicho-menu-texto: #DDF4F1;
  --nicho-menu-suave: #EBD3DF;
  --nicho-superficie: #FFFFFF;
  --nicho-fundo-painel: #F9F0F4;
  --nicho-borda-campo: #EBD3DF;
  --nicho-borda-suave: #EBD3DF;
  --nicho-whatsapp: #0E8A5F;
  /* derivadas (só a partir das variáveis acima) */
  --nicho-verde-borda: color-mix(in oklab, var(--nicho-primaria) 35%, #fff);                 /* borda dos botões secundários do layout */
  --nicho-degrade: linear-gradient(135deg, var(--nicho-verde-2), var(--nicho-lima));          /* marca (folha) */
  --nicho-degrade-cta: linear-gradient(90deg, var(--nicho-primaria), var(--nicho-laranja));  /* selo "Mais escolhido" */
  --nicho-fonte-titulo: 'Plus Jakarta Sans', system-ui, sans-serif;
  --nicho-fonte-texto: 'Plus Jakarta Sans', system-ui, sans-serif;
  --nicho-sombra: 0 10px 24px -18px color-mix(in oklab, var(--nicho-escuro) 30%, transparent);
  --nicho-sombra-botao: 0 12px 24px -10px color-mix(in oklab, var(--nicho-primaria) 60%, transparent);
  --nicho-foco: 0 0 0 4px color-mix(in oklab, var(--nicho-vermelho) 14%, #fff);
  --nicho-fundo-auth: radial-gradient(45% 40% at 10% 15%, var(--nicho-pessego) 0%, transparent 70%),
    radial-gradient(40% 40% at 90% 85%, var(--nicho-verde-suave-2) 0%, transparent 70%),
    radial-gradient(30% 30% at 85% 10%, var(--nicho-amarelo-suave) 0%, transparent 70%), var(--nicho-fundo);
}
/* 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, cadastro e recuperação (Login.dc.html / Cadastro.dc.html / RecuperarSenha.dc.html aprovados): um cartão branco centralizado
   (440px, cantos de 28px) sobre o fundo creme com manchas pêssego/verde/amarelo; campos de 48px com cantos de 12px, botão pílula verde,
   links em vermelho. Sobrescreve o auth-v2.css (carregado antes), que divide a tela em foto + formulário. ===== */
body .auth-page {
  display: flex !important;
  grid-template-columns: none;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 56px) 16px !important;
  background: var(--nicho-fundo-auth) !important;
  color: var(--nicho-texto);
  font-family: var(--nicho-fonte-texto);
  --accent-gradient: var(--nicho-degrade);   /* a marca (quadrado com ícone) do cadastro usa este degradê */
}
body .auth-page::before, body .auth-page::after { content: none; display: none; }
body .auth-card {
  grid-column: auto; grid-row: auto;
  width: 100%;
  max-width: 440px;
  margin: 0;
  padding: clamp(24px, 5vw, 36px) !important;
  background: var(--nicho-superficie) !important;
  border: 0 !important;
  border-radius: 28px;
  box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--nicho-escuro) 40%, transparent), 0 0 0 1px color-mix(in oklab, var(--nicho-borda) 60%, transparent) !important;
  animation: none;
}
body .auth-card h1 {
  font-family: var(--nicho-fonte-titulo) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
  color: var(--nicho-texto) !important;
  text-align: center !important;
  margin: 0 0 8px !important;
}
body .auth-card p.subtitulo { text-align: center !important; color: var(--nicho-suave) !important; font-size: 14.5px !important; line-height: 1.5; margin: 0 0 20px !important; }
body .auth-card label, body .auth-card .campo label { color: var(--nicho-texto); font-family: var(--nicho-fonte-texto); font-weight: 700; font-size: 14px; }
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: 48px;
  border: 1.5px solid var(--nicho-borda-campo);
  border-radius: 12px;
  background: var(--nicho-superficie);
  color: var(--nicho-texto);
  font-family: var(--nicho-fonte-texto);
  font-size: 15px;
  font-weight: 500;
}
body .auth-card input::placeholder { color: var(--nicho-suave); opacity: .65; }
body .auth-card input:focus, body .auth-card select:focus { outline: none; border-color: var(--nicho-primaria); box-shadow: var(--nicho-foco); }
body .auth-card .btn {
  min-height: 52px;
  border-radius: 999px !important;
  background: var(--nicho-primaria) !important;
  color: #fff !important;
  font-family: var(--nicho-fonte-texto);
  font-weight: 700;
  font-size: 16px;
  box-shadow: var(--nicho-sombra-botao) !important;
}
body .auth-card .btn:hover { background: var(--nicho-primaria-hover) !important; }
body .auth-card .btn:active { background: var(--nicho-vermelho-escuro) !important; }
/* abas "Entrar com WhatsApp / E-mail" do login: trilho creme com a aba ativa branca e texto vermelho (login.php marca a ativa com .ativo) */
body .auth-card form > div:has(> .btn-tab-login) { background: var(--nicho-creme) !important; border: 0 !important; border-radius: 14px !important; }
body .auth-card .btn-tab-login { height: 42px; border-radius: 11px !important; background: transparent !important; color: var(--nicho-suave) !important; font-family: var(--nicho-fonte-texto); font-weight: 600 !important; font-size: 14px !important; }
body .auth-card .btn-tab-login:hover { color: var(--nicho-vermelho) !important; }
body .auth-card .btn-tab-login.ativo { background: var(--nicho-superficie) !important; color: var(--nicho-vermelho) !important; font-weight: 700 !important; box-shadow: 0 4px 10px -4px color-mix(in oklab, var(--nicho-escuro) 25%, transparent); }
body .auth-links { text-align: center; color: var(--nicho-suave); font-size: 14.5px; }
body .auth-links a { color: var(--nicho-vermelho) !important; font-weight: 700; text-decoration: none !important; }
body .auth-links a:hover { color: var(--nicho-vermelho-escuro) !important; }
body .auth-card .alerta { border-radius: 12px; font-weight: 600; border-color: transparent; }
body .auth-card .alerta-erro { background: color-mix(in oklab, var(--nicho-vermelho) 10%, #fff); color: var(--nicho-vermelho-escuro); }
body .auth-card .alerta-sucesso { background: var(--nicho-verde-suave); color: var(--nicho-verde-escuro-2); }
body .auth-card .btn-toggle-senha { color: var(--nicho-suave); }
body .auth-card .btn-toggle-senha:hover { color: var(--nicho-vermelho); background: var(--nicho-creme); }
body .auth-card input[type=checkbox] { accent-color: var(--nicho-primaria); }
@media (max-width: 900px) {
  body .auth-page { grid-template-rows: none; padding: 20px 12px !important; }
  body .auth-card { margin: 0; width: 100%; }
}

/* ===== painel (Painel.dc.html aprovado): menu lateral verde-escuro com item ativo verde e marca em degradê verde→lima, fundo creme-claro,
   cabeçalho branco translúcido, cartões brancos de 20-22px com sombra leve, botões pílula verdes e links em vermelho ===== */
html body.stark-backend.stark-backend {
  font-family: var(--nicho-fonte-texto);
  --stark-app-bg: var(--nicho-fundo-painel);
  --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-campo);
  --stark-radius-xl: 22px;
  --stark-radius-lg: 20px;
  --stark-radius-md: 14px;
  --stark-font-display: var(--nicho-fonte-titulo);
  --menu-bg: var(--nicho-escuro);
  --menu-texto: var(--nicho-menu-texto);
}
html body.stark-backend.stark-backend a:not(.btn):not([class*="nav"]) { color: var(--nicho-vermelho); }
html body.stark-backend.stark-backend a:not(.btn):not([class*="nav"]):hover { color: var(--nicho-vermelho-escuro); }
html body.stark-backend .sidebar {
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 24px;
  background: var(--nicho-escuro) !important;
  color: var(--nicho-menu-texto);
  box-shadow: none !important;
}
html body.stark-backend .sidebar-brand-mark,
html body.stark-backend .sidebar-brand-compact,
html body.stark-backend .mobile-brand-mark {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--nicho-degrade) !important;
  color: #fff !important;
  font-size: 19px;
  box-shadow: none !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: #fff !important; font-family: var(--nicho-fonte-titulo) !important; font-weight: 800; font-size: 15.5px; }
html body.stark-backend .sidebar-brand-sub { color: var(--nicho-menu-suave); }
html body.stark-backend .sidebar-section-label { color: var(--nicho-menu-suave) !important; opacity: .7; font-family: var(--nicho-fonte-texto) !important; }
html body.stark-backend .sidebar-divider { background: rgba(255, 255, 255, .08); }
html body.stark-backend .sidebar-nav a,
html body.stark-backend .sidebar-logout {
  color: var(--nicho-menu-suave) !important;
  border-radius: 12px;
  font-family: var(--nicho-fonte-texto);
  font-weight: 600;
  font-size: 14px;
}
html body.stark-backend .sidebar-nav a > i, html body.stark-backend .sidebar-logout > i { color: var(--nicho-menu-suave); }
html body.stark-backend .sidebar-nav a:not(.active):hover,
html body.stark-backend .sidebar-logout:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
}
html body.stark-backend .sidebar-nav a:not(.active):hover > i, html body.stark-backend .sidebar-logout:hover > i { color: #fff; }
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 -8px color-mix(in oklab, var(--nicho-primaria) 70%, transparent) !important;
  font-weight: 700;
  transform: none;
}
html body.stark-backend .sidebar-nav a.active > i { color: #fff !important; }
html body.stark-backend .sidebar-nav a .badge-pendencias { background: var(--nicho-amarelo) !important; color: var(--nicho-texto) !important; }
html body.stark-backend .sidebar-status-card,
html body.stark-backend .sidebar-cor-tema {
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--nicho-verde-2) 30%, transparent), color-mix(in oklab, var(--nicho-lima) 14%, transparent)) !important;
  box-shadow: none !important;
}
html body.stark-backend .sidebar-status-icon { background: rgba(255, 255, 255, .1) !important; color: var(--nicho-verde-suave) !important; box-shadow: none !important; }
html body.stark-backend .sidebar-status-copy span { color: #fff !important; font-weight: 800; }
html body.stark-backend .sidebar-status-copy strong { color: var(--nicho-menu-suave) !important; font-weight: 600; }
html body.stark-backend .sidebar-cor-header { color: var(--nicho-menu-suave); }
html body.stark-backend .sidebar-footer { border-top-color: rgba(255, 255, 255, .08); }
html body.stark-backend .sidebar-user-copy .nome { color: #fff !important; }
html body.stark-backend .sidebar-user-copy .papel, html body.stark-backend .sidebar-user-copy small { color: var(--nicho-menu-suave) !important; }
html body.stark-backend .sidebar-usuario .avatar { background: var(--nicho-pessego); color: var(--nicho-vermelho-escuro); box-shadow: none; }
html body.stark-backend .sidebar-logout { color: var(--nicho-verde-suave) !important; font-weight: 700; }
html body.stark-backend .sidebar-collapse-btn {
  color: var(--nicho-menu-texto);
  border: 0;
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}
html body.stark-backend .sidebar-collapse-btn:hover { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: none; }
html body.stark-backend .sidebar .btn.btn-secundario { color: var(--nicho-menu-texto) !important; border-color: transparent; background: rgba(255, 255, 255, .08); box-shadow: none; }
html body.stark-backend .sidebar .btn.btn-secundario:hover { color: #fff !important; background: rgba(255, 255, 255, .14); }
html body.stark-backend .topbar-desktop {
  background: color-mix(in oklab, var(--nicho-superficie) 92%, transparent);
  border-bottom: 1px solid var(--nicho-borda-suave);
}
html body.stark-backend .topbar-desktop .titulos .principal { font-family: var(--nicho-fonte-titulo); font-weight: 800; 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: 12px; }
@media (max-width: 1100px) {
  html body.stark-backend .topbar-mobile {
    color: var(--nicho-texto);
    background: color-mix(in oklab, var(--nicho-superficie) 92%, transparent);
    border-bottom: 1px solid var(--nicho-borda-suave);
    box-shadow: none;
  }
  html body.stark-backend .logo-mobile { color: var(--nicho-texto); font-family: var(--nicho-fonte-titulo); font-weight: 800; }
  html body.stark-backend .botao-menu { color: var(--nicho-texto); background: var(--nicho-superficie); border: 1px solid var(--nicho-borda-campo); border-radius: 12px; }
}
/* cartões, títulos, períodos do CRM e campos */
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,
html body.stark-backend .crm-periodos {
  border: 1px solid var(--nicho-borda);
  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: 20px; }
html body.stark-backend .painel-box, html body.stark-backend .finance-card, html body.stark-backend .crm-card { border-radius: 22px; }
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;
  font-weight: 800;
  color: var(--nicho-texto);
  letter-spacing: -.015em;
}
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, html body.stark-backend .crm-delta-up { color: var(--nicho-primaria); }
/* seletor de período (Hoje / 7 dias / 30 dias): trilho verde-claro com a aba ativa branca e texto vermelho, como no layout */
html body.stark-backend .crm-periodos { padding: 4px; border-radius: 12px; background: var(--nicho-verde-fundo); border: 0; box-shadow: none; }
html body.stark-backend .crm-periodos a, html body.stark-backend .crm-periodos button { border: 0; border-radius: 9px; background: transparent; color: var(--nicho-suave); font-family: var(--nicho-fonte-texto); font-weight: 600; font-size: 13.5px; }
html body.stark-backend .crm-periodos a:hover { color: var(--nicho-vermelho); }
html body.stark-backend .crm-periodos a.ativo { background: var(--nicho-superficie); color: var(--nicho-vermelho); font-weight: 700; box-shadow: 0 3px 8px -3px color-mix(in oklab, var(--nicho-escuro) 25%, transparent); }
html body.stark-backend .crm-periodos input { border: 1.5px solid var(--nicho-borda-campo); border-radius: 9px; background: var(--nicho-superficie); color: var(--nicho-texto); }
html body.stark-backend .app-shell .btn {
  border: 0;
  border-radius: 999px;
  font-family: var(--nicho-fonte-texto);
  font-weight: 700;
}
/* 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: var(--nicho-sombra-botao) !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 14px 28px -10px color-mix(in oklab, var(--nicho-primaria) 70%, transparent) !important;
}
/* botão secundário = pílula branca com borda verde-clara e texto vermelho ("Abrir assinatura" do layout) */
html body.stark-backend .app-shell .btn-secundario {
  color: var(--nicho-vermelho) !important; border: 1.5px solid var(--nicho-verde-borda);
  background: var(--nicho-superficie); box-shadow: none;
}
html body.stark-backend .app-shell .btn-secundario:hover { color: var(--nicho-vermelho-escuro) !important; border-color: var(--nicho-primaria); background: var(--nicho-verde-fundo); 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: 1.5px solid var(--nicho-borda-campo);
  border-radius: 12px;
  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);
}
html body.stark-backend .app-shell .campo label { color: var(--nicho-texto); font-weight: 700; }
html body.stark-backend .app-shell .alerta { border-radius: 14px; font-weight: 600; border-color: transparent; }
html body.stark-backend .app-shell .alerta-erro { background: var(--nicho-creme); color: var(--nicho-vermelho-escuro); }
html body.stark-backend .app-shell .alerta-sucesso { background: var(--nicho-verde-suave); color: var(--nicho-verde-escuro-2); }
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); }