/* =====================================================================
   Kronis — identidade visual (brand kit 2026)
   Carregado por último em todos os layouts. Não mexe em funções nem na ordem dos botões:
   só cores, fonte, cantos, sombras e o mascote Kroni nos estados (vazio, carregando, erro).

   Paleta:  preto #0F1115 · cinza escuro #1E2228 · cinza #6B7280 · off white #F7F7F8 · laranja #FF7A2F
   Fonte:   Sora (títulos 700, subtítulos 500/600, textos 400)
   ===================================================================== */
:root{
  --k-black:#0f1115;
  --k-ink:#1e2228;
  --k-gray:#6b7280;
  --k-offwhite:#f7f7f8;
  --k-orange:#ff7a2f;
  --k-orange-dark:#e8641a;
  --k-orange-soft:#fff1e8;
  --k-line:#ececef;
  --k-radius:16px;
  --k-shadow:0 1px 2px rgba(15,17,21,.04), 0 8px 24px rgba(15,17,21,.05);
  --k-font:'Sora', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------------- Fonte ---------------- */
body,
body button,
body input,
body select,
body textarea{ font-family:var(--k-font); }
body{ letter-spacing:-.005em; }
h1, h2, h3, .inicio-title, .dash-topbar h1{ letter-spacing:-.02em; }

/* =====================================================================
   PAINEL (estabelecimento, funcionário e admin) — tema da marca
   ===================================================================== */
body.theme-brand{
  --pl-line:var(--k-line);
  --pl-shadow:var(--k-shadow);
  --pl-soft:#f4f4f6;
  background:var(--k-offwhite);
}
body.theme-brand.page-dashboard{ background:var(--k-offwhite); }
/* admin: a superfície secundária era o cartão escurecido 30% (bom no escuro, cinza pesado no claro) */
body.theme-brand #page-dashboard.adm{
  --adm-surface-2:#f4f4f6;
  --adm-line:var(--k-line);
}

/* ---------- Menu lateral escuro (como no brand kit) ---------- */
body.theme-brand #page-dashboard .dashboard-sidebar{
  --text-primary:#f2f3f5;
  --text-secondary:#9aa0aa;
  --muted:#9aa0aa;
  --border:rgba(255,255,255,.07);
  background:var(--k-black);
  border-right:0;
  color:#d6d9de;
}
body.theme-brand #page-dashboard .sidebar-brand{ border-bottom-color:rgba(255,255,255,.06); }
body.theme-brand #page-dashboard .sidebar-label{ color:#5f6672; }
body.theme-brand #page-dashboard .sidebar-btn{ color:#c9cdd4; }
body.theme-brand #page-dashboard .sidebar-btn i{ color:#aab0b9; }
body.theme-brand #page-dashboard .sidebar-btn:hover{ background:rgba(255,255,255,.05); color:#fff; }
body.theme-brand #page-dashboard .sidebar-btn:hover i{ color:#fff; }
body.theme-brand #page-dashboard .sidebar-btn.active{
  background:rgba(255,122,47,.13);
  color:var(--k-orange);
  box-shadow:none;
  font-weight:600;
}
body.theme-brand #page-dashboard .sidebar-btn.active i{ color:var(--k-orange); }
body.theme-brand #page-dashboard .sidebar-btn.active::before{ box-shadow:none; background:var(--k-orange); }
body.theme-brand #page-dashboard .sidebar-btn-logout,
body.theme-brand #page-dashboard .sidebar-btn-logout i{ color:#f87171; }
body.theme-brand #page-dashboard .sidebar-toggle-btn{
  color:#c9cdd4;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.1);
}
body.theme-brand #page-dashboard .sidebar-toggle-btn:hover{ color:#fff; background:rgba(255,255,255,.08); }

