/* ==========================================================================
   KR Untitled UI — camada de design system (tokens + componentes)
   Carregada DEPOIS de estilo.css. Prefixo .ku-* evita colisão com Bootstrap/AdminLTE.
   Fonte-única: derivada do kit de componentes aprovado (Untitled UI adaptado à identidade do sistema).
   Sistema white-label (kiilg / krcosmeticos / teste) — nunca cravar nome de marca; usar PROJETO/APP_NAME.
   ========================================================================== */

:root {
  /* Cinzas Untitled UI */
  --ku-g25:#FCFCFD; --ku-g50:#F9FAFB; --ku-g100:#F2F4F7; --ku-g200:#EAECF0; --ku-g300:#D0D5DD;
  --ku-g400:#98A2B3; --ku-g500:#667085; --ku-g600:#475467; --ku-g700:#344054; --ku-g800:#1D2939; --ku-g900:#101828;
  /* Marca (azul) */
  --ku-p50:#EFF4FF; --ku-p100:#D1E0FF; --ku-p400:#528BFF; --ku-p500:#2563EB; --ku-p600:#1D4FD7;
  /* Teal (positivo) */
  --ku-t50:#F0FDF9; --ku-t100:#CCFBEF; --ku-t500:#15B79E; --ku-t600:#0E9384; --ku-t700:#107569;
  /* Estado */
  --ku-w50:#FFFAEB; --ku-w100:#FEF0C7; --ku-w500:#F79009; --ku-w600:#DC6803;
  --ku-e50:#FEF3F2; --ku-e100:#FEE4E2; --ku-e500:#F04438; --ku-e600:#D92D20;

  /* superfícies semânticas */
  --ku-bg:#F4F6FA; --ku-surface:#fff; --ku-surface-2:var(--ku-g50);
  --ku-ink:var(--ku-g900); --ku-ink-2:var(--ku-g600); --ku-ink-3:var(--ku-g500); --ku-ink-4:var(--ku-g400);
  --ku-line:var(--ku-g200); --ku-line-2:var(--ku-g300);
  --ku-brand:var(--ku-p500); --ku-brand-2:var(--ku-p600); --ku-brand-soft:var(--ku-p50);

  /* sombras em camadas */
  --ku-sh-xs:0 1px 2px rgba(16,24,40,.05);
  --ku-sh-sm:0 1px 3px rgba(16,24,40,.1),0 1px 2px rgba(16,24,40,.06);
  --ku-sh-md:0 4px 8px -2px rgba(16,24,40,.1),0 2px 4px -2px rgba(16,24,40,.06);
  --ku-sh-lg:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03);
  --ku-sh-xl:0 20px 24px -4px rgba(16,24,40,.1),0 8px 8px -4px rgba(16,24,40,.04);
  --ku-ring:0 0 0 4px var(--ku-p100);
  /* Foco PADRÃO de campos (texto/número/select/textarea/data): borda nítida, sem glow/blur. */
  --ku-focus:0 0 0 1px var(--ku-brand);

  --ku-r-sm:8px; --ku-r-md:10px; --ku-r-lg:12px; --ku-r-xl:16px; --ku-r-pill:999px;
  --ku-sans:"Poppins","Segoe UI",ui-sans-serif,-apple-system,Roboto,system-ui,sans-serif;
}

/* ---- Componentes reutilizáveis ------------------------------------------ */

/* Featured icon (assinatura UUI) */
.ku-feat{width:40px;height:40px;border-radius:var(--ku-r-md);display:grid;place-items:center;
  background:var(--ku-brand-soft);color:var(--ku-brand);border:1px solid var(--ku-p100);flex:none;}
.ku-feat > i, .ku-feat svg{font-size:1.1rem;width:20px;height:20px;}
.ku-feat--teal{background:var(--ku-t50);color:var(--ku-t600);border-color:var(--ku-t100);}
.ku-feat--amber{background:var(--ku-w50);color:var(--ku-w600);border-color:var(--ku-w100);}
.ku-feat--rose{background:var(--ku-e50);color:var(--ku-e600);border-color:var(--ku-e100);}
.ku-feat--halo{border:none;box-shadow:0 0 0 6px color-mix(in srgb,var(--ku-brand-soft) 60%,transparent),
  0 0 0 12px color-mix(in srgb,var(--ku-brand-soft) 30%,transparent);}

/* Botões */
.ku-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ku-sans);
  font-size:.9rem;font-weight:600;line-height:1;padding:10px 16px;border-radius:var(--ku-r-sm);cursor:pointer;
  border:1px solid transparent;transition:.14s ease;box-shadow:var(--ku-sh-xs);text-decoration:none;}
.ku-btn:focus-visible{outline:none;box-shadow:var(--ku-ring);}
.ku-btn--pri{background:linear-gradient(180deg,var(--ku-p400),var(--ku-brand));color:#fff;
  box-shadow:var(--ku-sh-xs),inset 0 1px 0 rgba(255,255,255,.2);}
