@import "tailwindcss";

@theme {
  --color-background: var(--ks-color-bg-body);
  --color-foreground: var(--ks-color-text-primary);
}

/* ============================================================
   1 · TOKENS
   Violeta domina. A paleta multi-hue codifica categoria e dado.
   Bordas quase não existem: quem separa é a sombra e o raio.
   ============================================================ */

:root {
  color-scheme: light;

  /* Marca */
  --ks-brand-950: #221056;
  --ks-brand-900: #2e1478;
  --ks-brand-850: #3a1a90;
  --ks-brand-800: #45209f;
  --ks-brand-700: #5228bd;
  --ks-brand-600: #5f31d6;
  --ks-brand-500: #7346e8;
  --ks-brand-400: #8f6bf1;
  --ks-brand-300: #b39af6;
  --ks-brand-200: #d3c4fa;
  --ks-brand-100: #e8e0fd;
  --ks-brand-50: #f4f0fe;

  /* Acentos — dados, categorias, tiles */
  --ks-sky: #2f9bf0;
  --ks-sky-soft: #e4f2fe;
  --ks-emerald: #14c78d;
  --ks-emerald-soft: #e0f8f1;
  --ks-lime: #79cc45;
  --ks-lime-soft: #edf8e3;
  --ks-amber: #f79c2d;
  --ks-amber-soft: #fef1e1;
  --ks-rose: #f0526e;
  --ks-rose-soft: #fee9ec;
  --ks-pink: #e93ebd;
  --ks-pink-soft: #fde6f7;
  --ks-teal: #15c5c5;
  --ks-teal-soft: #e0f8f8;

  /* Neutros levemente violáceos */
  --ks-n-0: #ffffff;
  --ks-n-25: #fbfbfe;
  --ks-n-50: #f5f5fb;
  --ks-n-100: #eeeef7;
  --ks-n-150: #e6e6f2;
  --ks-n-200: #d9d9ea;
  --ks-n-300: #bcbcd4;
  --ks-n-400: #9494b0;
  --ks-n-500: #6f6f8e;
  --ks-n-600: #565672;
  --ks-n-700: #3f3f58;
  --ks-n-800: #2a2a3e;
  --ks-n-900: #1a1a2b;

  /* Superfícies */
  --ks-color-bg-body: #f4f5fb;
  --ks-color-bg-elevated: var(--ks-n-0);
  --ks-color-bg-soft: var(--ks-n-100);
  --ks-color-bg-inset: var(--ks-n-50);
  --ks-color-bg-hover: rgba(95, 49, 214, 0.06);

  --ks-color-border-subtle: var(--ks-n-150);
  --ks-color-border-strong: var(--ks-n-200);

  /* Texto */
  --ks-color-text-primary: var(--ks-n-900);
  --ks-color-text-secondary: var(--ks-n-600);
  --ks-color-text-muted: var(--ks-n-500);
  --ks-color-text-soft: var(--ks-n-400);

  /* Aliases usados pelo código já existente */
  --ks-color-primary: var(--ks-brand-600);
  --ks-color-primary-strong: var(--ks-brand-700);
  --ks-color-primary-soft: var(--ks-brand-50);
  --ks-color-primary-soft-strong: var(--ks-brand-100);
  --ks-color-brand-dark: var(--ks-brand-800);

  --ks-color-status-success: #0e9e70;
  --ks-color-status-success-soft: var(--ks-emerald-soft);
  --ks-color-status-warning: #b9700f;
  --ks-color-status-warning-soft: var(--ks-amber-soft);
  --ks-color-status-danger: #d63a55;
  --ks-color-status-danger-soft: var(--ks-rose-soft);
  --ks-color-status-info: #1b7fce;
  --ks-color-status-info-soft: var(--ks-sky-soft);

  /* Cores de série dos gráficos (identidade: aparelho, tipo). Ordem fixa,
     conferida no validador de paleta: tons distintos para daltonismo e com
     o fundo claro. O âmbar fica abaixo de 3:1 no branco, então todo gráfico
     que o usa leva legenda com rótulo e número. */
  --ks-grafico-1: #7346e8;
  --ks-grafico-2: #1a9fd0;
  --ks-grafico-3: #f79c2d;
  --ks-grafico-4: #ec4f7c;
  --ks-grafico-outros: #9494b0;

  /* Raios generosos */
  --ks-radius-xs: 10px;
  --ks-radius-sm: 12px;
  --ks-radius-md: 16px;
  --ks-radius-lg: 20px;
  --ks-radius-xl: 26px;
  --ks-radius-full: 999px;

  /* Sombras difusas, tingidas de violeta */
  --ks-shadow-subtle: 0 2px 8px rgba(45, 30, 105, 0.05);
  --ks-shadow-soft: 0 6px 20px rgba(45, 30, 105, 0.06);
  --ks-shadow-raised: 0 10px 30px rgba(45, 30, 105, 0.09);
  --ks-shadow-overlay: 0 24px 60px -12px rgba(45, 30, 105, 0.24);
  --ks-shadow-brand: 0 10px 24px -6px rgba(95, 49, 214, 0.45);
  --ks-shadow-pill: -6px 0 24px rgba(20, 8, 60, 0.22);

  --ks-focus-ring: 0 0 0 4px rgba(95, 49, 214, 0.18);
  /* Sidebar do desktop: trilho escuro + painel branco, dois tons de roxo */
  --ks-trilho-largura: 60px;
  --ks-painel-largura: 224px;
  --ks-trilho-fundo: #2e1065;
  --ks-trilho-ativo: #7c3aed;
  --ks-topbar-height: 78px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ks-n-0: #201d3c;
  --ks-n-25: #1d1a37;
  --ks-n-50: #16142c;
  --ks-n-100: #272348;
  --ks-n-150: #322d57;
  --ks-n-200: #3d3767;
  --ks-n-300: #565080;
  --ks-n-400: #837da8;
  --ks-n-500: #a49ec4;
  --ks-n-600: #c0bbd8;
  --ks-n-700: #d8d4e9;
  --ks-n-800: #ebe8f5;
  --ks-n-900: #f7f5fd;

  --ks-brand-800: #2b2352;
  --ks-brand-700: #6b45e8;
  --ks-brand-600: #7d5bf0;
  --ks-brand-500: #9375f4;
  --ks-brand-200: rgba(147, 117, 244, 0.34);
  --ks-brand-100: rgba(147, 117, 244, 0.2);
  --ks-brand-50: rgba(147, 117, 244, 0.12);

  --ks-sky-soft: rgba(47, 155, 240, 0.16);
  --ks-emerald-soft: rgba(20, 199, 141, 0.16);
  --ks-lime-soft: rgba(121, 204, 69, 0.16);
  --ks-amber-soft: rgba(247, 156, 45, 0.16);
  --ks-rose-soft: rgba(240, 82, 110, 0.16);
  --ks-pink-soft: rgba(233, 62, 189, 0.16);
  --ks-teal-soft: rgba(21, 197, 197, 0.16);

  --ks-color-bg-body: #131128;
  --ks-color-bg-elevated: var(--ks-n-0);
  --ks-color-bg-soft: var(--ks-n-100);
  --ks-color-bg-inset: var(--ks-n-25);
  --ks-color-bg-hover: rgba(255, 255, 255, 0.07);
  --ks-trilho-fundo: #1c1141;

  --ks-color-status-success: #3fd9a4;
  --ks-color-status-warning: #f5b455;
  --ks-color-status-danger: #ff7d92;
  --ks-color-status-info: #5cb6f5;

  /* As mesmas quatro famílias, em passos próprios para o fundo escuro (não é
     a clara invertida: foi validada contra o fundo do painel escuro). */
  --ks-grafico-1: #9375f4;
  --ks-grafico-2: #1a9fbe;
  --ks-grafico-3: #bf8414;
  --ks-grafico-4: #e25382;
  --ks-grafico-outros: #837da8;

  --ks-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.35);
  --ks-shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.4);
  --ks-shadow-raised: 0 10px 30px rgba(0, 0, 0, 0.45);
  --ks-shadow-overlay: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  --ks-shadow-brand: 0 10px 24px -6px rgba(125, 91, 240, 0.5);
  --ks-shadow-pill: -6px 0 24px rgba(0, 0, 0, 0.45);

  --ks-focus-ring: 0 0 0 4px rgba(147, 117, 244, 0.3);
}

/* ============================================================
   2 · BASE
   ============================================================ */

