/* Skin "nicho-petshop" da ESMALTERIA (layout aprovado layouts/8cdfba04_Esmalteria-Webbots-SaaS): rosa #0284C7, ameixa #0B2A3F,
   fundo #F4FAFE, 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: #0284C7;
  --nicho-primaria-hover: #0369A1;
  --nicho-escuro: #0B2A3F;
  --nicho-fundo: #F4FAFE;
  --nicho-texto: #0B2A3F;
  --nicho-suave: #577287;
  --nicho-borda: #E2EDF6;
  /* paleta extra do layout aprovado (nicho.json -> layout.cores_extra) */
  --nicho-verde-agua: #0FB5A6;
  --nicho-amarelo: #FFD23F;
  --nicho-lilas: #A77BFF;
  --nicho-rosa-suave: #D3EEFC;
  --nicho-verde-agua-suave: #D8F5F1;
  --nicho-amarelo-suave: #FFF3C4;
  --nicho-lilas-suave: #EFE6FF;
  --nicho-superficie: #FFFFFF;
  --nicho-superficie-2: #E6F4FC;
  --nicho-fonte-titulo: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --nicho-fonte-texto: 'Nunito', system-ui, sans-serif;
  --nicho-sombra: 0 12px 32px rgba(255, 79, 139, .12);
  --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, cadastro e recuperação (Login.dc.html / Cadastro.dc.html aprovados): foto arredondada com cartão à esquerda,
   formulário com campos de 56px, cantos de 18px e botão pílula à direita. Sobrescreve o auth-v2.css (carregado antes). ===== */
body .auth-page {
  background: var(--nicho-fundo) !important;
  color: var(--nicho-texto);
  font-family: var(--nicho-fonte-texto);
  padding: clamp(0px, 2vw, 20px) !important;
  gap: 20px;
}
body .auth-page::before {
  min-height: calc(100vh - 40px);
  border-radius: 40px;
  background:
    linear-gradient(0deg, rgba(45, 27, 54, .45) 0%, rgba(45, 27, 54, 0) 55%),
    var(--nicho-rosa-suave) url('../../site/imagens/foto_3.webp') center / cover no-repeat;
}
body .auth-page::after {
  content: 'Sua agenda cheia enquanto você faz as unhas.';
  align-self: end;
  justify-self: start;
  margin: 0 0 40px 40px;
  padding: 22px 24px;
  max-width: 420px;
  border-radius: 28px;
  background: var(--nicho-superficie);
  color: var(--nicho-texto);
  font: 700 24px / 1.2 var(--nicho-fonte-titulo);
  letter-spacing: 0;
  box-shadow: 0 18px 40px rgba(45, 27, 54, .16);
}
body .auth-card { max-width: 440px; }
body .auth-card h1 {
  font-family: var(--nicho-fonte-titulo) !important;
  font-size: clamp(30px, 4vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.05;
  letter-spacing: -.01em !important;
  color: var(--nicho-texto) !important;
}
body .auth-card p.subtitulo { color: var(--nicho-suave) !important; font-size: 17px !important; line-height: 1.45; margin-bottom: 22px; }
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);
  border-radius: 18px;
  background: var(--nicho-superficie);
  color: var(--nicho-texto);
  font-family: var(--nicho-fonte-texto);
  font-size: 17px;
  font-weight: 600;
}
body .auth-card input::placeholder { color: var(--nicho-suave); opacity: .7; }
body .auth-card input:focus, body .auth-card select:focus { border-color: var(--nicho-primaria); box-shadow: var(--nicho-foco); }
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: 18px;
  box-shadow: 0 10px 24px color-mix(in oklab, var(--nicho-primaria) 35%, transparent) !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; }
