/* Skin do NICHO NUTRIÇÃO (layout aprovado em layouts/0a7f9eb6_Nutri-Webbots-SaaS): verde #22C55E + laranja #F97316 de apoio,
   fundo #F6FBF7, títulos em 'Baloo 2' e texto em 'Nunito', cantos bem arredondados (pílulas de 999px, cartões de 24-28px).
   Mesmo NOME do arquivo do padrão porque login.php, cadastro.php, recuperar-senha.php, redefinir_senha.php e includes/header.php
   carregam assets/css/nicho-petshop.css. Só CSS e só variáveis: o nicho_aplicar.php reescreve as 7 variáveis --nicho-* do :root
   a partir do nicho.json; o PHP não muda por nicho. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800&display=swap');
:root {
  --nicho-primaria: #22C55E;
  --nicho-primaria-hover: #16A34A;
  --nicho-escuro: #14281D;
  --nicho-fundo: #F6FBF7;
  --nicho-texto: #14281D;
  --nicho-suave: #55695D;
  --nicho-borda: #E6F2EA;
}
/* extras do layout aprovado (o nicho_aplicar.php não mexe nestas) */
:root {
  --nicho-apoio: #F97316;
  --nicho-apoio-hover: #EA580C;
  --nicho-fundo-suave: #EFFCF3;
  --nicho-fundo-apoio: #FFF4EA;
  --nicho-campo: #F7FBF8;
  --nicho-fonte: 'Nunito', system-ui, sans-serif;
  --nicho-fonte-titulo: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --nicho-raio: 18px;
  --nicho-raio-card: 24px;
  --nicho-sombra: 0 6px 18px rgba(20, 60, 35, .04);
}
/* 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 (auth-v2.css põe a foto à esquerda e o formulário à direita) ===== */
body .auth-page { background: var(--nicho-fundo) !important; font-family: var(--nicho-fonte); }
body .auth-page::before {
  background:
    linear-gradient(0deg, rgba(20, 40, 29, .82) 0%, rgba(20, 40, 29, .06) 60%),
    url('../../site/imagens/foto_3.webp') center / cover no-repeat;
}
body .auth-page::after {
  content: 'Sua atendente de IA no WhatsApp já está te esperando.';
  font-family: var(--nicho-fonte-titulo);
  font-weight: 800;
  letter-spacing: 0;
}
body .auth-card h1 { font-family: var(--nicho-fonte-titulo) !important; font-weight: 800; letter-spacing: 0; color: var(--nicho-texto) !important; }
body .auth-card label { color: var(--nicho-texto); font-family: var(--nicho-fonte); font-weight: 800; }
body .auth-card p.subtitulo { color: var(--nicho-suave) !important; font-family: var(--nicho-fonte); }
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 {
  border: 2px solid var(--nicho-borda); border-radius: var(--nicho-raio); background: var(--nicho-campo);
  font-family: var(--nicho-fonte); font-weight: 700; color: var(--nicho-texto);
}
body .auth-card input::placeholder { color: color-mix(in oklab, var(--nicho-suave) 60%, #fff); font-weight: 600; }
body .auth-card input:focus, body .auth-card select:focus { border-color: var(--nicho-primaria); box-shadow: 0 0 0 4px color-mix(in oklab, var(--nicho-primaria) 18%, transparent); }
body .auth-card .btn {
  background: var(--nicho-primaria) !important; border-radius: 999px !important; font-family: var(--nicho-fonte); font-weight: 800;
  box-shadow: 0 12px 26px color-mix(in oklab, var(--nicho-primaria) 35%, transparent) !important;
}
body .auth-card .btn:hover { background: var(--nicho-primaria-hover) !important; }
body .auth-links a { color: var(--nicho-primaria-hover); font-weight: 800; }
/* abas "Entrar com WhatsApp / E-mail" do login: a classe .ativo marca a inicial e o JS da tela pinta a clicada inline (rgb(14,124,123)) */
body .auth-card .btn-tab-login { border-radius: 999px !important; font-family: var(--nicho-fonte); }
body .auth-card .btn-tab-login.ativo, body .auth-card .btn-tab-login[style*="rgb(14, 124, 123)"],
body .auth-card [class*="tab"].active, body .auth-card [class*="tab"].ativo { background: var(--nicho-primaria) !important; color: #fff !important; }
body .auth-card .alerta-erro { background: color-mix(in oklab, var(--nicho-apoio) 12%, #fff); color: var(--nicho-apoio-hover); border-radius: 14px; font-weight: 700; }
body .auth-card .alerta-sucesso { background: color-mix(in oklab, var(--nicho-primaria) 14%, #fff); color: var(--nicho-primaria-hover); border-radius: 14px; font-weight: 700; }

/* ===== painel (área interna) ===== */
html body.stark-backend.stark-backend {
  font-family: var(--nicho-fonte);
  --stark-app-bg: var(--nicho-fundo);
  --stark-text: var(--nicho-texto);
  --stark-muted: var(--nicho-suave);
  --stark-font-ui: var(--nicho-fonte);
  --stark-font-display: var(--nicho-fonte-titulo);
  --stark-radius-xl: 28px;
  --stark-radius-lg: var(--nicho-raio-card);
  --stark-radius-md: var(--nicho-raio);
}
html body.stark-backend.stark-backend h1, html body.stark-backend.stark-backend h2, html body.stark-backend.stark-backend h3,
html body.stark-backend.stark-backend .card .valor, html body.stark-backend.stark-backend .sidebar-brand-name { font-family: var(--nicho-fonte-titulo); font-weight: 800; letter-spacing: 0; }
html body.stark-backend.stark-backend a:not(.btn):not([class*="nav"]) { color: var(--nicho-primaria-hover); }
/* botões: pílula verde chapada do layout aprovado (o painel.css antigo fixa um verde-água em degradê) */
html body.stark-backend .app-shell .btn {
  color: #fff; border: 0; border-radius: 999px; font-family: var(--nicho-fonte); font-weight: 800;
  background: var(--nicho-primaria);
  box-shadow: 0 8px 20px color-mix(in oklab, var(--nicho-primaria) 30%, transparent);
}
html body.stark-backend .app-shell .btn:hover { color: #fff; background: var(--nicho-primaria-hover); filter: none; box-shadow: 0 12px 26px color-mix(in oklab, var(--nicho-primaria) 36%, transparent); }
html body.stark-backend .app-shell .btn-secundario {
  color: var(--nicho-texto); border: 1px solid var(--nicho-borda); background: #fff; box-shadow: var(--nicho-sombra);
}
html body.stark-backend .app-shell .btn-secundario:hover { color: var(--nicho-texto); background: var(--nicho-fundo-suave); border-color: var(--nicho-primaria); filter: none; }
/* cartões arredondados com borda suave */
html body.stark-backend .app-shell .card, html body.stark-backend .app-shell .painel-box {
  border-radius: var(--nicho-raio-card); border: 1px solid var(--nicho-borda); background: #fff; box-shadow: var(--nicho-sombra);
}
/* menu lateral: fundo vem de configuracoes_site.cor_menu_bg (= cores.escuro do nicho.json); item ativo verde chapado */
html body.stark-backend .sidebar-nav a { border-radius: 16px; font-family: var(--nicho-fonte); font-weight: 800; }
html body.stark-backend .sidebar-nav a.active { background: var(--nicho-primaria) !important; box-shadow: 0 8px 20px color-mix(in oklab, var(--nicho-primaria) 30%, transparent); }
html body.stark-backend .sidebar-nav a:not(.active):hover { background: color-mix(in oklab, var(--nicho-primaria) 16%, transparent); box-shadow: none; }
html body.stark-backend .sidebar-nav a:not(.active):hover > i { color: var(--nicho-primaria); }
html body.stark-backend .sidebar-brand-mark, html body.stark-backend .mobile-brand-mark { background: var(--nicho-primaria); color: #fff; box-shadow: 0 6px 16px color-mix(in oklab, var(--nicho-primaria) 35%, transparent); }
html body.stark-backend .sidebar-brand-mark i, html body.stark-backend .mobile-brand-mark i { color: #fff; }
html body.stark-backend .sidebar-status-card { border-radius: 20px; }
/* avisos e campos */
html body.stark-backend .alerta-sucesso { background: color-mix(in oklab, var(--nicho-primaria) 14%, #fff); color: var(--nicho-primaria-hover); border-radius: 16px; }
html body.stark-backend .alerta-erro { background: color-mix(in oklab, var(--nicho-apoio) 12%, #fff); color: var(--nicho-apoio-hover); border-radius: 16px; }
html body.stark-backend .campo input, html body.stark-backend .campo select, html body.stark-backend .campo textarea { border-radius: 14px; font-family: var(--nicho-fonte); }
html body.stark-backend .campo input:focus, html body.stark-backend .campo select:focus, html body.stark-backend .campo textarea:focus { border-color: var(--nicho-primaria); box-shadow: 0 0 0 4px color-mix(in oklab, var(--nicho-primaria) 18%, transparent); }
html body.stark-backend input[type=checkbox], html body.stark-backend input[type=radio] { accent-color: var(--nicho-primaria); }