body {
  min-height: 100vh;
  background: var(--ks-color-bg-body);
  color: var(--ks-color-text-primary);
  font-family: var(--font-ktalogu-sans), system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ks-body {
  min-height: 100vh;
}

.print-only {
  display: none !important;
}

::selection {
  background: var(--ks-brand-200);
  color: var(--ks-brand-900);
}

:where(a, button, [role="button"]):focus-visible {
  outline: none;
  box-shadow: var(--ks-focus-ring);
}

.ks-num,
.ks-stat-value,
.ks-metric-value,
.ks-table td,
[data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ============================================================
   3 · SHELL
   ============================================================ */

.ks-dashboard-shell {
  min-height: 100vh;
  display: flex;
  gap: 0;
  background: var(--ks-color-bg-body);
}

.ks-dashboard-shell-pdv {
  min-height: 100vh;
}

.ks-dashboard-sidebar {
  position: sticky;
  top: var(--ktl-system-notices-offset, 0px);
  height: calc(100vh - var(--ktl-system-notices-offset, 0px));
  display: none;
  flex-shrink: 0;
  font-family: var(--font-ktalogu-sans), system-ui, -apple-system, sans-serif;
  z-index: 40;
}

@media (min-width: 768px) {
  .ks-dashboard-sidebar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
}

/* ---------- Trilho e painel (sidebar do desktop) ----------
   Dois tons de roxo: o trilho escuro leva só o ícone de cada seção, e a
   seção onde a pessoa está acende em violeta vivo, de borda a borda. O
   painel ao lado é branco e lista os itens da seção em grupos. Recolhida,
   sobra só o trilho; clicar numa seção abre o painel de novo. */

.ks-trilho {
  position: relative;
  z-index: 2;
  width: var(--ks-trilho-largura);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 0.875rem;
  background: var(--ks-trilho-fundo);
  color: rgba(255, 255, 255, 0.62);
}

.ks-trilho-logo {
  height: var(--ks-topbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sem vão entre os blocos: o ativo e o hover encostam um no outro. O
   respiro de cima deixa o botão de recolher (na divisa com a logo) fora do
   primeiro bloco. */
.ks-trilho-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0.75rem;
}

.ks-trilho-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  transition: background 0.16s ease, color 0.16s ease;
}

.ks-trilho-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ks-trilho-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* Seção aberta no painel sem ser a da página: acesa, mas sem a cor cheia. */
.ks-trilho-item-escolhido,
.ks-trilho-item-escolhido:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.ks-trilho-item-ativo,
.ks-trilho-item-ativo:hover {
  background: var(--ks-trilho-ativo);
  color: #fff;
}

.ks-trilho-rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-top: 0.75rem;
}

.ks-trilho-item-redondo {
  width: 40px;
  height: 40px;
  border-radius: var(--ks-radius-full);
}

/* Selo do item ainda em teste (o "BETA" do KtaloguDesign), encostado no pé do ícone. */
.ks-trilho-selo {
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  padding: 1px 4px;
  border-radius: 4px;
  background: #facc15;
  color: #2b1a00;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.06em;
  box-shadow: 0 1px 3px rgba(20, 11, 43, 0.35);
  pointer-events: none;
}

.ks-trilho-conta {
  margin-top: 0.25rem;
}

.ks-trilho-conta .ks-usernav-trigger {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  background: transparent;
}

.ks-trilho-conta .ks-usernav-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Dica ao lado do ícone: o trilho não tem texto. */
.ks-trilho-dica {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(-4px, -50%);
  padding: 0.4rem 0.625rem;
  border-radius: 8px;
  background: var(--ks-color-text-primary);
  color: var(--ks-color-bg-elevated);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: var(--ks-shadow-raised);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 70;
}

/* Só onde há mouse: no toque, a dica ficaria presa depois do dedo. */
@media (hover: hover) {
  .ks-trilho-item:hover .ks-trilho-dica,
  .ks-trilho-item:focus-visible .ks-trilho-dica {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.ks-painel {
  position: relative;
  z-index: 1;
  width: var(--ks-painel-largura);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ks-color-bg-elevated);
  box-shadow: 1px 0 0 var(--ks-color-border-subtle);
  transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s;
}

.ks-painel-fechado {
  width: 0;
  visibility: hidden;
  transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.22s;
}

.ks-painel-cabecalho {
  height: var(--ks-topbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-width: var(--ks-painel-largura);
  padding: 0 1.25rem 0 1.125rem;
}

.ks-painel-titulo {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ks-color-text-primary);
  white-space: nowrap;
}

/* O botão de recolher mora na borda do painel, meio para fora; com o painel
   recolhido, ele vai para a borda do trilho. */
.ks-painel-recolher {
  position: absolute;
  z-index: 3;
  top: calc(var(--ks-topbar-height) / 2 - 11px);
  left: calc(var(--ks-trilho-largura) + var(--ks-painel-largura) - 11px);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--ks-radius-full);
  background: var(--ks-color-bg-elevated);
  color: var(--ks-color-text-muted);
  box-shadow: 0 0 0 1px var(--ks-color-border-subtle), var(--ks-shadow-subtle);
  transition: left 0.22s cubic-bezier(0.32, 0.72, 0, 1), top 0.22s cubic-bezier(0.32, 0.72, 0, 1), color 0.14s ease;
}

.ks-painel-recolher:hover {
  color: var(--ks-brand-600);
}

/* Recolhido, o botão desce para a divisa entre a logo e os ícones: na
   altura do título ele cobria a cauda da logo. */
.ks-dashboard-sidebar-collapsed .ks-painel-recolher {
  top: calc(var(--ks-topbar-height) - 11px);
  left: calc(var(--ks-trilho-largura) - 11px);
}

.ks-painel-nav {
  flex: 1;
  min-width: var(--ks-painel-largura);
  display: flex;
  flex-direction: column;
  padding: 0.125rem 0 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ks-painel-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.ks-painel-grupo {
  display: flex;
  flex-direction: column;
}

/* Linha de primeiro nível: cabeçalho de grupo ou item direto. */
.ks-painel-linha {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 38px;
  padding: 0 0.75rem 0 1.125rem;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ks-color-text-primary);
  transition: background 0.14s ease, color 0.14s ease;
}

.ks-painel-linha:hover {
  background: var(--ks-color-bg-hover);
}

.ks-painel-linha-icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ks-color-text-muted);
}

.ks-painel-rotulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-painel-seta {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  color: var(--ks-color-text-soft);
  transition: transform 0.16s ease;
}

.ks-painel-seta-aberta {
  transform: rotate(180deg);
}

.ks-painel-filhos {
  display: flex;
  flex-direction: column;
  padding: 1px 0 6px;
}

.ks-painel-sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 34px;
  padding: 0 0.875rem 0 2.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--ks-color-text-secondary);
  transition: background 0.14s ease, color 0.14s ease;
}

.ks-painel-sub:hover {
  background: var(--ks-color-bg-hover);
  color: var(--ks-color-text-primary);
}

/* Onde a pessoa está: lilás, texto violeta e um fio na borda direita. */
.ks-painel-linha-ativa,
.ks-painel-linha-ativa:hover,
.ks-painel-sub-ativa,
.ks-painel-sub-ativa:hover {
  background: var(--ks-brand-100);
  color: var(--ks-brand-700);
}

.ks-painel-sub-ativa,
.ks-painel-sub-ativa:hover {
  font-weight: 600;
}

.ks-painel-linha-ativa .ks-painel-linha-icone {
  color: var(--ks-brand-600);
}

.ks-painel-linha-ativa::after,
.ks-painel-sub-ativa::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: var(--ks-brand-600);
}

/* O selo "Novo" no painel: menor, e o rótulo tem prioridade sobre ele. */
.ks-painel-linha .ks-nav-item-pill,
.ks-painel-sub .ks-nav-item-pill {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.1rem 0.35rem;
  font-size: 0.5625rem;
  letter-spacing: 0.02em;
}

.ks-painel-linha .ks-painel-rotulo,
.ks-painel-sub .ks-painel-rotulo {
  flex: 1 1 auto;
}

.ks-painel-linha .ks-nav-item-pill + .ks-painel-seta {
  margin-left: 0.5rem;
}

/* Menu do celular: a mesma dupla trilho + painel, numa gaveta. O corte por
   largura mora aqui porque as regras .ks-* vencem o `md:hidden`. */
.ks-gaveta-celular {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  width: calc(var(--ks-trilho-largura) + var(--ks-painel-largura));
  max-width: calc(100vw - 44px);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--ks-color-bg-elevated);
  box-shadow: var(--ks-shadow-overlay);
}

@media (min-width: 768px) {
  .ks-gaveta-celular {
    display: none;
  }
}

.ks-gaveta-celular .ks-painel {
  flex: 1;
  width: auto;
  min-width: 0;
  box-shadow: none;
}

.ks-gaveta-celular .ks-painel-cabecalho,
.ks-gaveta-celular .ks-painel-nav {
  min-width: 0;
}

.ks-gaveta-celular .ks-painel-cabecalho {
  padding-right: 0.75rem;
}

.ks-painel-fechar {
  margin-left: auto;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--ks-radius-full);
  background: var(--ks-color-bg-soft);
  color: var(--ks-color-text-muted);
  transition: background 0.14s ease, color 0.14s ease;
}

.ks-painel-fechar:hover {
  background: var(--ks-brand-100);
  color: var(--ks-brand-700);
}

.ks-kanban-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.5rem;
  overscroll-behavior-x: contain;
}

.ks-kanban-scroll::-webkit-scrollbar {
  height: 0;
  width: 0;
}

/* ---------- Selo "Novo" e gatilho da conta ---------- */

.ks-nav-item-pill {
  margin-left: auto;
  border-radius: var(--ks-radius-full);
  padding: 0.1rem 0.45rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--ks-emerald);
  color: #fff;
}

/* Gatilho do menu de conta, sobre o trilho escuro */
.ks-usernav-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.4375rem;
  border-radius: var(--ks-radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  transition: background 0.16s ease;
}

.ks-usernav-trigger:hover {
  background: rgba(255, 255, 255, 0.18);
}

.ks-usernav-trigger:focus {
  outline: none;
}

/* ---------- Área principal ---------- */