/* Logo Kronis no topo do menu (aberto); fechado, volta o logo do estabelecimento */
#page-dashboard .sidebar-kronis-logo{ display:none; }
body.theme-brand #page-dashboard .sidebar-kronis-logo{ display:block; height:26px; width:auto; margin-right:auto; }
body.theme-brand #page-dashboard .dashboard-sidebar:not(.collapsed) .sidebar-logo,
body.theme-brand #page-dashboard .dashboard-sidebar:not(.collapsed) .sidebar-brand-name{ display:none; }
body.theme-brand #page-dashboard .dashboard-sidebar.collapsed .sidebar-kronis-logo{ display:none; }
/* admin: "Administração" vira uma etiqueta pequena ao lado da logo */
body.theme-brand #page-dashboard.adm .dashboard-sidebar:not(.collapsed) .sidebar-brand-name{
  display:inline-block;
  flex:0 0 auto;
  margin-right:auto;
  padding:3px 8px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--k-orange);
  background:rgba(255,122,47,.12);
}
body.theme-brand #page-dashboard.adm .dashboard-sidebar:not(.collapsed) .sidebar-kronis-logo{ margin-right:10px; height:24px; }

/* Cartão "Precisa de ajuda? Fale com o Kroni" no rodapé do menu */
#page-dashboard .sidebar-footer{ opacity:1; }
#page-dashboard .sidebar-help-card{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 12px 8px 6px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,122,47,.16), rgba(255,255,255,.03) 70%);
  color:#fff;
  text-align:left;
  cursor:pointer;
  font:inherit;
  overflow:hidden;
}
#page-dashboard .sidebar-help-card:hover{ border-color:rgba(255,122,47,.45); }
#page-dashboard .sidebar-help-img{ width:52px; height:52px; object-fit:contain; flex-shrink:0; margin:-6px 0 -10px; }
#page-dashboard .sidebar-help-text{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
#page-dashboard .sidebar-help-text strong{ font-size:12.5px; font-weight:600; }
#page-dashboard .sidebar-help-text small{ font-size:11px; color:#9aa0aa; }
#page-dashboard .sidebar-help-card > i{ margin-left:auto; color:#9aa0aa; font-size:13px; }
#page-dashboard .dashboard-sidebar.collapsed .sidebar-help-card{ padding:4px; justify-content:center; border-radius:12px; }
#page-dashboard .dashboard-sidebar.collapsed .sidebar-help-text,
#page-dashboard .dashboard-sidebar.collapsed .sidebar-help-card > i{ display:none; }
#page-dashboard .dashboard-sidebar.collapsed .sidebar-help-img{ width:40px; height:40px; margin:0; }
/* tema claro de outra cor: o cartão continua legível */
body:not(.theme-brand) #page-dashboard .sidebar-help-card{ color:var(--text-primary); border-color:var(--border); }

/* ---------- Barra superior ---------- */
body.theme-brand #page-dashboard .dash-topbar{
  background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--k-line);
}

/* ---------- Cartões ---------- */
body.theme-brand #page-dashboard .inicio-card,
body.theme-brand #page-dashboard .inicio-kpi,
body.theme-brand #page-dashboard .card,
body.theme-brand #page-dashboard .adm-card,
body.theme-brand #page-dashboard .adm-kpi{
  background:#fff;
  border:1px solid var(--k-line);
  border-radius:var(--k-radius);
  box-shadow:var(--k-shadow);
}
/* Cartão de destaque: off white com um toque de laranja, sem o degradê escuro */
body.theme-brand #page-dashboard .inicio-kpi--hero,
body.theme-brand #page-dashboard .adm-kpi--hero{
  background:linear-gradient(135deg, #fff 55%, var(--k-orange-soft));
  border-color:#ffd9c2;
}
/* Ícone dos números num quadradinho colorido, como no brand kit */
body.theme-brand #page-dashboard .inicio-kpi-label i,
body.theme-brand #page-dashboard .adm-kpi-label i{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-right:4px;
  border-radius:9px;
  font-size:15px;
  color:var(--k-orange);
  background:var(--k-orange-soft);
}
body.theme-brand #page-dashboard .inicio-kpi:nth-child(2) .inicio-kpi-label i{ color:#16a34a; background:#eaf8ef; }
body.theme-brand #page-dashboard .inicio-kpi:nth-child(3) .inicio-kpi-label i{ color:#3b82f6; background:#eef4ff; }
body.theme-brand #page-dashboard .inicio-kpi:nth-child(4) .inicio-kpi-label i{ color:#f59e0b; background:#fff7e6; }
body.theme-brand #page-dashboard .inicio-kpi-label{ text-transform:none; letter-spacing:0; font-weight:500; }
body.theme-brand #page-dashboard .inicio-kpi-value{ color:var(--k-black); font-weight:700; }