.ku-btn--pri:hover{background:var(--ku-brand-2);color:#fff;}
.ku-btn--sec{background:var(--ku-surface);color:var(--ku-ink-2);border-color:var(--ku-line-2);}
.ku-btn--sec:hover{background:var(--ku-surface-2);color:var(--ku-ink);}
.ku-btn--ok{background:linear-gradient(180deg,var(--ku-t500),var(--ku-t600));color:#fff;}
.ku-btn--danger{background:linear-gradient(180deg,var(--ku-e500),var(--ku-e600));color:#fff;}
.ku-btn--block{width:100%;}
.ku-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* Badges */
.ku-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:var(--ku-r-pill);
  font-size:.74rem;font-weight:600;border:1px solid transparent;white-space:nowrap;}
.ku-badge__dot{width:6px;height:6px;border-radius:50%;}
.ku-badge--teal{background:var(--ku-t50);color:var(--ku-t700);border-color:var(--ku-t100);}.ku-badge--teal .ku-badge__dot{background:var(--ku-t500);}
.ku-badge--blue{background:var(--ku-brand-soft);color:var(--ku-brand);border-color:var(--ku-p100);}.ku-badge--blue .ku-badge__dot{background:var(--ku-brand);}
.ku-badge--amber{background:var(--ku-w50);color:var(--ku-w600);border-color:var(--ku-w100);}.ku-badge--amber .ku-badge__dot{background:var(--ku-w500);}
.ku-badge--rose{background:var(--ku-e50);color:var(--ku-e600);border-color:var(--ku-e100);}.ku-badge--rose .ku-badge__dot{background:var(--ku-e500);}
.ku-badge--gray{background:var(--ku-surface-2);color:var(--ku-ink-3);border-color:var(--ku-line);}.ku-badge--gray .ku-badge__dot{background:var(--ku-ink-4);}

/* Card */
.ku-card{background:var(--ku-surface);border:1px solid var(--ku-line);border-radius:var(--ku-r-xl);
  box-shadow:var(--ku-sh-sm);}
.ku-card--pad{padding:22px;}

/* KPI / stat card (assinatura UUI) */
.ku-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.ku-kpi{background:var(--ku-surface);border:1px solid var(--ku-line);border-radius:var(--ku-r-lg);
  box-shadow:var(--ku-sh-xs);padding:18px;min-width:0;}
.ku-kpi__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.ku-kpi__label{font-size:.78rem;color:var(--ku-ink-3);font-weight:500;min-width:0;}
.ku-kpi__val{font-size:1.7rem;font-weight:700;line-height:1.1;color:var(--ku-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ku-kpi__delta{font-size:.76rem;font-weight:600;margin-top:8px;display:inline-flex;align-items:center;gap:5px;color:var(--ku-ink-4);}
.ku-kpi__delta.up{color:var(--ku-t600);}
.ku-kpi__delta.down{color:var(--ku-e600);}
@media (max-width:575.98px){
  .ku-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
  .ku-kpi{padding:14px;}
  .ku-kpi__val{font-size:1.4rem;}
}

/* Campos de formulário */
.ku-field{display:flex;flex-direction:column;gap:6px;}
.ku-field > label{font-size:.82rem;font-weight:600;color:var(--ku-ink-2);}
.ku-req{color:var(--ku-e600);}
.ku-input{width:100%;border:1px solid var(--ku-line-2);border-radius:var(--ku-r-sm);padding:10px 12px;
  font-family:var(--ku-sans);font-size:.9rem;background:var(--ku-surface);color:var(--ku-ink);box-shadow:var(--ku-sh-xs);}
.ku-input::placeholder{color:var(--ku-ink-4);}
.ku-input:focus{outline:none;box-shadow:var(--ku-focus);border-color:var(--ku-brand);}
.ku-input--ok{border-color:var(--ku-t500);box-shadow:0 0 0 1px var(--ku-t500);}
.ku-input--err{border-color:var(--ku-e500);box-shadow:0 0 0 1px var(--ku-e500);}
.ku-fmsg{font-size:.76rem;display:inline-flex;align-items:center;gap:5px;}
.ku-fmsg--ok{color:var(--ku-t700);}.ku-fmsg--err{color:var(--ku-e600);}

/* Input-group com ícone (ex.: campo com ícone à direita, calendário, busca) */
.ku-inputgrp{display:flex;box-shadow:var(--ku-sh-xs);border-radius:var(--ku-r-sm);}
.ku-inputgrp .ku-input{border-right:0;border-radius:var(--ku-r-sm) 0 0 var(--ku-r-sm);box-shadow:none;}
.ku-inputgrp:focus-within{box-shadow:var(--ku-focus);}
.ku-inputgrp__addon{display:inline-flex;align-items:center;justify-content:center;padding:0 13px;
  border:1px solid var(--ku-line-2);border-left:0;border-radius:0 var(--ku-r-sm) var(--ku-r-sm) 0;
  background:var(--ku-surface);color:var(--ku-ink-3);}
.ku-inputgrp__btn{display:inline-flex;align-items:center;gap:7px;border:none;padding:0 15px;
  border-radius:0 var(--ku-r-sm) var(--ku-r-sm) 0;font-family:var(--ku-sans);font-size:.86rem;font-weight:600;
  cursor:pointer;color:#fff;background:linear-gradient(180deg,var(--ku-t500),var(--ku-t600));white-space:nowrap;}

/* Upload de imagem — dropzone (preview + área clicável/arrastar) */
.ku-upload{position:relative;display:flex;align-items:stretch;gap:12px;}
.ku-upload input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);border:0;}
.ku-upload__preview{width:72px;height:72px;flex:none;border:1px solid var(--ku-line);border-radius:var(--ku-r-md);
  display:grid;place-items:center;background:var(--ku-surface-2);color:var(--ku-ink-4);overflow:hidden;cursor:pointer;}
.ku-upload__preview img{width:100%;height:100%;object-fit:cover;display:block;}
.ku-upload__preview--contain img{object-fit:contain;padding:6px;}
.ku-upload__preview i{font-size:1.4rem;}
.ku-upload__zone{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:3px;padding:14px 16px;border:1px dashed var(--ku-line-2);border-radius:var(--ku-r-md);
  background:var(--ku-surface);cursor:pointer;transition:border-color .15s,background .15s;}
.ku-upload__zone:hover,.ku-upload.is-dragover .ku-upload__zone{border-color:var(--ku-brand);background:var(--ku-brand-soft);}
.ku-upload__cta{font-size:.9rem;color:var(--ku-ink-2);}
.ku-upload__cta strong{color:var(--ku-brand);font-weight:600;}
.ku-upload__hint{font-size:.78rem;color:var(--ku-ink-4);}
.ku-upload--err .ku-upload__zone{border-color:var(--ku-e500);}
.ku-upload--err .ku-upload__preview{border-color:var(--ku-e500);}

/* Switch moderno */
.ku-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.88rem;color:var(--ku-ink);}
.ku-switch input{position:absolute;opacity:0;width:0;height:0;}
.ku-switch__track{width:40px;height:22px;border-radius:var(--ku-r-pill);background:var(--ku-line-2);position:relative;transition:.15s;flex:none;}
.ku-switch__track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--ku-sh-sm);transition:.15s;}
.ku-switch input:checked + .ku-switch__track{background:var(--ku-t500);}
.ku-switch input:checked + .ku-switch__track::after{transform:translateX(18px);}
.ku-switch input:focus-visible + .ku-switch__track{box-shadow:var(--ku-ring);}

@media (prefers-reduced-motion:reduce){.ku-btn,.ku-switch__track,.ku-switch__track::after{transition:none;}}

/* =========================================================================
   Shell & Dashboard — refino Untitled UI (overrides sobre estilo.css/AdminLTE)
   ========================================================================= */

/* ---- Sidebar: fundo mais rico e profundo ---- */
.kr-main-sidebar,
.kr-main-sidebar.sidebar-dark-primary,
[class*='sidebar-dark-'].kr-main-sidebar {
  background: linear-gradient(185deg, #101a33 0%, #0b1220 62%, #090f1c 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ---- Sidebar: item ativo/caminho na cor da marca (azul, não ciano) ---- */
[class*='sidebar-dark-'] .kr-sidebar-nav .nav-item > .nav-link.active,
.kr-sidebar-nav .nav-item > .nav-link.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.24) 0%, rgba(37, 99, 235, 0.05) 100%) !important;
  border-color: rgba(37, 99, 235, 0.30) !important;
  box-shadow: inset 3px 0 0 var(--ku-p400) !important;
  color: #fff !important;
}
.kr-sidebar-nav .nav-item > .nav-link.active .kr-nav-icon-wrap {
  background: rgba(37, 99, 235, 0.26) !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  color: #bfd3ff !important;
}
[class*='sidebar-dark-'] .kr-sidebar-nav .nav-item.menu-path > .nav-link .kr-nav-icon-wrap,
.kr-sidebar-nav .nav-item.menu-path > .nav-link .kr-nav-icon-wrap {
  background: rgba(37, 99, 235, 0.16) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
  color: #9bb8ff !important;
}
.kr-sidebar-nav .nav-item > .nav-link:hover .kr-nav-icon-wrap {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(37, 99, 235, 0.22);
  color: #cdddff;
}

/* ---- Header: base alinhada aos tokens ---- */
.kr-main-header.navbar {
  border-bottom: 1px solid var(--ku-line) !important;
}

/* ---- Header: seletor de vendedor, usuário e tiles refinados ---- */
.kr-navbar-vendor-select {
  border-radius: var(--ku-r-sm) !important;
  border-color: var(--ku-line-2) !important;
  color: var(--ku-ink-2) !important;
  background-color: var(--ku-surface) !important;
}
.kr-navbar-vendor-select:hover {
  border-color: var(--ku-line-2) !important;
  background-color: var(--ku-surface-2) !important;
}
.kr-navbar-user-toggle,
.kr-navbar-icon-surface {
  border-radius: var(--ku-r-sm) !important;
}