.ks-dashboard-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ks-dashboard-main-pdv {
  min-height: 100vh;
}

/* O JSX marca esta barra como `hidden md:flex`, mas as classes .ks-* vencem as
   utilities do Tailwind: o `display: flex` daqui anulava o `hidden` e a barra
   do desktop continuava renderizada no celular, escondida atras do header roxo.
   Ela ocupava 78px de altura a toa e — pior — duplicava o sino de notificacoes,
   fazendo o painel abrir duas vezes, um sob o outro.
   Por isso o corte por largura mora aqui, onde nada o sobrescreve. */
.ks-dashboard-topbar {
  display: none;
}

@media (min-width: 768px) {
  .ks-dashboard-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: var(--ks-topbar-height);
    padding: 0.75rem 1.25rem;
    background: color-mix(in srgb, var(--ks-color-bg-body) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

@media (min-width: 1024px) {
  .ks-dashboard-topbar {
    padding-inline: 2rem;
  }
}

.ks-dashboard-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.ks-topbar-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ks-topbar-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ks-color-text-soft);
  white-space: nowrap;
}

.ks-topbar-sep {
  color: var(--ks-n-300);
}

.ks-topbar-title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ks-color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks-dashboard-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
}

/* Busca em pílula */
.ks-search-pill {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  height: 46px;
  padding: 0 0.5rem 0 1.125rem;
  border-radius: var(--ks-radius-full);
  background: var(--ks-color-bg-elevated);
  box-shadow: var(--ks-shadow-subtle);
  transition: box-shadow 0.16s ease;
}

.ks-search-pill:focus-within {
  box-shadow: var(--ks-focus-ring);
}

.ks-search-pill input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ks-color-text-primary);
}

.ks-search-pill input::placeholder {
  color: var(--ks-color-text-soft);
}

.ks-search-pill-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--ks-radius-full);
  background: var(--ks-color-bg-soft);
  color: var(--ks-color-text-muted);
  transition: background 0.16s ease, color 0.16s ease;
}

.ks-search-pill-go:hover {
  background: var(--ks-brand-600);
  color: #fff;
}

.ks-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 44px;
  flex-shrink: 0;
  border-radius: var(--ks-radius-full);
  color: var(--ks-brand-700);
  background: var(--ks-color-bg-elevated);
  border: none;
  box-shadow: var(--ks-shadow-subtle);
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.ks-icon-button:hover {
  background: var(--ks-brand-600);
  color: #fff;
  transform: translateY(-1px);
}

.ks-icon-button-sm {
  height: 32px;
  width: 32px;
  box-shadow: none;
  background: transparent;
  color: var(--ks-color-text-soft);
}

.ks-icon-button-sm:hover {
  background: var(--ks-color-bg-hover);
  color: var(--ks-brand-600);
  transform: none;
}

.ks-icon-button-plain {
  background: transparent;
  box-shadow: none;
  color: var(--ks-color-text-secondary);
}

.ks-icon-button-plain:hover {
  background: var(--ks-color-bg-hover);
  color: var(--ks-brand-700);
  transform: none;
}

.ks-icon-button-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: var(--ks-radius-full);
  background: var(--ks-brand-600);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
  border: 2px solid var(--ks-color-bg-body);
  font-variant-numeric: tabular-nums;
}

/* Bloco de usuário no topo */
.ks-topbar-user {
  display: none;
  align-items: center;
  gap: 0.625rem;
  padding-left: 0.5rem;
}

@media (min-width: 900px) {
  .ks-topbar-user {
    display: flex;
  }
}

.ks-topbar-user-name {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ks-color-text-primary);
}

.ks-topbar-user-role {
  font-size: 0.6875rem;
  color: var(--ks-color-text-soft);
}

.ks-dashboard-content {
  flex: 1;
  padding: 0.5rem 1.25rem 4rem;
}

@media (min-width: 768px) {
  .ks-dashboard-content {
    padding-inline: 2rem;
  }
}

.ks-dashboard-content-tight {
  padding: 0.5rem 0.875rem 2rem;
}

@media (min-width: 768px) {
  .ks-dashboard-content-tight {
    padding-inline: 1.25rem;
  }
}

/* ---------- Paleta da agenda ----------
   A agenda e o relatorio foram desenhados com uma escala propria, mais clara
   que a do resto do painel, para a grade nao competir com os compromissos.
   Fixar os hex direto nas classes funcionava no tema claro e apagava a tela
   inteira no escuro — cartao branco sobre fundo branco. Aqui cada tom ganha
   os dois valores, e os componentes passam a pedir o token em vez da cor. */
:root {
  --ag-surface: #ffffff;
  --ag-surface-2: #f8f8fa;
  --ag-canvas: #f6f7fa;
  --ag-border: #e7e9ef;
  --ag-border-strong: #e4e6ec;
  --ag-line-h: #f1f2f5;
  --ag-line-v: #eceef2;
  --ag-text: #171b2c;
  --ag-text-2: #3d4258;
  --ag-text-3: #777e90;
  --ag-text-4: #8a90a0;
  --ag-text-5: #9aa0b4;
  --ag-accent: #6c3cf0;
  --ag-accent-text: #5e35da;
  --ag-accent-soft: rgba(108, 60, 240, 0.06);
  --ag-accent-line: rgba(108, 60, 240, 0.28);
  --ag-hoje: rgba(108, 60, 240, 0.06);
  --ag-hoje-col: rgba(108, 60, 240, 0.035);
  --ag-sombra-1: 0 1px 2px rgba(16, 24, 40, 0.02);
  --ag-sombra-2: 0 1px 3px rgba(18, 24, 40, 0.04);
  --ag-sombra-3: 0 3px 10px rgba(18, 24, 40, 0.045);
  --ag-sombra-4: 0 7px 18px rgba(18, 24, 40, 0.08);
  --ag-sombra-alta: 0 12px 32px rgba(16, 24, 40, 0.14);
  /* Fita que cobre a linha da grade atras do rotulo de hora e da coluna fixa. */
  --ag-fita: #ffffff;
}

:root[data-theme="dark"] {
  --ag-surface: #201d3c;
  --ag-surface-2: #272348;
  --ag-canvas: #131128;
  --ag-border: #322d57;
  --ag-border-strong: #3d3767;
  --ag-line-h: #2a2650;
  --ag-line-v: #2f2a55;
  --ag-text: #f7f5fd;
  --ag-text-2: #d8d4e9;
  --ag-text-3: #a49ec4;
  --ag-text-4: #948eb8;
  --ag-text-5: #837da8;
  --ag-accent: #9375f4;
  --ag-accent-text: #b7a2f8;
  --ag-accent-soft: rgba(147, 117, 244, 0.14);
  --ag-accent-line: rgba(147, 117, 244, 0.45);
  --ag-hoje: rgba(147, 117, 244, 0.16);
  --ag-hoje-col: rgba(147, 117, 244, 0.08);
  --ag-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ag-sombra-2: 0 1px 3px rgba(0, 0, 0, 0.35);
  --ag-sombra-3: 0 3px 10px rgba(0, 0, 0, 0.4);
  --ag-sombra-4: 0 7px 18px rgba(0, 0, 0, 0.5);
  --ag-sombra-alta: 0 12px 32px rgba(0, 0, 0, 0.55);
  --ag-fita: #201d3c;
}

/* Barra de tempo do aviso da agenda. Encolhe da esquerda para a direita ao
   longo da duracao, entao o aviso nao some de surpresa no meio da leitura. */
@keyframes ks-aviso-tempo {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Quem pediu menos movimento nao ganha uma barra correndo na tela: a cor
   continua marcando o tipo do aviso, parada. */
@media (prefers-reduced-motion: reduce) {
  [style*="ks-aviso-tempo"] {
    animation: none !important;
  }
}

.ks-page {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

.ks-page-wide {
  max-width: 1480px;
}

.ks-page-full {
  max-width: none;
}

@media (min-width: 768px) {
  .ks-dashboard-content-pdv {
    padding: 0.5rem 1rem 1rem;
  }

  .ks-page-pdv {
    max-width: none;
  }
}

/* PDV em tela cheia sem rolagem: so a partir de 1024px, onde as tres colunas
   cabem lado a lado. Abaixo disso a pagina rola normalmente, senao o carrinho
   fica empilhado fora da area visivel. */
@media (min-width: 1024px) {
  .ks-dashboard-shell-pdv {
    height: 100vh;
    overflow: hidden;
  }

  .ks-dashboard-content-pdv {
    height: 100vh;
    overflow: hidden;
  }

  .ks-page-pdv {
    height: 100%;
    overflow: hidden;
  }
}

/* ============================================================
   4 · CABEÇALHO DE PÁGINA E SEÇÕES
   ============================================================ */

.ks-page-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .ks-page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.ks-page-header-main {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.ks-page-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-brand-500);
}

.ks-page-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ks-color-text-primary);
}

.ks-page-subtitle {
  font-size: 0.9375rem;
  color: var(--ks-color-text-muted);
  max-width: 62ch;
}

.ks-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: flex-start;
  flex-shrink: 0;
  min-width: 0;
}