body .auth-links a { color: var(--nicho-primaria) !important; font-weight: 800; text-decoration: none !important; }
body .auth-links a:hover { color: var(--nicho-verde-agua) !important; }
body .auth-card .alerta { border-radius: 16px; font-weight: 700; border-color: transparent; }
body .auth-card .alerta-erro { background: var(--nicho-amarelo-suave); color: var(--nicho-texto); }
body .auth-card .alerta-sucesso { background: var(--nicho-verde-agua-suave); color: #0a6b62; }
body .auth-card .btn-toggle-senha { color: var(--nicho-suave); }
body .auth-card .btn-toggle-senha:hover { color: var(--nicho-primaria); background: var(--nicho-rosa-suave); }
@media (max-width: 900px) {
  body .auth-page { padding: 0 !important; gap: 0; }
  body .auth-page::before { min-height: 220px; border-radius: 0 0 28px 28px; }
}

/* ===== painel (Painel.dc.html aprovado): menu lateral claro com item ativo rosa-claro, cartões de 26-28px, títulos Baloo 2 ===== */
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: 22px;
  --stark-radius-md: 16px;
  --stark-font-display: var(--nicho-fonte-titulo);
  /* o menu claro 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-right: 1px solid var(--nicho-borda) !important;
  box-shadow: none !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 16px color-mix(in oklab, var(--nicho-primaria) 35%, 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-borda); }
html body.stark-backend .sidebar-nav a,
html body.stark-backend .sidebar-logout {
  color: var(--nicho-suave) !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: var(--nicho-superficie-2);
  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); }
html body.stark-backend .sidebar-nav a.active,
html body.stark-backend .sidebar-nav a.active:hover {
  color: var(--nicho-primaria-hover) !important;
  background: var(--nicho-rosa-suave) !important;
  box-shadow: none !important;
  transform: none;
}
html body.stark-backend .sidebar-nav a.active > i { color: var(--nicho-primaria-hover) !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-amarelo-suave) !important;
  box-shadow: none !important;
}
html body.stark-backend .sidebar-status-icon { background: var(--nicho-superficie) !important; color: var(--nicho-primaria) !important; box-shadow: none !important; }
html body.stark-backend .sidebar-status-copy span { color: var(--nicho-suave) !important; }
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-collapse-btn {
  color: var(--nicho-suave);
  border: 1px solid var(--nicho-borda);
  background: var(--nicho-superficie);
  box-shadow: none;
}
html body.stark-backend .sidebar-collapse-btn:hover { color: var(--nicho-primaria); background: var(--nicho-rosa-suave); border-color: var(--nicho-rosa-suave); box-shadow: none; }
@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-borda);
    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: var(--nicho-primaria); background: var(--nicho-rosa-suave); 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 {
  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 { border-radius: 26px; }
html body.stark-backend .painel-box { 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 .finance-card .top h2 {
  font-family: var(--nicho-fonte-titulo) !important;
  color: var(--nicho-texto);
  letter-spacing: -.01em;
}
html body.stark-backend .stat-card .rotulo, html body.stark-backend .card .rotulo, html body.stark-backend .subtitulo { color: var(--nicho-suave); }
html body.stark-backend .stat-card .delta { color: var(--nicho-verde-agua); }
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 rosa liso do layout (o painel.css pinta o botão com degradê escuro 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 20px color-mix(in oklab, var(--nicho-primaria) 30%, 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) 36%, transparent) !important;
}
html body.stark-backend .app-shell .btn-secundario {
  color: var(--nicho-texto); border: 1px solid var(--nicho-borda);
  background: var(--nicho-superficie); box-shadow: none;
}
html body.stark-backend .app-shell .btn-secundario:hover { color: var(--nicho-texto); background: var(--nicho-superficie-2); border-color: var(--nicho-primaria); 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);
  border-radius: 16px;
  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: 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-amarelo-suave); color: var(--nicho-texto); }
html body.stark-backend .app-shell .alerta-sucesso { background: var(--nicho-verde-agua-suave); color: #0a6b62; }
html body.stark-backend input[type=checkbox], html body.stark-backend input[type=radio] { accent-color: var(--nicho-primaria); }