/* ---------- Botões ---------- */
body.theme-brand #page-dashboard .inicio-action--primary,
body.theme-brand .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-small):not([class*="danger"]):not(.tana-alert-btn--secondary){
  background:var(--k-orange);
  color:#fff;
  box-shadow:0 6px 16px rgba(255,122,47,.28);
}
body.theme-brand #page-dashboard .inicio-action--primary:hover,
body.theme-brand .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-small):not([class*="danger"]):not(.tana-alert-btn--secondary):hover{ background:var(--k-orange-dark); }
body.theme-brand #page-dashboard .inicio-action:not(.inicio-action--primary){
  background:#fff;
  color:var(--k-black);
  border:1px solid var(--k-line);
}
body.theme-brand #page-dashboard .inicio-link{ color:var(--k-orange); }

/* ---------- Início: cartão do Kroni ---------- */
#page-dashboard .inicio-card--kroni{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding:22px 22px 24px;
  background:linear-gradient(180deg, var(--k-orange-soft), #fff 70%);
  border-color:#ffe1cf;
  overflow:hidden;
}
body:not(.theme-brand) #page-dashboard .inicio-card--kroni{ background:var(--card); border-color:var(--border); }
#page-dashboard .inicio-kroni-img{ width:132px; height:auto; margin:-4px 0 4px; animation:kroni-flutua 4s ease-in-out infinite; }
#page-dashboard .inicio-kroni-title{ margin:0; font-size:18px; font-weight:700; line-height:1.25; color:var(--text-primary); }
#page-dashboard .inicio-kroni-text{ margin:0 0 8px; max-width:260px; font-size:13px; color:var(--text-secondary); }
#page-dashboard .inicio-kroni-btn{
  padding:10px 20px;
  border:0;
  border-radius:11px;
  background:var(--accent1);
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent1) 30%, transparent);
}
#page-dashboard .inicio-kroni-btn:hover{ filter:brightness(.95); }
@media (min-width:1100px){
  #page-dashboard .inicio-card--today{ grid-row:1 / span 2; }
  #page-dashboard .inicio-card--kroni{ grid-column:2; grid-row:3; }
}

/* Aba Kroni: o avatar laranja do brand kit já é o quadradinho inteiro */
#page-dashboard .kroni-hero-avatar{ border:0; background:none; }
#page-dashboard .kroni-hero-avatar img{ padding:0; border-radius:22px; box-shadow:0 10px 24px rgba(255,122,47,.28); }

/* =====================================================================
   KRONI NOS ESTADOS (kroni-ui.js): vazio, carregando, erro, sucesso
   ===================================================================== */