/* Rede de seguranca do cabecalho.
   `.ks-page-actions` ja quebra linha, mas quase toda pagina agrupa os botoes
   num <div className="flex items-center gap-2"> proprio — e esse div nao
   quebra. O resultado e uma faixa rigida mais larga que a tela, que empurra a
   pagina inteira para o lado no celular (era o caso de Orcamentos: 535px numa
   viewport de 375px).
   Forcar a quebra nos filhos diretos resolve onde ja acontece e impede que
   volte a acontecer na proxima pagina que repetir o padrao. */
.ks-page-actions > * {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 768px) {
  .ks-page-actions {
    justify-content: flex-end;
  }
}

.ks-section-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ks-color-text-primary);
}

.ks-section-hint {
  font-size: 0.8125rem;
  color: var(--ks-color-text-muted);
}

/* ============================================================
   5 · BOTÕES
   ============================================================ */

.ks-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.25rem;
  border-radius: var(--ks-radius-full);
  border: none;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.011em;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease,
    transform 0.16s ease;
  white-space: nowrap;
}

.ks-button-sm {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  gap: 0.375rem;
}

.ks-button-lg {
  padding: 0.875rem 1.625rem;
  font-size: 0.9375rem;
}

.ks-button-icon {
  padding: 0;
  width: 44px;
  height: 44px;
}

.ks-button-primary {
  background: var(--ks-brand-600);
  color: #ffffff;
  box-shadow: var(--ks-shadow-brand);
}

.ks-button-primary:hover {
  background: var(--ks-brand-700);
  transform: translateY(-1px);
}

.ks-button-primary:disabled {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
}

.ks-button-secondary {
  background: var(--ks-color-bg-elevated);
  color: var(--ks-color-text-primary);
  box-shadow: var(--ks-shadow-subtle);
}

.ks-button-secondary:hover {
  background: var(--ks-brand-50);
  color: var(--ks-brand-700);
  transform: translateY(-1px);
}

.ks-button-soft {
  background: var(--ks-brand-50);
  color: var(--ks-brand-700);
  box-shadow: none;
}

.ks-button-soft:hover {
  background: var(--ks-brand-100);
}

.ks-button-ghost {
  background: transparent;
  color: var(--ks-color-text-muted);
  box-shadow: none;
}

.ks-button-ghost:hover {
  background: var(--ks-color-bg-hover);
  color: var(--ks-brand-700);
}

/* ============================================================
   6 · CAMPOS
   ============================================================ */

.ks-input-shell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ks-input-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ks-color-text-secondary);
}

.ks-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1rem;
  border-radius: var(--ks-radius-full);
  border: 1.5px solid transparent;
  background: var(--ks-color-bg-soft);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.ks-input-wrapper:focus-within {
  background: var(--ks-color-bg-elevated);
  border-color: var(--ks-brand-400);
  box-shadow: var(--ks-focus-ring);
}

.ks-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.875rem;
  padding-block: 0.6875rem;
  color: var(--ks-color-text-primary);
}

.ks-input::placeholder {
  color: var(--ks-color-text-soft);
}

/* Campo avulso, com o contorno embutido: para telas que usam o input solto,
   sem o par .ks-input-wrapper. O .ks-input original é transparente porque o
   wrapper e quem desenha a borda — solto, ele fica invisivel. */
.ks-field {
  width: 100%;
  border-radius: 0.75rem;
  border: 1.5px solid var(--ks-color-border-subtle);
  background: var(--ks-color-bg-elevated);
  padding: 0.5625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--ks-color-text-primary);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ks-field:focus {
  border-color: var(--ks-brand-400);
  box-shadow: var(--ks-focus-ring);
}

.ks-field::placeholder {
  color: var(--ks-color-text-soft);
}

/* ============================================================
   7 · CHIPS
   ============================================================ */

.ks-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--ks-radius-full);
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  background: var(--ks-brand-50);
  color: var(--ks-brand-700);
  border: none;
}

.ks-chip-soft {
  background: var(--ks-brand-50);
  color: var(--ks-brand-700);
}

.ks-chip-solid {
  background: var(--ks-brand-600);
  color: #fff;
}

.ks-chip-neutral {
  background: var(--ks-color-bg-soft);
  color: var(--ks-color-text-muted);
}

.ks-chip-success {
  background: var(--ks-color-status-success-soft);
  color: var(--ks-color-status-success);
}

.ks-chip-warning {
  background: var(--ks-color-status-warning-soft);
  color: var(--ks-color-status-warning);
}

.ks-chip-danger {
  background: var(--ks-color-status-danger-soft);
  color: var(--ks-color-status-danger);
}

.ks-chip-info {
  background: var(--ks-color-status-info-soft);
  color: var(--ks-color-status-info);
}

/* ============================================================
   8 · SUPERFÍCIES
   ============================================================ */

.ks-surface,
.ks-surface-soft,
.ks-card {
  border-radius: var(--ks-radius-lg);
  background: var(--ks-color-bg-elevated);
  border: none;
  box-shadow: var(--ks-shadow-soft);
}

.ks-card-hover {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ks-card-hover:hover {
  box-shadow: var(--ks-shadow-raised);
  transform: translateY(-3px);
}

.ks-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem 0;
}

.ks-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.ks-divider {
  height: 1px;
  background: var(--ks-color-border-subtle);
  border: none;
}

/* ---------- Cartões de métrica saturados ---------- */

.ks-stat {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.375rem 1.5rem;
  border-radius: var(--ks-radius-lg);
  color: #fff;
  isolation: isolate;
}

/* brilho diagonal sutil, como nas referências */
.ks-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}

.ks-stat-violet {
  background: linear-gradient(135deg, #5f31d6, #7c50ee);
  box-shadow: 0 12px 28px -10px rgba(95, 49, 214, 0.6);
}

.ks-stat-sky {
  background: linear-gradient(135deg, #2f9bf0, #56b8fa);
  box-shadow: 0 12px 28px -10px rgba(47, 155, 240, 0.55);
}

.ks-stat-emerald {
  background: linear-gradient(135deg, #14c78d, #2ad9a2);
  box-shadow: 0 12px 28px -10px rgba(20, 199, 141, 0.55);
}

.ks-stat-lime {
  background: linear-gradient(135deg, #79cc45, #93da5c);
  box-shadow: 0 12px 28px -10px rgba(121, 204, 69, 0.55);
}

.ks-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: var(--ks-radius-md);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.ks-stat-body {
  min-width: 0;
  flex: 1;
}

.ks-stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.125rem;
}

.ks-stat-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: #fff;
}

.ks-stat-foot {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
}

.ks-stat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--ks-radius-full);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background 0.16s ease;
}

.ks-stat-action:hover {
  background: rgba(255, 255, 255, 0.34);
}

/* ---------- Tiles coloridos (ícones de categoria) ---------- */

.ks-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--ks-radius-sm);
  color: #fff;
}

.ks-tile-sm {
  width: 36px;
  height: 36px;
  border-radius: var(--ks-radius-xs);
}

.ks-tile-violet { background: var(--ks-brand-600); }
.ks-tile-sky { background: var(--ks-sky); }
.ks-tile-emerald { background: var(--ks-emerald); }
.ks-tile-lime { background: var(--ks-lime); }
.ks-tile-amber { background: var(--ks-amber); }
.ks-tile-rose { background: var(--ks-rose); }
.ks-tile-pink { background: var(--ks-pink); }
.ks-tile-teal { background: var(--ks-teal); }

.ks-tile-soft { color: inherit; }
.ks-tile-soft.ks-tile-violet { background: var(--ks-brand-50); color: var(--ks-brand-600); }
.ks-tile-soft.ks-tile-sky { background: var(--ks-sky-soft); color: var(--ks-sky); }
.ks-tile-soft.ks-tile-emerald { background: var(--ks-emerald-soft); color: var(--ks-emerald); }
.ks-tile-soft.ks-tile-lime { background: var(--ks-lime-soft); color: #5da62f; }
.ks-tile-soft.ks-tile-amber { background: var(--ks-amber-soft); color: var(--ks-amber); }
.ks-tile-soft.ks-tile-rose { background: var(--ks-rose-soft); color: var(--ks-rose); }
.ks-tile-soft.ks-tile-pink { background: var(--ks-pink-soft); color: var(--ks-pink); }
.ks-tile-soft.ks-tile-teal { background: var(--ks-teal-soft); color: var(--ks-teal); }

/* ---------- Métrica em superfície clara ---------- */

.ks-metric {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.375rem 1.5rem;
}

.ks-metric-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ks-color-text-muted);
}

.ks-metric-value {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--ks-color-text-primary);
}

.ks-metric-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--ks-color-text-soft);
}

.ks-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ks-delta-up { color: var(--ks-color-status-success); }
.ks-delta-down { color: var(--ks-color-status-danger); }
.ks-delta-flat { color: var(--ks-color-text-soft); }

/* ============================================================
   8.5 · TELA DE ESPERA DA MARCA
   ============================================================ */

.ks-boot {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: var(--ks-color-bg-body);
  overflow: hidden;
}

.ks-boot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 300px at 50% 45%, var(--ks-brand-50), transparent 72%);
  pointer-events: none;
}

.ks-boot-stage {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}

.ks-boot-glow {
  position: absolute;
  inset: -16%;
  border-radius: var(--ks-radius-full);
  background: radial-gradient(circle, var(--ks-brand-200), transparent 68%);
  filter: blur(12px);
  animation: ks-boot-breathe 2.6s ease-in-out infinite;
}