/* ---- Dashboard: hero claro e elegante ---- */
.kr-dashboard2-page .kr-dashboard2-hero {
  background:
    radial-gradient(110% 190% at 100% 0%, var(--ku-t50), transparent 52%),
    radial-gradient(85% 150% at 0% 0%, var(--ku-brand-soft), transparent 55%),
    var(--ku-surface) !important;
  border: 1px solid var(--ku-line) !important;
  color: var(--ku-ink) !important;
  border-radius: var(--ku-r-xl) !important;
  box-shadow: var(--ku-sh-sm) !important;
  align-items: center !important;
}
.kr-dashboard2-page .kr-dashboard2-hero__title { color: var(--ku-ink) !important; }
.kr-dashboard2-page .kr-dashboard2-hero__subtitle { color: var(--ku-ink-3) !important; }
.kr-dashboard2-page .kr-dashboard2-hero__badge {
  background: var(--ku-brand-soft) !important;
  color: var(--ku-brand) !important;
}
.kr-dashboard2-page .kr-dashboard2-hero__actions .btn {
  border-radius: var(--ku-r-sm) !important;
  border: 1px solid var(--ku-p100) !important;
  color: var(--ku-brand) !important;
  background: var(--ku-brand-soft) !important;
  box-shadow: var(--ku-sh-xs) !important;
}
.kr-dashboard2-page .kr-dashboard2-hero__actions .btn:hover {
  background: var(--ku-p100) !important;
  color: var(--ku-brand-2) !important;
}

/* ---- Dashboard: cards de gráfico/painel + respiro ---- */
.kr-dashboard2-page .card {
  border: 1px solid var(--ku-line);
  border-radius: var(--ku-r-xl);
  box-shadow: var(--ku-sh-sm);
}
.kr-dashboard2-page .card .card-title {
  font-weight: 700;
  color: var(--ku-ink);
  font-size: 0.98rem;
}
.kr-dashboard2-page .kr-dashboard2-kpis { margin-bottom: 1.25rem !important; }
.kr-dashboard2-page .kr-dashboard-individual-panels .col-lg-6 > .card { height: 408px !important; }
.kr-dashboard2-page .kr-dashboard-individual-panels .row { margin-bottom: 0.4rem; }

/* =========================================================================
   TEMA ESCURO — redefine tokens + overrides de superfícies legadas
   Ativado por [data-theme="dark"] no <html>. Toggle no header.
   ========================================================================= */
:root[data-theme="dark"] {
  --ku-g50:#101828; --ku-g100:#1D2939; --ku-g200:#242f42; --ku-g300:#333f57;
  --ku-g400:#5b6b85; --ku-g500:#8b98ad; --ku-g600:#aab4c5; --ku-g700:#cdd4de; --ku-g800:#e6e9ef; --ku-g900:#f5f7fa;
  --ku-p50:#16233d; --ku-p100:#1e2c4d; --ku-brand-soft:#16233d;
  --ku-t50:#0f2723; --ku-t100:#123c34;
  --ku-w50:#2a1f0d; --ku-w100:#3a2c12; --ku-e50:#2a1416; --ku-e100:#3a1a1d;
  --ku-bg:#0a0f1c; --ku-surface:#111827; --ku-surface-2:#0e1524;
  --ku-line:#232f45; --ku-line-2:#2e3c56;
  --ku-ring:0 0 0 4px rgba(37, 99, 235, 0.35);
  --ku-sh-xs:0 1px 2px rgba(0,0,0,.35);
  --ku-sh-sm:0 1px 3px rgba(0,0,0,.4);
  --ku-sh-md:0 6px 14px -2px rgba(0,0,0,.5);
  --ku-sh-lg:0 16px 26px -6px rgba(0,0,0,.55);
  --ku-sh-xl:0 24px 40px -8px rgba(0,0,0,.6);
}

/* fundo global (especificidade alta para vencer o inline do startHtml) */
:root[data-theme="dark"] { background: #0a0f1c !important; background-image: none !important; }
[data-theme="dark"] body.hold-transition,
[data-theme="dark"] body.sidebar-mini,
[data-theme="dark"] body.layout-fixed,
[data-theme="dark"] body.hold-transition.sidebar-mini.layout-fixed {
  background: #0a0f1c !important;
  color: var(--ku-ink);
}
[data-theme="dark"] .wrapper,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .content { background: transparent !important; }

/* navbar / header */
[data-theme="dark"] .kr-main-header.navbar,
[data-theme="dark"] .main-header.navbar {
  background: rgba(17, 24, 39, 0.92) !important;
  border-bottom-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-navbar-icon-surface {
  background: var(--ku-surface-2) !important;
  border-color: var(--ku-line) !important;
  color: var(--ku-ink-3) !important;
}
/* Ring do badge acompanha o fundo do header (branco no claro, escuro no dark) */
[data-theme="dark"] .kr-navbar-icon-badge { --kr-navbar-badge-ring: var(--ku-surface); }
[data-theme="dark"] .kr-navbar-vendor-select {
  background-color: var(--ku-surface-2) !important;
  border-color: var(--ku-line) !important;
  color: var(--ku-ink-2) !important;
}
[data-theme="dark"] .kr-navbar-user-toggle { background: var(--ku-surface-2) !important; }
[data-theme="dark"] .kr-navbar-user-name { color: var(--ku-ink-2) !important; }
[data-theme="dark"] .kr-navbar-user { border-left-color: var(--ku-line) !important; }
[data-theme="dark"] .kr-main-header .navbar-nav .nav-link:hover { background: var(--ku-surface-2) !important; }

/* títulos / breadcrumb */
[data-theme="dark"] .content-header .page-title,
[data-theme="dark"] h1.page-title,
[data-theme="dark"] .text-dark { color: var(--ku-ink) !important; }
[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item a { color: var(--ku-ink-3) !important; }

/* cards genéricos (Bootstrap/AdminLTE) */
[data-theme="dark"] .card {
  background: var(--ku-surface) !important;
  border-color: var(--ku-line) !important;
  color: var(--ku-ink) !important;
}
[data-theme="dark"] .card-header { border-color: var(--ku-line) !important; color: var(--ku-ink) !important; }
[data-theme="dark"] .card-title { color: var(--ku-ink) !important; }
[data-theme="dark"] .card-footer { background: var(--ku-surface-2) !important; border-color: var(--ku-line) !important; }

/* formulários */
[data-theme="dark"] .form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] .custom-select {
  background-color: var(--ku-surface-2) !important;
  border-color: var(--ku-line-2) !important;
  color: var(--ku-ink) !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--ku-ink-4) !important; }
[data-theme="dark"] label { color: var(--ku-ink-2); }

/* tabelas */
[data-theme="dark"] .table { color: var(--ku-ink-2) !important; }
[data-theme="dark"] .table thead th {
  background: var(--ku-surface-2) !important; color: var(--ku-ink-3) !important; border-color: var(--ku-line) !important;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th { border-color: var(--ku-line) !important; }
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02) !important; }
[data-theme="dark"] .table-hover tbody tr:hover td { background: var(--ku-surface-2) !important; }