/* sem !important no display: o que o sistema esconde (style="display:none") continua escondido */
.kroni-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:22px 16px !important;
  text-align:center !important;
  color:var(--text-secondary, #6b7280);
  font-size:14px;
  line-height:1.45;
}
td.kroni-state{ display:table-cell; }
.kroni-state[hidden]{ display:none; }
.kroni-state-img{
  display:block;
  margin:0 auto 8px;
  width:112px;
  height:auto;
  max-height:120px;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  animation:kroni-entra .35s ease both;
}
.kroni-state--compact{ padding:14px 10px !important; gap:4px; font-size:13px; }
.kroni-state--compact .kroni-state-img{ width:72px; max-height:76px; }
.kroni-state--mini .kroni-state-img{ width:52px; max-height:56px; }
.kroni-state > i.bi:first-of-type{ display:none; } /* o ícone antigo dá lugar ao Kroni */
.kroni-state--erro{ color:var(--text-secondary, #6b7280); }

/* Carregando: Kroni no notebook + barrinha laranja correndo */
.kroni-state--loading .kroni-state-img{ animation:kroni-flutua 2.4s ease-in-out infinite; }
.kroni-state--loading::after{
  content:'';
  display:block;
  width:120px;
  height:6px;
  margin-top:4px;
  border-radius:99px;
  background:linear-gradient(90deg, var(--k-orange) 0 40%, rgba(255,122,47,.18) 40% 100%);
  background-size:200% 100%;
  animation:kroni-barra 1.1s ease-in-out infinite;
}
td.kroni-state--loading::after{ margin:6px auto 0; }
.kroni-state--compact.kroni-state--loading::after{ width:84px; height:5px; }

@keyframes kroni-flutua{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@keyframes kroni-entra{ from{ opacity:0; transform:translateY(6px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes kroni-barra{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
@media (prefers-reduced-motion:reduce){
  .kroni-state-img, .kroni-state--loading::after, #page-dashboard .inicio-kroni-img{ animation:none !important; }
}

/* Tela cheia de carregamento (KroniUI.mostrarCarregando) */
.kroni-overlay{
  position:fixed;
  inset:0;
  z-index:99990;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(247,247,248,.86);
  backdrop-filter:blur(3px);
}
.kroni-overlay .kroni-state{
  padding:26px 34px !important;
  border-radius:20px;
  background:#fff;
  box-shadow:0 20px 60px rgba(15,17,21,.12);
  color:var(--k-black);
  font-weight:600;
}

/* =====================================================================
   AVISOS (TanaAlert): o Kroni aparece no topo da caixa
   ===================================================================== */
.tana-alert-icon.tana-alert-icon--kroni{
  width:auto;
  height:auto;
  margin:-6px auto 8px;
  border-radius:0;
  background:none !important;
}
.tana-alert-box{ border-radius:20px; box-shadow:0 24px 60px rgba(15,17,21,.22); }
.tana-alert-btn--primary{ background:var(--k-orange) !important; color:#fff !important; }
.tana-alert-kroni{
  display:block;
  width:96px;
  height:auto;
  margin:-4px auto 6px;
  animation:kroni-entra .3s ease both;
}

/* =====================================================================
   TELAS DE ACESSO (login, cadastro, esqueci a senha)
   Formulário no painel escuro, mascote no painel claro (como no brand kit)
   ===================================================================== */
body.page-auth{ background:var(--k-black); }
body.page-auth .auth-card{
  background:var(--k-black) !important;
  border-color:rgba(255,255,255,.08) !important;
  color:#f2f3f5;
}
body.page-auth .auth-card .auth-card-logo{ display:block; height:34px; width:auto; margin:0 0 22px; }
body.page-auth .auth-card h2{ font-weight:700; letter-spacing:-.02em; color:#fff; }
body.page-auth .auth-card label{ color:#e5e7eb; font-weight:500; }
body.page-auth .auth-card .input,
body.page-auth .auth-card input:not([type="checkbox"]):not([type="radio"]),
body.page-auth .auth-card select{
  background:#171a1f !important;
  border-color:#2a2f37 !important;
  color:#fff !important;
}
body.page-auth .auth-card .input:focus-within{ border-color:var(--k-orange) !important; box-shadow:0 0 0 3px rgba(255,122,47,.18) !important; }
body.page-auth .auth-card .input input{ background:transparent !important; border:0 !important; }
body.page-auth .btn,
body.page-auth .login-submit{
  background:var(--k-orange) !important;
  color:#fff !important;
  border:0;
  box-shadow:0 10px 24px rgba(255,122,47,.3);
}
body.page-auth .btn:hover{ background:var(--k-orange-dark) !important; }
body.page-auth .login-forgot,
body.page-auth .auth-card a{ color:var(--k-orange); }

body.page-auth #page-login.auth-grid,
body.page-auth #page-register.auth-grid,
body.page-auth #page-esqueci-senha.auth-grid{
  background:var(--k-black) !important;
  border-color:rgba(255,255,255,.07) !important;
  box-shadow:0 40px 100px rgba(0,0,0,.5) !important;
}
/* formulário à esquerda, Kroni à direita */
@media (min-width:900px){
  body.page-auth .auth-grid > .auth-brand-panel{ order:2; border-right:0 !important; }
  body.page-auth .auth-grid > .auth-card{ order:1; }
}
/* o painel claro ocupa a metade inteira; o formulário usa a largura toda da coluna (até 440 px) */
body.page-auth .auth-grid > .auth-brand-panel{ max-width:none !important; width:auto !important; }
/* cadastro (formulário comprido): o painel claro vai até o fim e o Kroni acompanha a rolagem */
@media (min-width:900px){
  body.page-auth .auth-grid > .auth-brand-panel{ align-self:stretch !important; position:relative !important; height:auto !important; }
  body.page-auth .auth-grid > .auth-brand-panel .auth-brand-body{ position:sticky; top:48px; }
}
body.page-auth .auth-grid > .auth-card > *{ width:100%; max-width:440px; margin-left:auto; margin-right:auto; }
/* logo branca no topo do formulário, alinhada com os campos */
body.page-auth .auth-grid > .auth-card::before{
  content:'';
  display:block;
  width:100%;
  max-width:440px;
  height:34px;
  margin:0 auto 26px;
  background:url('/img/brand/kronis-logo-branca.png') left center / contain no-repeat;
}

/* Painel do mascote (claro) */
body.page-auth .auth-brand-panel .auth-brand-body{ margin:auto 0; }
body.page-auth .auth-brand-panel{
  background:var(--k-offwhite) !important;
  color:var(--k-black) !important;
  border:0 !important;
}
body.page-auth .auth-brand-panel .auth-brand-logo img{ content:url('/img/brand/kronis-logo-preta.png'); height:30px; width:auto; }
body.page-auth .auth-brand-hero{
  display:block;
  width:min(340px, 80%);
  height:auto;
  margin:0 auto 6px;
  filter:drop-shadow(0 18px 30px rgba(15,17,21,.16));
  animation:kroni-flutua 5s ease-in-out infinite;
}
body.page-auth .auth-brand-tagline{
  margin:0;
  font-size:clamp(28px, 3.2vw, 40px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--k-black);
}
body.page-auth .auth-brand-tagline span{ display:block; }
body.page-auth .auth-brand-tagline span::after{ content:'.'; color:var(--k-orange); }
body.page-auth .auth-brand-panel .auth-brand-subtitle{ color:var(--k-gray) !important; }
body.page-auth .auth-brand-dots{ display:flex; gap:6px; margin-top:18px; }
body.page-auth .auth-brand-dots span{ width:6px; height:6px; border-radius:99px; background:#d4d6db; }
body.page-auth .auth-brand-dots span:first-child{ width:22px; background:var(--k-orange); }
body.page-auth .auth-brand-panel .auth-brand-foot,
body.page-auth .auth-brand-panel .auth-brand-foot a{ color:var(--k-gray) !important; }

/* =====================================================================
   PÁGINA PÚBLICA DE AGENDAMENTO (cliente)
   ===================================================================== */
body.page-public .kroni-state{ color:inherit; opacity:.85; }