/* Anel: um cone de cor mascarado numa faixa fina. */
.ks-boot-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--ks-radius-full);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--ks-brand-500) 130deg,
    var(--ks-teal) 215deg,
    var(--ks-emerald) 275deg,
    transparent 310deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: ks-boot-spin 1.6s linear infinite;
}

.ks-boot-plate {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: var(--ks-radius-full);
  background: var(--ks-color-bg-elevated);
  box-shadow: var(--ks-shadow-raised);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Brilho que varre a placa depois que o traçado fecha. */
.ks-boot-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 36%,
    rgba(255, 255, 255, 0.72) 50%,
    transparent 64%
  );
  transform: translateX(-130%);
  animation: ks-boot-sheen 2.8s ease-in-out 1.4s infinite;
}

.ks-boot-mark {
  width: 46px;
  height: auto;
  overflow: visible;
}

.ks-boot-mark path,
.ks-boot-mark circle {
  fill: var(--ks-brand-600);
  stroke: var(--ks-brand-600);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
  animation: ks-boot-draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.ks-boot-mark circle {
  animation-delay: 0.2s;
}

.ks-boot-message {
  position: relative;
  margin-top: -0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.011em;
  color: var(--ks-color-text-muted);
  animation: ks-boot-fade 0.6s ease 0.35s both;
}

.ks-boot-wordmark {
  position: relative;
  height: 21px;
  width: auto;
  opacity: 0;
  animation: ks-boot-fade 0.7s ease 1.15s forwards;
}

.ks-boot-track {
  position: relative;
  width: 168px;
  height: 4px;
  border-radius: var(--ks-radius-full);
  background: var(--ks-brand-100);
  overflow: hidden;
}

.ks-boot-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  border-radius: var(--ks-radius-full);
  background: linear-gradient(90deg, var(--ks-brand-600), var(--ks-teal));
  animation: ks-boot-slide 1.3s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
}

@keyframes ks-boot-draw {
  0% {
    stroke-dashoffset: 1;
    fill-opacity: 0;
  }
  68% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

@keyframes ks-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ks-boot-breathe {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

@keyframes ks-boot-sheen {
  0% {
    transform: translateX(-130%);
  }
  55%,
  100% {
    transform: translateX(130%);
  }
}

@keyframes ks-boot-slide {
  0% {
    left: -45%;
  }
  100% {
    left: 100%;
  }
}

@keyframes ks-boot-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

:root[data-theme="dark"] .ks-boot-plate::after {
  background: linear-gradient(
    115deg,
    transparent 36%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 64%
  );
}

@media (prefers-reduced-motion: reduce) {
  .ks-boot-ring,
  .ks-boot-glow,
  .ks-boot-plate::after,
  .ks-boot-bar,
  .ks-boot-message,
  .ks-boot-wordmark {
    animation: none;
    opacity: 1;
  }

  .ks-boot-mark path,
  .ks-boot-mark circle {
    animation: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }

  .ks-boot-bar {
    left: 0;
    width: 100%;
    opacity: 0.5;
  }
}

/* ============================================================
   9 · TABELAS
   ============================================================ */

.ks-table-shell {
  border-radius: var(--ks-radius-lg);
  border: none;
  background: var(--ks-color-bg-elevated);
  overflow: hidden;
  box-shadow: var(--ks-shadow-soft);
}

.ks-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

.ks-table thead tr {
  background: var(--ks-color-bg-inset);
}

.ks-table th {
  text-align: left;
  padding: 0.875rem 1.25rem;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ks-color-text-soft);
  border-bottom: none;
  white-space: nowrap;
}

.ks-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ks-color-border-subtle);
  color: var(--ks-color-text-secondary);
  font-weight: 500;
}

.ks-table tbody tr:last-child td {
  border-bottom: none;
}

.ks-table tbody tr:hover {
  background: var(--ks-brand-50);
}

/* ============================================================
   10 · ESTADO VAZIO
   ============================================================ */

.ks-empty-state {
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--ks-color-text-muted);
}

.ks-empty-state-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ks-color-text-primary);
  margin-top: 0.75rem;
}

.ks-empty-state-subtitle {
  margin-top: 0.3rem;
  font-size: 0.875rem;
  color: var(--ks-color-text-muted);
}

/* ============================================================
   11 · COMPATIBILIDADE TEMA ESCURO
   Telas ainda não migradas usam classes Tailwind cruas.
   ============================================================ */

:root[data-theme="dark"] body {
  background: var(--ks-color-bg-body);
  color: var(--ks-color-text-primary);
}

:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] [class*="bg-white"] {
  background-color: var(--ks-color-bg-elevated) !important;
}

:root[data-theme="dark"] [class*="bg-white/"] {
  background-color: color-mix(in srgb, var(--ks-color-bg-elevated) 92%, transparent) !important;
}

:root[data-theme="dark"] [class*="bg-zinc-50"],
:root[data-theme="dark"] [class*="bg-zinc-100"],
:root[data-theme="dark"] [class*="bg-zinc-200"],
:root[data-theme="dark"] [class*="bg-slate-"],
:root[data-theme="dark"] [class*="bg-gray-"],
:root[data-theme="dark"] [class*="bg-neutral-"],
:root[data-theme="dark"] [class*="bg-stone-"] {
  background-color: var(--ks-color-bg-soft) !important;
}

:root[data-theme="dark"] .bg-zinc-900 {
  background-color: var(--ks-n-100) !important;
}

:root[data-theme="dark"] .text-zinc-900,
:root[data-theme="dark"] .text-zinc-800,
:root[data-theme="dark"] .text-zinc-700,
:root[data-theme="dark"] [class*="text-slate-900"],
:root[data-theme="dark"] [class*="text-slate-800"],
:root[data-theme="dark"] [class*="text-slate-700"],
:root[data-theme="dark"] [class*="text-gray-900"],
:root[data-theme="dark"] [class*="text-gray-800"],
:root[data-theme="dark"] [class*="text-gray-700"],
:root[data-theme="dark"] [class*="text-neutral-900"],
:root[data-theme="dark"] [class*="text-neutral-800"],
:root[data-theme="dark"] [class*="text-neutral-700"],
:root[data-theme="dark"] [class*="text-stone-900"],
:root[data-theme="dark"] [class*="text-stone-800"],
:root[data-theme="dark"] [class*="text-stone-700"],
:root[data-theme="dark"] [class*="text-indigo-900"],
:root[data-theme="dark"] [class*="text-indigo-800"] {
  color: var(--ks-color-text-primary) !important;
}

:root[data-theme="dark"] .text-zinc-600,
:root[data-theme="dark"] .text-zinc-500,
:root[data-theme="dark"] .text-zinc-400,
:root[data-theme="dark"] [class*="text-slate-600"],
:root[data-theme="dark"] [class*="text-slate-500"],
:root[data-theme="dark"] [class*="text-slate-400"],
:root[data-theme="dark"] [class*="text-gray-600"],
:root[data-theme="dark"] [class*="text-gray-500"],
:root[data-theme="dark"] [class*="text-gray-400"],
:root[data-theme="dark"] [class*="text-neutral-600"],
:root[data-theme="dark"] [class*="text-neutral-500"],
:root[data-theme="dark"] [class*="text-neutral-400"],
:root[data-theme="dark"] [class*="text-stone-600"],
:root[data-theme="dark"] [class*="text-stone-500"],
:root[data-theme="dark"] [class*="text-stone-400"],
:root[data-theme="dark"] [class*="text-indigo-700"],
:root[data-theme="dark"] [class*="text-indigo-600"],
:root[data-theme="dark"] [class*="text-indigo-500"] {
  color: var(--ks-color-text-muted) !important;
}

:root[data-theme="dark"] [class*="border-zinc-"],
:root[data-theme="dark"] [class*="border-slate-"],
:root[data-theme="dark"] [class*="border-gray-"],
:root[data-theme="dark"] [class*="border-neutral-"],
:root[data-theme="dark"] [class*="border-stone-"],
:root[data-theme="dark"] [class*="border-white/"] {
  border-color: var(--ks-color-border-subtle) !important;
}

:root[data-theme="dark"] [class*="hover:bg-zinc-"]:hover,
:root[data-theme="dark"] [class*="hover:bg-slate-"]:hover,
:root[data-theme="dark"] [class*="hover:bg-gray-"]:hover,
:root[data-theme="dark"] [class*="hover:bg-neutral-"]:hover,
:root[data-theme="dark"] [class*="hover:bg-stone-"]:hover,
:root[data-theme="dark"] .hover\:bg-\[var\(--ks-color-background\)\]:hover {
  background-color: var(--ks-color-bg-hover) !important;
}