/* dropdowns (notificações, usuário, etc.) */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .kr-navbar-dropdown {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important; color: var(--ku-ink) !important;
}
[data-theme="dark"] .kr-navbar-dropdown__item:hover { background: var(--ku-surface-2) !important; }

/* modais */
[data-theme="dark"] .modal-content {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important; color: var(--ku-ink) !important;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--ku-line) !important; }

/* ---- Detalhe (kr-cadastro-detalhes / kr-produto-detalhes) — tema escuro ---- */
/* Overrides das cores claras cravadas em financeiro-relatorios.css (~2183-2503).
   Mantém o CSS base intacto (tema claro) e só recolore no dark via tokens --ku-*. */

/* Cadastro — container e texto base */
[data-theme="dark"] .kr-cadastro-detalhes { color: var(--ku-ink) !important; }

/* Cadastro — faixa de meta (summary) */
[data-theme="dark"] .kr-cadastro-detalhes__meta {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-cadastro-detalhes__meta-divider { background: var(--ku-line) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__label { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__field,
[data-theme="dark"] .kr-cadastro-detalhes__codigo { color: var(--ku-ink) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__metric { color: var(--ku-brand) !important; }

/* Cadastro — seções (painéis) */
[data-theme="dark"] .kr-cadastro-detalhes__section {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-cadastro-detalhes__section-title { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__logs { color: var(--ku-ink-2) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__log-item { border-bottom-color: var(--ku-line) !important; }

/* Cadastro — rodapé e upload de imagem */
[data-theme="dark"] .kr-cadastro-detalhes__footer { border-top-color: var(--ku-line) !important; }
[data-theme="dark"] .kr-cadastro-detalhes__imagem-upload img {
  border-color: var(--ku-line) !important; background: var(--ku-surface-2) !important;
}

/* Cadastro — divisor de meta empilhado no mobile */
[data-theme="dark"] .kr-cadastro-detalhes__meta-item { border-top-color: var(--ku-line) !important; }

/* Produto — hero (thumb) */
[data-theme="dark"] .kr-produto-detalhes__thumb { border-color: var(--ku-line) !important; }

/* Produto — painel (moldura das abas) */
[data-theme="dark"] .kr-produto-detalhes__panel {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important;
}

/* Produto — nav lateral (sidebar) */
[data-theme="dark"] .kr-produto-detalhes__sidebar {
  background: var(--ku-surface-2) !important; border-right-color: var(--ku-line) !important;
  border-bottom-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-produto-detalhes__sidebar-title { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .kr-produto-detalhes__sidebar .nav-link { color: var(--ku-ink-2) !important; }
[data-theme="dark"] .kr-produto-detalhes__sidebar .nav-link:hover {
  background: var(--ku-surface) !important; color: var(--ku-brand) !important;
}
[data-theme="dark"] .kr-produto-detalhes__sidebar .nav-link.active {
  background: var(--ku-brand-soft) !important; color: var(--ku-brand) !important;
  border-left-color: var(--ku-brand) !important;
}

/* Produto — imagens (principal e galeria) */
[data-theme="dark"] .kr-produto-detalhes__img-principal { border-color: var(--ku-line) !important; }
[data-theme="dark"] .kr-produto-detalhes__galeria-item { border-color: var(--ku-line) !important; }

/* botão de tema no header */
.kr-theme-toggle .kr-navbar-icon-surface i.fa-sun { display: none; }
[data-theme="dark"] .kr-theme-toggle .kr-navbar-icon-surface i.fa-moon { display: none; }
[data-theme="dark"] .kr-theme-toggle .kr-navbar-icon-surface i.fa-sun { display: inline-block; }

/* superfícies internas brancas (card-body, bg-white, etc.) no escuro */
[data-theme="dark"] .card-body { background: var(--ku-surface) !important; color: var(--ku-ink) !important; }
[data-theme="dark"] .bg-white { background: var(--ku-surface) !important; }
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-gray-light { background: var(--ku-surface-2) !important; }
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] small.text-muted { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .text-body,
[data-theme="dark"] p, [data-theme="dark"] span:not([class*="badge"]):not([class*="text-"]),
[data-theme="dark"] td, [data-theme="dark"] th, [data-theme="dark"] li { color: inherit; }
/* .ku-kpi__label é um <span>: a regra acima o força a inherit (cor clara) no escuro.
   Restaura a cor semântica do rótulo do KPI. */
[data-theme="dark"] .ku-kpi__label { color: var(--ku-ink-3) !important; }
[data-theme="dark"] hr { border-color: var(--ku-line) !important; }
[data-theme="dark"] .close { color: var(--ku-ink-2) !important; text-shadow: none; }

/* cabeçalhos de card no escuro */
[data-theme="dark"] .card-header { background: var(--ku-surface) !important; }
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-header .card-title,
[data-theme="dark"] .card-title { color: var(--ku-ink) !important; }

/* botões neutros no escuro */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-light {
  background: var(--ku-surface-2) !important;
  border-color: var(--ku-line-2) !important;
  color: var(--ku-ink-2) !important;
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-light:hover {
  background: var(--ku-line) !important;
  color: var(--ku-ink) !important;
}

/* =========================================================================
   Ajustes finos do tema escuro (fonte mais clara + boxes estilosos)
   ========================================================================= */

/* Texto de tabelas mais claro (nomes/valores legíveis) */
[data-theme="dark"] .content .table td,
[data-theme="dark"] .content .table th,
[data-theme="dark"] .tableListagens td,
[data-theme="dark"] .tableListagens th { color: var(--ku-ink-2) !important; }
[data-theme="dark"] .content .table thead th { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .table td strong,
[data-theme="dark"] .table td b { color: var(--ku-ink) !important; }

/* Card de prêmios/metas (financial-goals) — escuro e estiloso */
[data-theme="dark"] .financial-goals-card-wrapper {
  background: linear-gradient(180deg, var(--ku-surface-2), var(--ku-surface)) !important;
  border: 1px solid var(--ku-line) !important;
  color: var(--ku-ink) !important;
  box-shadow: var(--ku-sh-sm) !important;
}
[data-theme="dark"] .financial-goals-card-wrapper,
[data-theme="dark"] .financial-goals-card,
[data-theme="dark"] .financial-goals-summary,
[data-theme="dark"] .financial-goals-metrics,
[data-theme="dark"] .financial-goals-progress-footer { color: var(--ku-ink) !important; }
[data-theme="dark"] .financial-goals-card-wrapper h1,
[data-theme="dark"] .financial-goals-card-wrapper h2,
[data-theme="dark"] .financial-goals-card-wrapper h3,
[data-theme="dark"] .financial-goals-card-wrapper h4,
[data-theme="dark"] .financial-goals-card-wrapper strong,
[data-theme="dark"] .financial-goals-card-wrapper span,
[data-theme="dark"] .financial-goals-card-wrapper p,
[data-theme="dark"] .financial-goals-card-wrapper div,
[data-theme="dark"] .financial-goals-metric,
[data-theme="dark"] .financial-goals-metric * { color: var(--ku-ink) !important; }
[data-theme="dark"] .financial-goals-metric {
  background: var(--ku-surface) !important;
  border: 1px solid var(--ku-line) !important;
  border-radius: 12px !important;
}
/* rótulos secundários / muted dentro do card */
[data-theme="dark"] .financial-goals-progress-footer,
[data-theme="dark"] .financial-goals-card-wrapper .text-muted { color: var(--ku-ink-3) !important; }
/* pill de status legível no escuro */
[data-theme="dark"] .financial-goals-status.status-pending { background: rgba(248,113,113,.16) !important; color: #fca5a5 !important; }
[data-theme="dark"] .financial-goals-status.status-complete { background: rgba(34,197,94,.16) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .financial-goals-status.status-ontrack { background: rgba(59,130,246,.16) !important; color: #93c5fd !important; }
[data-theme="dark"] .financial-goals-status.status-warning { background: rgba(234,179,8,.18) !important; color: #fcd34d !important; }
/* barra de progresso trilha escura */
[data-theme="dark"] .financial-goals-progress { background: var(--ku-line) !important; }

/* =========================================================================
   Componentes kr-financeiro-* no tema escuro (hero, painéis, tabela, paginação)
   — corrige superfícies claras herdadas de financeiro-relatorios.css
   ========================================================================= */
[data-theme="dark"] .kr-financeiro-hero {
  background:
    radial-gradient(110% 190% at 100% 0%, var(--ku-t50), transparent 52%),
    radial-gradient(85% 150% at 0% 0%, var(--ku-brand-soft), transparent 55%),
    var(--ku-surface) !important;
  border: 1px solid var(--ku-line) !important;
}
[data-theme="dark"] .kr-financeiro-competencia,
[data-theme="dark"] .kr-financeiro-hero__title,
[data-theme="dark"] .kr-financeiro-hero h1 { color: var(--ku-ink) !important; }
[data-theme="dark"] .kr-financeiro-subtitle { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .kr-financeiro-badge { background: var(--ku-brand-soft) !important; color: var(--ku-brand) !important; border-color: var(--ku-p100) !important; }
[data-theme="dark"] .btn-app { background: var(--ku-surface-2) !important; border: 1px solid var(--ku-line) !important; color: var(--ku-ink-2) !important; }
[data-theme="dark"] .btn-app:hover { background: var(--ku-line) !important; color: var(--ku-ink) !important; }

[data-theme="dark"] .kr-financeiro-panel,
[data-theme="dark"] .kr-financeiro-table-card { background: var(--ku-surface) !important; border-color: var(--ku-line) !important; }
[data-theme="dark"] .kr-financeiro-panel .card-header { background: var(--ku-surface) !important; border-color: var(--ku-line) !important; }

/* tabela */
[data-theme="dark"] .kr-financeiro-table thead th {
  background: var(--ku-surface-2) !important; color: var(--ku-ink-3) !important; border-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-financeiro-table td,
[data-theme="dark"] .kr-financeiro-table th { border-color: var(--ku-line) !important; color: var(--ku-ink-2) !important; }
[data-theme="dark"] .kr-financeiro-table tbody tr:hover td { background: var(--ku-surface-2) !important; }
[data-theme="dark"] .kr-financeiro-table tfoot td,
[data-theme="dark"] .kr-financeiro-table tfoot th {
  background: var(--ku-surface-2) !important; color: var(--ku-ink) !important; border-color: var(--ku-line) !important;
}

/* paginação (rodapé) */
[data-theme="dark"] .kr-financeiro-pagination {
  background: var(--ku-surface-2) !important; border-color: var(--ku-line) !important; color: var(--ku-ink-2) !important;
}
[data-theme="dark"] .kr-financeiro-pagination-count,
[data-theme="dark"] .kr-financeiro-pagination-suffix,
[data-theme="dark"] .kr-financeiro-pagination .text-muted { color: var(--ku-ink-3) !important; }
[data-theme="dark"] .kr-financeiro-pagination .page-link,
[data-theme="dark"] .kr-financeiro-pagination .pgn {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important; color: var(--ku-ink-2) !important;
}
[data-theme="dark"] .kr-financeiro-pagination .page-item.active .page-link,
[data-theme="dark"] .kr-financeiro-pagination .pgn.on {
  background: var(--ku-brand) !important; border-color: var(--ku-brand) !important; color: #fff !important;
}

/* header: seletor de vendedor + grupo de ferramentas */
[data-theme="dark"] .kr-navbar-vendor-select {
  background-color: var(--ku-surface-2) !important; color: var(--ku-ink-2) !important; border-color: var(--ku-line) !important;
}

/* labels de filtro legíveis */
[data-theme="dark"] .kr-financeiro-filters label,
[data-theme="dark"] .kr-financeiro-panel label { color: var(--ku-ink-2) !important; }

/* =========================================================================
   Formulários no estilo do kit (global, ambos os temas)
   ========================================================================= */
.form-control, .custom-select, select.form-control, textarea.form-control {
  border-radius: var(--ku-r-sm);
  border: 1px solid var(--ku-line-2);
  box-shadow: var(--ku-sh-xs);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .custom-select:focus, select.form-control:focus, textarea.form-control:focus {
  border-color: var(--ku-brand);
  box-shadow: var(--ku-focus);
}
/* Mesmo padrão de foco para campos dentro de input-group (sobrepõe o glow do AdminLTE) */
.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > select.form-control:focus,
.input-group > textarea.form-control:focus,
.input-group > .form-control.datetimepicker-input:focus {
  border-color: var(--ku-brand);
  box-shadow: var(--ku-focus);
  z-index: 3;
}
/* Tema escuro: a borda de marca no foco precisa vencer o override [data-theme=dark] .form-control (0,2,0) */
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus,
[data-theme="dark"] select.form-control:focus,
[data-theme="dark"] textarea.form-control:focus,
[data-theme="dark"] .input-group > .form-control:focus {
  border-color: var(--ku-brand);
  box-shadow: var(--ku-focus);
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  border: 1px solid var(--ku-line-2); background: var(--ku-surface-2); color: var(--ku-ink-2);
  border-radius: 6px; padding: 5px 12px; margin-right: 10px; cursor: pointer; font-weight: 500;
}

/* =========================================================================
   Dark — campos, abas, filtros, estados vazios (inclui kr-cliente-*)
   ========================================================================= */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control {
  background-color: var(--ku-surface-2) !important; border-color: var(--ku-line-2) !important; color: var(--ku-ink) !important;
}
[data-theme="dark"] .form-control::placeholder { color: var(--ku-ink-4) !important; }
[data-theme="dark"] input[type="file"]::file-selector-button,
[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
  background: var(--ku-line) !important; color: var(--ku-ink) !important; border-color: var(--ku-line-2) !important;
}
[data-theme="dark"] .btn-app.btn,
[data-theme="dark"] a.btn-app {
  background: var(--ku-surface-2) !important; border: 1px solid var(--ku-line) !important; color: var(--ku-ink-2) !important;
}

/* abas (nav-tabs / kr-cliente-tabs) */
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--ku-line) !important; }
[data-theme="dark"] .nav-tabs .nav-link,
[data-theme="dark"] .kr-cliente-tabs .nav-link { color: var(--ku-ink-3) !important; background: transparent !important; border-color: transparent !important; }
[data-theme="dark"] .nav-tabs .nav-link:hover,
[data-theme="dark"] .kr-cliente-tabs .nav-link:hover { color: var(--ku-ink) !important; }
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .kr-cliente-tabs .nav-link.active {
  background: var(--ku-surface) !important; color: var(--ku-t600) !important;
  border-color: var(--ku-line) var(--ku-line) var(--ku-surface) !important;
}
[data-theme="dark"] .kr-cliente-tabs-card,
[data-theme="dark"] .kr-cliente-tab-body { background: var(--ku-surface) !important; }

/* filtros e estados vazios dentro das abas */
[data-theme="dark"] .kr-cliente-filters { background: var(--ku-surface) !important; border-color: var(--ku-line) !important; }
[data-theme="dark"] .kr-cliente-empty,
[data-theme="dark"] .kr-financeiro-empty {
  background: var(--ku-surface) !important; border-color: var(--ku-line) !important; color: var(--ku-ink-3) !important;
}
[data-theme="dark"] .kr-cliente-empty i { color: var(--ku-ink-4) !important; }

/* =========================================================================
   Dark — todos os containers kr-cliente-* (abas: detalhes, movs, produtos,
   pagamentos, alterações, visitas, observações)
   ========================================================================= */
[data-theme="dark"] .kr-cliente-tabs-card,
[data-theme="dark"] .kr-cliente-tab-body,
[data-theme="dark"] .kr-cliente-tab-content,
[data-theme="dark"] .kr-cliente-accordion,
[data-theme="dark"] .kr-cliente-accordion-item,
[data-theme="dark"] .kr-cliente-obs-panel,
[data-theme="dark"] .kr-cliente-obs-history,
[data-theme="dark"] .kr-cliente-obs-item,
[data-theme="dark"] .kr-cliente-obs-list,
[data-theme="dark"] .kr-cliente-obs-form,
[data-theme="dark"] .kr-cliente-table-wrap {
  background: var(--ku-surface) !important;
  border-color: var(--ku-line) !important;
}
[data-theme="dark"] .kr-cliente-obs-textarea,
[data-theme="dark"] .kr-cliente-obs-empty-inline {
  background: var(--ku-surface-2) !important; border-color: var(--ku-line-2) !important; color: var(--ku-ink) !important;
}
[data-theme="dark"] .kr-cliente-table-summary { background: var(--ku-surface-2) !important; color: var(--ku-ink) !important; }
[data-theme="dark"] .kr-cliente-obs-count {
  background: var(--ku-surface-2) !important; color: var(--ku-ink-3) !important; border-color: var(--ku-line) !important;
}
/* textos das observações/seções */
[data-theme="dark"] .kr-cliente-section-title,
[data-theme="dark"] .kr-cliente-obs-panel__title,
[data-theme="dark"] .kr-cliente-obs-history__title,
[data-theme="dark"] .kr-cliente-obs-item__author,
[data-theme="dark"] .kr-cliente-obs-item__text,
[data-theme="dark"] .kr-cliente-obs-item__body { color: var(--ku-ink) !important; }
[data-theme="dark"] .kr-cliente-obs-panel__subtitle,
[data-theme="dark"] .kr-cliente-obs-item__date,
[data-theme="dark"] .kr-cliente-obs-item__meta,
[data-theme="dark"] .kr-cliente-obs-hint { color: var(--ku-ink-3) !important; }

/* =========================================================================
   Coluna Ações — estilo ghost do kit (ícones neutros que colorizam no hover)
   Aplica em todas as listagens (ambos os temas; hover usa tokens theme-aware)
   ========================================================================= */
td .btn.btn-sm.btn-outline-success,
td .btn.btn-sm.btn-outline-danger,
td .btn.btn-sm.btn-outline-primary,
td .btn.btn-sm.btn-outline-secondary,
td .btn.btn-sm.btn-outline-info,
.kr-financeiro-actions-cell .btn.btn-sm {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--ku-ink-3) !important;
  border-radius: var(--ku-r-sm) !important;
  box-shadow: none !important;
  transition: background .12s, color .12s;
}
/* No mobile não há hover: o ícone de ação precisa ser claramente tocável (borda + tinta) */
@media (max-width: 767.98px) {
  td .btn.btn-sm.btn-outline-success,
  td .btn.btn-sm.btn-outline-danger,
  td .btn.btn-sm.btn-outline-primary,
  td .btn.btn-sm.btn-outline-secondary,
  td .btn.btn-sm.btn-outline-info,
  .kr-financeiro-actions-cell .btn.btn-sm {
    background: var(--ku-surface-2) !important;
    border-color: var(--ku-line-2) !important;
    color: var(--ku-brand) !important;
  }
}
td .btn.btn-sm.btn-outline-success:hover,
td .btn.btn-sm.btn-outline-info:hover { background: var(--ku-t50) !important; color: var(--ku-t600) !important; }
td .btn.btn-sm.btn-outline-primary:hover { background: var(--ku-brand-soft) !important; color: var(--ku-brand) !important; }
td .btn.btn-sm.btn-outline-danger:hover { background: var(--ku-e50) !important; color: var(--ku-e600) !important; }
td .btn.btn-sm.btn-outline-secondary:hover { background: var(--ku-surface-2) !important; color: var(--ku-ink) !important; }

/* =========================================================================
   Formulário no kit — estado de erro (vee-validate), botões e alertas
   ========================================================================= */
/* campo em erro (.form-group.invalid) no estilo do kit */
.form-group.invalid .form-control,
.form-group.invalid .custom-select,
.form-group.invalid select,
.form-group.invalid textarea,
.form-group.invalid .input-group .form-control {
  border-color: var(--ku-e500) !important;
  box-shadow: 0 0 0 4px var(--ku-e100) !important;
}
.form-group.invalid label { color: var(--ku-e600) !important; }
/* mensagem de erro estilo kit (com ícone) */
.span-error {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; font-size: .76rem; font-weight: 500; color: var(--ku-e600) !important;
}
.span-error::before {
  content: "\f06a"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .85em; line-height: 1;
}
/* sem mensagem = sem ícone (evita "erro fantasma" em campo válido) */
.span-error:empty { display: none !important; }

/* AdminLTE .callout tem fundo branco cravado — vaza no tema escuro (fluxo do VerCaixa) */
:root[data-theme="dark"] .callout {
  background-color: var(--ku-surface-2) !important;
  color: var(--ku-ink-2);
}

/* botões do hero (btn-app) no estilo do kit */
.btn-app.btn {
  border-radius: var(--ku-r-sm) !important;
  border: 1px solid var(--ku-line-2) !important;
  background: var(--ku-surface) !important;
  color: var(--ku-ink-2) !important;
  box-shadow: var(--ku-sh-xs) !important;
  transition: background .14s, color .14s, box-shadow .14s;
}
.btn-app.btn:hover { background: var(--ku-surface-2) !important; color: var(--ku-ink) !important; }
/* ações positivas (adicionar/salvar) = botão primário */
.btn-app.btn:has(.fa-plus),
.btn-app.btn:has(.fa-save),
.btn-app.btn:has(.fa-floppy-o) {
  background: linear-gradient(180deg, var(--ku-p400), var(--ku-brand)) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: var(--ku-sh-xs), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.btn-app.btn:has(.fa-plus):hover,
.btn-app.btn:has(.fa-save):hover,
.btn-app.btn:has(.fa-floppy-o):hover { background: var(--ku-brand-2) !important; color: #fff !important; }

/* SweetAlert toast no estilo do kit */
.swal2-popup.swal2-toast {
  border-radius: var(--ku-r-lg) !important;
  box-shadow: var(--ku-sh-lg) !important;
  border: 1px solid var(--ku-line) !important;
}
[data-theme="dark"] .swal2-popup.swal2-toast { background: var(--ku-surface) !important; }
[data-theme="dark"] .swal2-popup.swal2-toast .swal2-title { color: var(--ku-ink) !important; }
[data-theme="dark"] .swal2-popup.swal2-toast .swal2-html-container,
[data-theme="dark"] .swal2-popup.swal2-toast #swal2-content { color: var(--ku-ink-3) !important; }

/* ==========================================================================
   Ajuda contextual da tela (botão "?" no hero + #ModalAjuda)
   Infra reutilizável: vale para telas PHP e telas Vue. Fica aqui (e não em
   financeiro-relatorios.css) porque kr-untitled.css é a única folha carregada
   nos dois master pages. Não replicar por tela.
   ========================================================================== */

/* Botão de ajuda do hero — idêntico aos demais btn-app (Imprimir/Adicionar):
   mesma forma, mesma cor de texto e de ícone. Não tingir o ícone de marca. */

/* Heros fora do padrão kr-financeiro (ex.: Dashboard) usam botões-pílula e não
   têm os overrides de .btn-app do padrão. Sem isto o botão de ajuda herda o box
   model do AdminLTE (60px de altura, ícone em bloco) e destoa dos vizinhos. */
.kr-dashboard2-page .kr-dashboard2-hero__actions .kr-ajuda-btn.btn-app {
  height: auto;
  min-width: 0;
  margin: 0;
  padding: .45rem .95rem;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
}
.kr-dashboard2-page .kr-dashboard2-hero__actions .kr-ajuda-btn.btn-app > i {
  display: inline;
  font-size: inherit;
}
/* No tema escuro a regra de .btn-app tingiria o texto de cinza e o botão
   destoaria dos vizinhos deste hero — força a mesma cor deles. */
.kr-dashboard2-page .kr-dashboard2-hero__actions .kr-ajuda-btn.btn-app,
.kr-dashboard2-page .kr-dashboard2-hero__actions .kr-ajuda-btn.btn-app > i {
  color: var(--ku-brand) !important;
}

/* --- Casca do modal (espelha kr-financeiro-modal, mas autossuficiente) ---- */
.kr-ajuda-modal .modal-content {
  background: var(--ku-surface);
  border: 1px solid var(--ku-line);
  border-radius: var(--ku-r-xl);
  overflow: hidden;
  box-shadow: var(--ku-sh-xl);
}
.kr-ajuda-modal .modal-header {
  align-items: flex-start;
  background: var(--ku-surface-2);
  border-bottom: 1px solid var(--ku-line);
  padding: 1rem 1.25rem;
}
.kr-ajuda-modal .modal-title {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.0625rem; font-weight: 700; color: var(--ku-ink);
}
.kr-ajuda-modal .modal-title > i { color: var(--ku-brand); }
.kr-ajuda-modal .modal-header .close {
  color: var(--ku-ink-3); text-shadow: none; opacity: 1; font-weight: 400;
}
.kr-ajuda-modal .modal-header .close:hover { color: var(--ku-ink); }
.kr-ajuda-modal__sub { font-size: .8125rem; color: var(--ku-ink-3); margin-top: .2rem; }

/* Corpo com scroll próprio, nunca overflow horizontal */
.kr-ajuda-modal .modal-body {
  position: relative;
  padding: 1.25rem;
  background: var(--ku-bg);
  max-height: min(76vh, 700px);
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--ku-ink-2);
  font-size: .9125rem;
  line-height: 1.6;
}

/* --- Layout: sumário fixo + coluna de conteúdo ---------------------------- */
.kr-ajuda-layout { display: block; }

.kr-ajuda-sumario { margin-bottom: 1rem; }
.kr-ajuda-sumario__titulo {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ku-ink-4); margin-bottom: .5rem;
}
.kr-ajuda-sumario__lista { list-style: none; margin: 0; padding: 0; }
.kr-ajuda-sumario__link {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem; border-radius: var(--ku-r-sm);
  color: var(--ku-ink-2); font-size: .8125rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .14s, color .14s, border-color .14s;
}
.kr-ajuda-sumario__link > i { font-size: .8rem; width: 1rem; text-align: center; color: var(--ku-ink-4); }
.kr-ajuda-sumario__link:hover { background: var(--ku-surface); color: var(--ku-ink); text-decoration: none; }
.kr-ajuda-sumario__link.is-ativo {
  background: var(--ku-brand-soft); color: var(--ku-brand);
  border-color: var(--ku-p100);
}
.kr-ajuda-sumario__link.is-ativo > i { color: var(--ku-brand); }

/* No mobile o sumário vira uma fita de chips que rola dentro de si mesma */
@media (max-width: 991.98px) {
  .kr-ajuda-sumario {
    position: sticky; top: -1.25rem; z-index: 3;
    margin: -1.25rem -1.25rem 1rem;
    padding: .75rem 1.25rem;
    background: var(--ku-bg);
    border-bottom: 1px solid var(--ku-line);
  }
  .kr-ajuda-sumario__lista {
    display: flex; gap: .4rem;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: .15rem;
  }
  .kr-ajuda-sumario__link {
    background: var(--ku-surface);
    border-color: var(--ku-line);
    box-shadow: var(--ku-sh-xs);
  }
}

@media (min-width: 992px) {
  .kr-ajuda-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
  }
  .kr-ajuda-sumario {
    position: sticky; top: 0;
    margin-bottom: 0;
    padding: .875rem;
    background: var(--ku-surface);
    border: 1px solid var(--ku-line);
    border-radius: var(--ku-r-lg);
    box-shadow: var(--ku-sh-xs);
  }
  .kr-ajuda-sumario__lista > li + li { margin-top: .1rem; }
}

/* --- Blocos didáticos ----------------------------------------------------- */
.kr-ajuda-intro {
  background: var(--ku-brand-soft);
  border: 1px solid var(--ku-p100);
  border-radius: var(--ku-r-lg);
  padding: .9rem 1.05rem;
  color: var(--ku-ink-2);
  margin-bottom: 1rem;
}
.kr-ajuda-intro p:last-child { margin-bottom: 0; }

/* Cada seção é um card — separa visualmente e dá pontos de parada ao olho */
.kr-ajuda-secao {
  background: var(--ku-surface);
  border: 1px solid var(--ku-line);
  border-radius: var(--ku-r-lg);
  box-shadow: var(--ku-sh-xs);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  scroll-margin-top: 1rem;
}
.kr-ajuda-secao:last-child { margin-bottom: 0; }
.kr-ajuda-secao__cab {
  display: flex; align-items: center; gap: .7rem;
  padding-bottom: .7rem; margin-bottom: .85rem;
  border-bottom: 1px solid var(--ku-line);
}
.kr-ajuda-secao__cab .ku-feat { width: 34px; height: 34px; border-radius: var(--ku-r-sm); }
.kr-ajuda-secao__cab .ku-feat > i { font-size: .9rem; width: auto; height: auto; }
.kr-ajuda-secao__titulo {
  margin: 0; font-size: .95rem; font-weight: 700; color: var(--ku-ink); line-height: 1.3;
}

/* Passo a passo numerado */
.kr-ajuda-passos { list-style: none; counter-reset: kraj; margin: 0; padding: 0; }
.kr-ajuda-passos > li {
  counter-increment: kraj;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .7rem;
}
.kr-ajuda-passos > li:last-child { margin-bottom: 0; }
.kr-ajuda-passos > li::before {
  content: counter(kraj);
  position: absolute; left: 0; top: .05rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ku-brand-soft); color: var(--ku-brand);
  border: 1px solid var(--ku-p100);
  font-size: .75rem; font-weight: 700;
}

/* Lista "o que cada coisa faz" (termo + explicação) */
.kr-ajuda-defs { margin: 0; padding: 0; }
.kr-ajuda-defs > li {
  list-style: none;
  padding: .55rem 0;
  border-top: 1px solid var(--ku-line);
}
.kr-ajuda-defs > li:first-child { border-top: none; padding-top: 0; }
.kr-ajuda-defs__termo {
  display: block; font-weight: 700; color: var(--ku-ink); font-size: .875rem; margin-bottom: .1rem;
}

/* Variante em 2 colunas para listas longas (só onde sobra largura) */
@media (min-width: 992px) {
  .kr-ajuda-defs--duas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: start;
  }
  .kr-ajuda-defs--duas > li { border-top: none; padding: .4rem 0 .6rem; }
  .kr-ajuda-defs--duas > li.kr-ajuda-defs__larga { grid-column: 1 / -1; border-top: 1px solid var(--ku-line); padding-top: .7rem; }
}

/* Aviso/observação */
.kr-ajuda-nota {
  display: flex; gap: .7rem; align-items: flex-start;
  border-radius: var(--ku-r-lg);
  padding: .8rem .95rem;
  background: var(--ku-w50);
  border: 1px solid var(--ku-w100);
  color: var(--ku-ink-2);
}
.kr-ajuda-nota > i { color: var(--ku-w600); margin-top: .18rem; }
.kr-ajuda-nota p:last-child { margin-bottom: 0; }

/* Exemplo comparativo (antes/depois lado a lado) */
.kr-ajuda-exemplo {
  border: 1px solid var(--ku-line-2);
  border-radius: var(--ku-r-lg);
  overflow: hidden;
  background: var(--ku-surface);
}
.kr-ajuda-exemplo__faixa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem .7rem;
  padding: .65rem .9rem;
  background: var(--ku-surface-2);
  border-bottom: 1px solid var(--ku-line);
  font-size: .85rem; color: var(--ku-ink-2);
}
.kr-ajuda-exemplo__de { text-decoration: line-through; color: var(--ku-ink-4); font-weight: 600; }
.kr-ajuda-exemplo__para { color: var(--ku-w600); font-weight: 700; }
.kr-ajuda-exemplo__casos { display: grid; grid-template-columns: 1fr; }
.kr-ajuda-exemplo__caso { padding: .9rem 1rem; }
.kr-ajuda-exemplo__caso + .kr-ajuda-exemplo__caso { border-top: 1px solid var(--ku-line); }
.kr-ajuda-exemplo__cab {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-bottom: .6rem;
}
.kr-ajuda-exemplo__titulo { font-weight: 700; color: var(--ku-ink); font-size: .875rem; }
.kr-ajuda-exemplo__linha {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .35rem 0; font-size: .875rem;
  border-top: 1px solid var(--ku-line);
}
.kr-ajuda-exemplo__linha:first-of-type { border-top: none; }
.kr-ajuda-exemplo__linha b { color: var(--ku-ink); font-variant-numeric: tabular-nums; }
.kr-ajuda-exemplo__nota { margin: .55rem 0 0; font-size: .8rem; color: var(--ku-ink-3); }
@media (min-width: 768px) {
  .kr-ajuda-exemplo__casos { grid-template-columns: 1fr 1fr; }
  .kr-ajuda-exemplo__caso + .kr-ajuda-exemplo__caso {
    border-top: none; border-left: 1px solid var(--ku-line);
  }
}

/* Regras em lista com marcador de "vale" / "não vale" */
.kr-ajuda-regras { list-style: none; margin: 0; padding: 0; }
.kr-ajuda-regras > li {
  display: flex; gap: .65rem; align-items: flex-start;
  margin-bottom: .55rem; font-size: .875rem;
}
.kr-ajuda-regras > li:last-child { margin-bottom: 0; }
.kr-ajuda-regras__ic {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; margin-top: .12rem;
  font-size: .62rem; font-weight: 700;
}
.kr-ajuda-regras__ic--sim {
  background: var(--ku-t50); color: var(--ku-t700); border: 1px solid var(--ku-t100);
}
.kr-ajuda-regras__ic--nao {
  background: var(--ku-w50); color: var(--ku-w600); border: 1px solid var(--ku-w100);
}

/* Perguntas frequentes */
.kr-ajuda-faq { margin: 0; padding: 0; }
.kr-ajuda-faq > li { list-style: none; margin-bottom: .8rem; }
.kr-ajuda-faq > li:last-child { margin-bottom: 0; }
.kr-ajuda-faq__q { display: block; font-weight: 700; color: var(--ku-ink); font-size: .875rem; }
@media (min-width: 992px) {
  .kr-ajuda-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .kr-ajuda-faq > li { margin-bottom: .9rem; }
}

/* Tema escuro — herda tokens, só ajusta os fundos "soft" que são claros por natureza */
[data-theme="dark"] .kr-ajuda-modal .modal-body { background: var(--ku-bg); }
[data-theme="dark"] .kr-ajuda-intro {
  background: color-mix(in srgb, var(--ku-brand) 14%, transparent);
  border-color: color-mix(in srgb, var(--ku-brand) 30%, transparent);
}
[data-theme="dark"] .kr-ajuda-passos > li::before {
  background: color-mix(in srgb, var(--ku-brand) 18%, transparent);
  border-color: color-mix(in srgb, var(--ku-brand) 34%, transparent);
  color: var(--ku-p400);
}
[data-theme="dark"] .kr-ajuda-nota {
  background: color-mix(in srgb, var(--ku-w500) 12%, transparent);
  border-color: color-mix(in srgb, var(--ku-w500) 28%, transparent);
}
[data-theme="dark"] .kr-ajuda-nota > i { color: var(--ku-w500); }
[data-theme="dark"] .kr-ajuda-sumario__link.is-ativo {
  background: color-mix(in srgb, var(--ku-brand) 18%, transparent);
  border-color: color-mix(in srgb, var(--ku-brand) 34%, transparent);
  color: var(--ku-p400);
}
[data-theme="dark"] .kr-ajuda-sumario__link.is-ativo > i { color: var(--ku-p400); }
[data-theme="dark"] .kr-ajuda-exemplo__para { color: var(--ku-w500); }
[data-theme="dark"] .kr-ajuda-regras__ic--sim {
  background: color-mix(in srgb, var(--ku-t500) 16%, transparent);
  border-color: color-mix(in srgb, var(--ku-t500) 32%, transparent);
  color: var(--ku-t500);
}
[data-theme="dark"] .kr-ajuda-regras__ic--nao {
  background: color-mix(in srgb, var(--ku-w500) 14%, transparent);
  border-color: color-mix(in srgb, var(--ku-w500) 30%, transparent);
  color: var(--ku-w500);
}

@media (max-width: 575.98px) {
  .kr-ajuda-modal .modal-body { padding: 1rem; max-height: min(80vh, 700px); }
  .kr-ajuda-modal .modal-title { font-size: 1rem; }
  .kr-ajuda-sumario { margin: -1rem -1rem 1rem; padding: .7rem 1rem; top: -1rem; }
  .kr-ajuda-secao { padding: .9rem; }
}