:root[data-theme="dark"] [class*="from-white"],
:root[data-theme="dark"] [class*="via-white"],
:root[data-theme="dark"] [class*="to-white"] {
  --tw-gradient-from: var(--ks-color-bg-elevated) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: var(--ks-color-bg-soft) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

:root[data-theme="dark"] .shadow-sm,
:root[data-theme="dark"] .shadow,
:root[data-theme="dark"] .shadow-md,
:root[data-theme="dark"] .shadow-lg,
:root[data-theme="dark"] .shadow-xl,
:root[data-theme="dark"] [class*="shadow-"] {
  box-shadow: var(--ks-shadow-soft) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: var(--ks-color-bg-soft) !important;
  color: var(--ks-color-text-primary) !important;
  border-color: transparent !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: var(--ks-color-text-soft) !important;
}

:root[data-theme="dark"] .ks-dashboard-content,
:root[data-theme="dark"] .ks-dashboard-main,
:root[data-theme="dark"] .ks-page {
  background: var(--ks-color-bg-body);
}

:root[data-theme="dark"] .ks-surface,
:root[data-theme="dark"] .ks-surface-soft,
:root[data-theme="dark"] .ks-card,
:root[data-theme="dark"] .ks-table-shell {
  background: var(--ks-color-bg-elevated) !important;
  border-color: transparent !important;
  box-shadow: var(--ks-shadow-soft) !important;
}

:root[data-theme="dark"] .ks-input-wrapper,
:root[data-theme="dark"] .ks-search-pill {
  background: var(--ks-color-bg-soft) !important;
}

:root[data-theme="dark"] .ks-icon-button {
  background: var(--ks-color-bg-elevated);
  color: var(--ks-brand-500);
}

:root[data-theme="dark"] .ks-icon-button-sm,
:root[data-theme="dark"] .ks-icon-button-plain {
  background: transparent;
}

:root[data-theme="dark"] .ks-table th,
:root[data-theme="dark"] .ks-table td {
  border-color: var(--ks-color-border-subtle) !important;
}

:root[data-theme="dark"] .ks-button-primary {
  background: var(--ks-brand-600);
  color: #fff;
}

:root[data-theme="dark"] .ks-button-secondary {
  background: var(--ks-color-bg-soft);
  color: var(--ks-color-text-primary);
}

:root[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"],
:root[data-theme="dark"] [style*="background-color:#fff"],
:root[data-theme="dark"] [style*="background-color: #fff"],
:root[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:white"],
:root[data-theme="dark"] [style*="background: white"] {
  background-color: var(--ks-color-bg-elevated) !important;
}

:root[data-theme="dark"] [style*="color: rgb(17, 24, 39)"],
:root[data-theme="dark"] [style*="color:#111827"],
:root[data-theme="dark"] [style*="color: #111827"] {
  color: var(--ks-color-text-primary) !important;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 6mm;
  }

  .no-print,
  .ks-dashboard-sidebar,
  .ks-dashboard-topbar,
  .ks-page-actions {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  .ks-dashboard-shell {
    display: block;
    height: auto;
    min-height: 0;
    /* A folga reservada ao comunicado do sistema (barra fixa, escondida na
       impressão) virava uma faixa vazia no topo da folha. */
    padding-top: 0 !important;
  }

  .ks-dashboard-content,
  .ks-dashboard-content-tight {
    padding: 0;
    margin: 0;
  }
  
  .ks-page,
  .ks-page-full {
    max-width: none;
    margin: 0;
    width: 100%;
  }

  body {
    background: white;
    color: black;
  }

  html,
  body,
  .print-only,
  .print-order-root,
  .print-order-page {
    background: #fff !important;
  }

  .print-order-root *,
  .print-order-root *::before,
  .print-order-root *::after {
    background-color: #fff !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Relatorio da agenda: cada bloco e uma leitura fechada (um grafico e a
     legenda dele). Deixar a quebra de pagina cair no meio separaria a rosca
     dos proprios rotulos, que e o que da sentido as fatias. */
  .relatorio-agenda section {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
  }

  .relatorio-agenda .grid {
    gap: 8px !important;
  }

  .print-order-root {
    font-size: 10.5px;
    line-height: 1.2;
  }

  .print-order-page {
    width: 198mm !important;
    max-width: 198mm !important;
    margin: 0 auto !important;
  }

  .print-order-root * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .print-order-root .rounded-xl,
  .print-order-root .rounded-lg,
  .print-order-root .rounded-2xl,
  .print-order-root .rounded-3xl {
    border-radius: 0 !important;
  }

  .print-order-root .mt-6 {
    margin-top: 0.35rem !important;
  }

  .print-order-root .mb-4 {
    margin-bottom: 0.3rem !important;
  }

  .print-order-root .p-4 {
    padding: 0.55rem !important;
  }

  .print-order-root .p-3,
  .print-order-root .px-4,
  .print-order-root .py-3 {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
  }

  .print-order-root .text-3xl {
    font-size: 1.4rem !important;
    line-height: 1.1 !important;
  }

  .print-order-root .text-xl {
    font-size: 1.05rem !important;
  }

  .print-sheet {
    border: 1px solid #d4d4d8;
    padding: 8px;
    background: #fff !important;
  }

  .print-header {
    margin-bottom: 2px;
  }

  .print-header-order .text-3xl {
    letter-spacing: -0.03em;
  }

  .print-meta-grid > div {
    min-height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .print-order-body {
    margin-top: 6px !important;
  }

  .print-order-items thead th {
    font-size: 10px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #3f3f46 !important;
  }

  .print-order-items td,
  .print-order-items th {
    border-color: #d4d4d8 !important;
  }

  .print-order-items tbody tr:nth-child(odd) td {
    background-color: #fcfcfd !important;
  }

  .print-totals-table td {
    border-color: #d4d4d8 !important;
  }

  .print-payments-title {
    letter-spacing: 0.08em !important;
  }

  .print-order-root table {
    page-break-inside: auto;
  }

  .print-order-root thead {
    display: table-header-group;
  }

  .print-order-root tfoot {
    display: table-footer-group;
  }

  .print-order-root tr,
  .print-order-root td,
  .print-order-root th,
  .print-order-root img,
  .print-avoid-break {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  .print-order-notes {
    break-before: auto;
    page-break-before: auto;
  }

  .print-order-notes,
  .print-order-notes .rounded-lg {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
}


/* ---------------------------------------------------------------------------
   Página do pedido no celular: densidade de aplicativo.
   No desktop o respiro ajuda a ler; na tela de 375 px ele vira bagunça. Estas
   regras apertam paddings, gaps e tamanhos só dentro de `.ks-pedido` e só até
   639 px, sem mexer na estrutura nem esconder nada. Ficam fora de @layer de
   propósito: vencem as utilities do Tailwind.
   --------------------------------------------------------------------------- */
@media (max-width: 639.98px) {
  .ks-pedido .px-4 { padding-left: 0.75rem; padding-right: 0.75rem; }
  .ks-pedido .px-5, .ks-pedido .px-6 { padding-left: 0.875rem; padding-right: 0.875rem; }
  .ks-pedido .p-4 { padding: 0.75rem; }
  .ks-pedido .p-5, .ks-pedido .p-6 { padding: 0.875rem; }
  .ks-pedido .py-6 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .ks-pedido .py-4 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .ks-pedido .py-3 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .ks-pedido .pt-8, .ks-pedido .pt-6 { padding-top: 1rem; }
  .ks-pedido .pt-4 { padding-top: 0.625rem; }
  .ks-pedido .pb-6 { padding-bottom: 0.75rem; }
  .ks-pedido .pb-20 { padding-bottom: 3rem; }
  .ks-pedido .mt-8 { margin-top: 1rem; }
  .ks-pedido .mt-6 { margin-top: 0.75rem; }
  .ks-pedido .mt-4 { margin-top: 0.625rem; }
  .ks-pedido .mb-3 { margin-bottom: 0.5rem; }
  .ks-pedido .gap-6 { gap: 0.75rem; }
  .ks-pedido .gap-5 { gap: 0.75rem; }
  .ks-pedido .gap-4 { gap: 0.625rem; }
  .ks-pedido .space-y-6 > :not(:last-child),
  .ks-pedido .space-y-5 > :not(:last-child) { margin-bottom: 0.75rem; }
  .ks-pedido .space-y-4 > :not(:last-child) { margin-bottom: 0.625rem; }
  .ks-pedido .space-y-6 > :not([hidden]) ~ :not([hidden]),
  .ks-pedido .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
  .ks-pedido .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem; }
  .ks-pedido .rounded-2xl { border-radius: 0.75rem; }
  .ks-pedido .text-2xl { font-size: 1.25rem; line-height: 1.6rem; }
  .ks-pedido .text-xl { font-size: 1.125rem; line-height: 1.5rem; }
  .ks-pedido .text-lg { font-size: 1rem; line-height: 1.4rem; }
  .ks-pedido .ks-chip { padding: 0.125rem 0.5rem; font-size: 0.6875rem; }
  /* Alvo de toque: pelo menos 40 px de altura, mesmo no botão pequeno. */
  .ks-pedido .ks-button-sm { min-height: 2.5rem; padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
  .ks-pedido .ks-button-icon.ks-button-sm { min-width: 2.5rem; padding: 0.5rem; }
  .ks-pedido .font-mono.text-xl { font-size: 1.05rem; }
}


/* ============================================================
   PAINEL DO CHATS

   O atendimento por cima de qualquer tela do sistema. Não é o módulo — é o
   suficiente para responder de pé e voltar ao que se estava fazendo: quem
   está esperando, o fio e o campo. O resto continua no /chats.
   ============================================================ */

.ks-chat-painel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 76;
  display: flex;
  width: min(24rem, 100vw);
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid var(--ks-color-border-subtle);
  background: var(--ks-color-bg-elevated);
  box-shadow: -18px 0 44px rgba(16, 24, 40, 0.16);
  animation: ks-chat-painel-entra 0.18s ease;
}

@keyframes ks-chat-painel-entra {
  from {
    transform: translateX(14px);
    opacity: 0;
  }
}

.ks-chat-painel-topo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--ks-color-border-subtle);
}

.ks-chat-painel-lista,
.ks-chat-painel-fio {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ks-chat-painel-fio {
  padding: 0.875rem;
  background: var(--ks-color-bg-inset);
}

.ks-chat-painel-vazio {
  padding: 2rem 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ks-color-text-soft);
}

.ks-chat-painel-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 0.875rem;
  border: 0;
  border-bottom: 1px solid var(--ks-color-border-subtle);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.ks-chat-painel-item:hover {
  background: var(--ks-color-bg-soft);
}

.ks-chat-painel-avatar {
  display: flex;
  height: 2.125rem;
  width: 2.125rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--ks-color-bg-inset);
  color: var(--ks-color-text-soft);
  font-size: 0.75rem;
  font-weight: 700;
}

.ks-chat-painel-avatar img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Os balões: os mesmos dois lados de sempre, no tamanho de um painel. */
.ks-chat-balao {
  position: relative;
  max-width: 85%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.6875rem;
  border-radius: 0.875rem;
  background: var(--ks-color-bg-elevated);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ks-color-text-primary);
}

.ks-chat-balao-meu {
  margin-left: auto;
  background: #d6f5cd;
  color: #10321a;
}

.ks-chat-balao p {
  white-space: pre-wrap;
  word-break: break-word;
}

.ks-chat-balao > span {
  display: block;
  margin-top: 0.125rem;
  text-align: right;
  font-size: 0.625rem;
  opacity: 0.65;
}

.ks-chat-interno {
  display: inline-block;
  margin-bottom: 0.125rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a5a10;
}

.ks-chat-balao:has(.ks-chat-interno) {
  background: #fff6d8;
  color: #6b4b06;
}

.ks-chat-painel-escrever {
  flex: 0 0 auto;
  padding: 0.625rem 0.875rem 0.875rem;
  border-top: 1px solid var(--ks-color-border-subtle);
}

.ks-chat-painel-escrever textarea {
  flex: 1;
  min-height: 2.375rem;
  max-height: 6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ks-color-border-subtle);
  border-radius: 0.875rem;
  background: var(--ks-color-bg-inset);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ks-color-text-primary);
  outline: none;
  resize: none;
}

.ks-chat-painel-escrever textarea:focus {
  border-color: var(--ks-color-primary);
}

.ks-chat-painel-escrever > div > button {
  display: inline-flex;
  height: 2.375rem;
  width: 2.375rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.875rem;
  background: var(--ks-color-primary);
  color: #ffffff;
  cursor: pointer;
}

.ks-chat-painel-escrever > div > button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.ks-chat-painel-dica {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--ks-color-text-soft);
}

/* ============================================================
   Popup do sistema
   ------------------------------------------------------------
   O recado que abre no meio da tela: metade imagem, metade cor.
   As cores vem do cadastro no Owner, entao aqui so mora a forma.
   ============================================================ */

.ktl-popup-fundo {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(3px);
  animation: ktl-popup-entra-fundo 160ms ease-out;
}

.ktl-popup {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Quadrado, e pequeno. E o formato do aviso de loja virtual: aparece no
     meio, se faz notar e nao toma a tela de quem esta trabalhando. Cada
     metade fica 260x520, dai o tamanho de imagem que a tela do Owner pede. */
  width: min(520px, 100%);
  aspect-ratio: 1 / 1;
  max-height: min(86vh, 560px);
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 32px 80px rgba(2, 6, 23, 0.34);
  animation: ktl-popup-entra 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sem imagem o recado nao vira meia janela vazia: ocupa tudo, e continua
   quadrado. */
.ktl-popup-so-texto {
  grid-template-columns: 1fr;
  width: min(420px, 100%);
}

.ktl-popup-imagem {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.ktl-popup-imagem picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ktl-popup-arte {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  /* `contain`, e nao `cover`: imagem de aviso costuma ter texto e logo, e
     cortar a borda para preencher come justamente o que importa. O que sobrar
     fica com a cor de fundo do popup, entao nunca aparece faixa branca. */
  object-fit: contain;
}

/* A copia desfocada atras da arte. No computador ela existe e nao aparece: a
   arte 1:2 cobre a metade inteira. Ela e para o celular, onde a faixa e
   deitada. Fica escondida ate la para nao pagar o custo do desfoque a toa. */
.ktl-popup-desfoque {
  display: none;
}

.ktl-popup-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  padding: 1.75rem 1.5rem;
}

.ktl-popup-titulo {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ktl-popup-mensagem {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  /* A cor do texto ja veio do cadastro; aqui so se tira um pouco do peso para
     o titulo continuar sendo a primeira coisa que se le. */
  opacity: 0.92;
  white-space: pre-line;
}

.ktl-popup-botao {
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.6875rem 1.25rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 120ms ease, filter 120ms ease;
}

.ktl-popup-botao:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.ktl-popup-botao:active {
  transform: translateY(0);
}

.ktl-popup-fechar {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  /* Circulo escuro semitransparente para o X funcionar tanto sobre a foto
     quanto sobre a cor, seja ela qual for. */
  background: rgba(15, 23, 42, 0.42);
  color: #ffffff;
  cursor: pointer;
  transition: background 120ms ease;
}

.ktl-popup-fechar:hover {
  background: rgba(15, 23, 42, 0.66);
}

@media (max-width: 560px) {
  /* No celular o quadrado sai de cena: em pe, duas colunas de 130px nao
     mostram nem a foto nem o texto. Vira imagem em cima e recado embaixo. */
  .ktl-popup {
    grid-template-columns: 1fr;
    /* Faixa mais alta que os 200px de antes: a arte de aviso costuma vir em
       pe, e numa faixa baixa ela encolhe ate virar selo. */
    grid-template-rows: min(300px, 38vh) auto;
    width: min(400px, 100%);
    aspect-ratio: auto;
    max-height: 88vh;
    overflow-y: auto;
  }

  /* Com arte propria de celular a faixa deixa de ter altura fixa e passa a ter
     a proporcao da arte (4:3). Assim ela preenche de ponta a ponta em qualquer
     largura de aparelho, sem sobra de cor e sem corte. */
  .ktl-popup-com-arte-movel {
    grid-template-rows: auto auto;
  }

  .ktl-popup-com-arte-movel .ktl-popup-imagem {
    aspect-ratio: 4 / 3;
  }

  /* Aqui a copia desfocada entra em cena e preenche a faixa de ponta a ponta.
     A arte continua inteira por cima, sem corte nenhum. */
  .ktl-popup-desfoque {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A escala esconde a borda lavada que o desfoque cria na margem. */
    transform: scale(1.2);
    filter: blur(22px) saturate(1.15);
  }

  .ktl-popup-texto {
    padding: 1.5rem 1.375rem 1.75rem;
  }
}

/* No celular a imagem sobe para o topo, mesmo quando o cadastro pediu a
   direita: texto embaixo de tudo e o que se le primeiro no polegar. */
@media (max-width: 560px) {
  .ktl-popup .ktl-popup-imagem {
    order: 1;
  }

  .ktl-popup .ktl-popup-texto {
    order: 2;
  }
}

@keyframes ktl-popup-entra-fundo {
  from {
    opacity: 0;
  }
}

@keyframes ktl-popup-entra {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ktl-popup-fundo,
  .ktl-popup {
    animation: none;
  }
}

/* A caixa de ciencia do popup travado. Ela vive em cima da cor escolhida no
   Owner, entao usa transparencias do branco em vez de cor propria: assim
   funciona em fundo roxo, preto ou laranja sem virar mancha. */
.ktl-popup-ciente {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.25rem;
  padding: 0.75rem 0.8125rem;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 600;
}

.ktl-popup-ciente:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* A caixa de verdade fica escondida, e nao removida: e ela que o teclado
   alcanca e que o leitor de tela anuncia. */
.ktl-popup-ciente input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ktl-popup-ciente-caixa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: none;
  border-radius: 5px;
  border: 1.5px solid currentColor;
  background: transparent;
}

.ktl-popup-ciente input:checked + .ktl-popup-ciente-caixa {
  background: currentColor;
}

/* Marcado, o quadrado se pinta com a cor do texto. O tique entao precisa ser
   da cor do FUNDO do popup para aparecer, e essa cor chega por variavel posta
   no proprio elemento, porque so o cadastro sabe qual e. */
.ktl-popup-ciente input:checked + .ktl-popup-ciente-caixa svg {
  color: var(--ktl-popup-fundo, #4f46e5);
}

.ktl-popup-ciente input:focus-visible + .ktl-popup-ciente-caixa {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.ktl-popup-botao:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
}

.ktl-popup-botao:disabled:hover {
  transform: none;
  filter: none;
}

/* O "Continuar" do aviso travado ocupa a largura toda: ele e a unica acao da
   linha, e botao curto sobrando espaco a direita parece meio caminho. */
.ktl-popup-botao-largo {
  align-self: stretch;
  text-align: center;
}

/* O atalho para o boletim, entre o texto e a caixa de ciencia. Mesma
   transparencia da caixa, para funcionar em qualquer cor de fundo escolhida
   no Owner: um degrau de leitura, nao um segundo botao brigando com o
   primeiro. */
.ktl-popup-atalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding: 0.6875rem 0.875rem;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: background 120ms ease;
}

.ktl-popup-atalho:hover {
  background: rgba(255, 255, 255, 0.24);
}

.ktl-popup-atalho svg {
  flex: none;
}


/* ============================================================
   Valor que a pessoa não pode ver
   ------------------------------------------------------------
   O número continua na linha, ilegível. É o meio-termo que o dono
   pediu: o funcionário abre a tela, vê que há cinco contas vencendo
   hoje e trabalha — sem saber quanto a empresa deve.

   Sumir com a coluna deixaria a tela parecendo quebrada; um traço no
   lugar não diria que existe algo ali. O borrão diz.
   ============================================================ */
.ks-valor-oculto {
  position: relative;
  display: inline-flex;
  align-items: center;
  user-select: none;
  cursor: help;
}

.ks-valor-oculto-texto {
  filter: blur(5px);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.ks-valor-oculto-cadeado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ks-color-text-muted, #64748b);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.ks-valor-oculto:hover .ks-valor-oculto-cadeado {
  opacity: 1;
}

.ks-valor-oculto:hover .ks-valor-oculto-texto {
  opacity: 0.25;
}

/* Some da tela e continua no leitor de tela: quem usa leitor precisa saber
   que ali existe um valor que não é dele, e não um espaço vazio. */
.ks-apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* KtaloguDesign, zoom ao vivo (a roda e a pinça, palco.tsx): durante o giro
   só a arte escala; a moldura, as alças e os contornos somem até o zoom
   fixar e voltam no tamanho certo. As guias de impressão ficam. */
[data-zoom-vivo] [data-caixa-da-arte] > :not([data-palco]):not([data-sombra-da-arte]):not([data-fatia]):not([data-margem-de-seguranca]):not([data-guias-da-caneca]) {
  visibility: hidden;
}

/* =====================================================================
   KtaloguDesign no celular e no tablet em pé (até 1023 px), como o Canva
   no celular. O atributo data-compacto só existe nessas telas
   (editor-de-banner/tela-compacta.ts): no desktop nenhuma regra daqui vale.
   ===================================================================== */

/* --- a barra de cima: só ícones, com rolagem de lado se faltar espaço */
[data-editor="gerador"][data-compacto] > header {
  height: 52px;
  gap: 4px;
  padding: 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-editor="gerador"][data-compacto] > header::-webkit-scrollbar { display: none; }
[data-editor="gerador"][data-compacto] [data-topo-divisor] { display: none; }
[data-editor="gerador"][data-compacto] [data-topo-voltar],
[data-editor="gerador"][data-compacto] [data-topo-tamanho],
[data-editor="gerador"][data-compacto] [data-botao-do-topo] {
  font-size: 0;
  gap: 0;
  padding: 0;
  width: 38px;
  min-width: 38px;
  height: 38px;
  justify-content: center;
  flex-shrink: 0;
}
[data-editor="gerador"][data-compacto] [data-topo-nome] {
  width: auto;
  flex: 1 1 72px;
  min-width: 64px;
  padding: 0 4px;
  font-size: 13px;
}
[data-editor="gerador"][data-compacto] [data-topo-salvo] { font-size: 0; gap: 0; flex-shrink: 0; }
[data-editor="gerador"][data-compacto] [data-topo-direita] { gap: 4px; flex-shrink: 0; }
/* O recado sai da barra (não cabe) e aparece por cima da arte. */
[data-editor="gerador"][data-compacto] [data-recado] {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 130;
  max-width: calc(100vw - 24px);
  white-space: normal;
  text-align: center;
  box-shadow: 0 8px 24px rgba(20, 11, 43, 0.25);
}
[data-editor="gerador"][data-compacto] [data-recado="bom"] { background: rgba(31, 27, 46, 0.94); }
/* As janelas da barra (tamanho, versões, aprovação, baixar) abrem na largura da tela. */
[data-editor="gerador"][data-compacto] [data-janela-do-topo] {
  position: fixed;
  left: 8px;
  right: 8px;
  top: 58px;
  width: auto;
  max-width: none;
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
  z-index: 130;
}
/* A prévia do feed cabe na tela. */
[data-editor="gerador"][data-compacto] [data-previa-do-feed] { padding: 8px; }
[data-editor="gerador"][data-compacto] [data-previa-do-feed] > div { max-width: 100%; }

/* --- a barra da peça e a do grupo: uma faixa com rolagem de lado */
[data-editor="gerador"][data-compacto] [data-barra-de-cima] { padding-left: 8px; padding-right: 8px; }
[data-editor="gerador"][data-compacto] [data-barra-de-cima] > div {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
}
[data-editor="gerador"][data-compacto] [data-barra-de-cima] > div::-webkit-scrollbar { display: none; }
[data-editor="gerador"][data-compacto] [data-barra-de-cima] > div > * { flex-shrink: 0; }
/* Sem peça escolhida: fica só o "Animar" (a dica é de mouse). */
[data-editor="gerador"][data-compacto] [data-dica-da-barra] > b { display: none; }
[data-editor="gerador"][data-compacto] [data-dica-da-barra] { font-size: 0; padding: 0 6px; }
[data-editor="gerador"][data-compacto] [data-dica-da-barra]:not(:has(button)) { display: none; }

/* --- zoom: a pinça faz o trabalho do controle deslizante */
[data-editor="gerador"][data-compacto] [data-zoom] input[type="range"] { display: none; }

/* --- tablet em pé: o trilho fica, o painel abre por cima da arte */
[data-editor="gerador"][data-compacto]:not([data-celular]) [data-painel-lateral] {
  position: absolute;
  left: 76px;
  top: 52px;
  bottom: 0;
  width: 360px;
  z-index: 60;
  box-shadow: 16px 0 40px rgba(20, 11, 43, 0.16);
}
[data-editor="gerador"][data-compacto]:not([data-celular]) [data-tira] { right: 190px; }

/* --- celular: o trilho vira a barra de baixo e o painel sobe como gaveta */
[data-editor="gerador"][data-celular] [data-conteudo] { flex-direction: column; }
[data-editor="gerador"][data-celular] [data-area-da-arte] { order: 1; flex: 1 1 auto; min-height: 0; width: 100%; }
[data-editor="gerador"][data-celular] [data-trilho] {
  order: 2;
  width: 100%;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  gap: 0;
  padding: 4px 4px max(6px, env(safe-area-inset-bottom));
  border-right: 0;
  border-top: 1px solid #e6e3ee;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
[data-editor="gerador"][data-celular] [data-trilho]::-webkit-scrollbar { display: none; }
[data-editor="gerador"][data-celular] [data-trilho] > button { width: auto; min-width: 52px; flex: 1 0 auto; padding: 2px 0; font-size: 10px; }
[data-editor="gerador"][data-celular] [data-trilho] > button > span:first-child { width: 32px; height: 32px; }
/* Peça escolhida: a barra de baixo é a da peça (o trilho sai, como no Canva). */
[data-editor="gerador"][data-celular][data-com-peca] [data-trilho] { display: none; }
[data-editor="gerador"][data-celular] [data-painel-lateral] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: min(72dvh, 640px);
  border-right: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(20, 11, 43, 0.22);
  z-index: 80;
  padding-bottom: env(safe-area-inset-bottom);
}
[data-editor="gerador"][data-celular] [data-painel-lateral]::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 4px;
  background: #d9d5e5;
}
[data-editor="gerador"][data-celular] [data-painel-lateral] > div:first-child { height: 50px; padding: 8px 16px 0; }
[data-editor="gerador"][data-celular] [data-painel-lateral] > div:last-child { padding-left: 16px; padding-right: 16px; }
/* Com peça escolhida a barra dela fica embaixo (no lugar do trilho); sem peça, o "Animar" fica em cima. */
[data-editor="gerador"][data-celular][data-com-peca] [data-barra-de-cima] { top: auto; bottom: 8px; }
[data-editor="gerador"][data-celular] [data-tira] { left: 8px; right: 8px; bottom: 8px; }
[data-editor="gerador"][data-celular][data-com-peca] [data-tira] { display: none; }
[data-editor="gerador"][data-celular] [data-zoom] { top: 10px; right: 10px; bottom: auto !important; }
[data-editor="gerador"][data-celular] [data-zoom] > button:nth-of-type(1),
[data-editor="gerador"][data-celular] [data-zoom] > button:nth-of-type(2) { display: none; }
/* As ferramentas de desenho deitadas no canto de cima (em pé, cobriam a lateral da arte). */
[data-editor="gerador"][data-celular] [data-ferramentas] { top: 10px !important; left: 10px; right: auto; transform: none; translate: none; }
[data-editor="gerador"][data-celular] [data-ferramentas] > div { flex-direction: row; padding: 4px; }
[data-editor="gerador"][data-celular]:not([data-com-peca]) [data-barra-de-cima] { top: 64px; }
/* "Não cabe": no toque ficam só os dois botões (o rótulo empurrava a mini barra para fora da tela). */
[data-editor="gerador"][data-compacto] [data-aviso-nao-cabe] > span:first-child { display: none; }
/* Tablet com o painel aberto: a barra da peça começa depois dele (senão fica embaixo). */
[data-editor="gerador"][data-compacto]:not([data-celular])[data-painel-aberto] [data-barra-de-cima] { left: 360px; }