/* Kontas — kit de ajuda reutilizável (ícone "?", modal, Central de Ajuda).
   Baseado no padrão criado no CCT Monitor (26/10/2026), generalizado pra
   qualquer sistema. Usa variáveis com fallback pra identidade visual Kontas,
   então funciona mesmo em sistemas que não declaram --kz-* nenhuma. */

:root{
  --kz-g900: #0f3a1b;
  --kz-g800: #154d22;
  --kz-g700: #1f6b2a;
  --kz-g500: #3c8f3f;
  --kz-soft: #e8f3e3;
  --kz-line: #dbe5d4;
  --kz-muted: #5b6b57;
  --kz-bg: #fbfbf8;
}

/* botão "?" por tela */
.kz-ajuda-btn{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--kz-line,#dbe5d4); background:var(--kz-soft,#e8f3e3);
  color:var(--kz-g700,#1f6b2a); font-weight:800; font-size:13px;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  margin-left:8px; vertical-align:middle; font-family:'Inter',Arial,sans-serif;
  line-height:1;
}
.kz-ajuda-btn:hover{ filter:brightness(.97); }
.kz-ajuda-btn:focus-visible{ outline:2px solid var(--kz-g500,#3c8f3f); outline-offset:2px; }

/* modal da ajuda pontual */
.kz-ajuda-modal{
  position:fixed; inset:0; z-index:9000; background:rgba(8,30,14,.5);
  backdrop-filter:blur(2px); display:grid; place-items:center; padding:16px;
  font-family:'Inter',Arial,sans-serif;
}
.kz-ajuda-modal[hidden]{ display:none; }
.kz-ajuda-caixa{
  position:relative; background:#fff; border-radius:18px; width:min(560px,100%);
  max-height:85vh; overflow:auto; padding:24px 26px; color:var(--kz-g900,#0f3a1b);
}
.kz-ajuda-caixa h3{ margin:0 0 12px; font-size:18px; padding-right:24px; }
.kz-ajuda-caixa p{ margin:0 0 10px; font-size:13.5px; line-height:1.6; color:var(--kz-muted,#5b6b57); }
.kz-ajuda-caixa ul{ margin:0 0 10px; padding-left:18px; font-size:13.5px; line-height:1.6; color:var(--kz-muted,#5b6b57); }
.kz-ajuda-caixa li{ margin-bottom:6px; }
.kz-ajuda-caixa .kz-ajuda-aviso{ background:var(--kz-soft,#e8f3e3); border-radius:10px; padding:10px 12px; font-size:12.5px; }
.kz-ajuda-caixa .kz-ajuda-video{ display:block; margin-top:10px; border-radius:12px; overflow:hidden; border:1px solid var(--kz-line,#dbe5d4); }
.kz-ajuda-caixa .kz-lk{ display:inline-block; margin-top:4px; font-size:12.5px; color:var(--kz-g700,#1f6b2a); text-decoration:none; font-weight:600; }
.kz-ajuda-caixa .kz-lk:hover{ text-decoration:underline; }
.kz-ajuda-fechar{ position:absolute; top:16px; right:16px; border:0; background:none; font-size:16px; cursor:pointer; color:var(--kz-muted,#5b6b57); }

/* página Central de Ajuda (renderizada dentro de um container que o sistema já tem) */
.kz-central{ font-family:'Inter',Arial,sans-serif; color:var(--kz-g900,#0f3a1b); }
.kz-central-topo h1{ font-size:26px; margin:0 0 6px; }
.kz-central-topo p{ font-size:14px; color:var(--kz-muted,#5b6b57); margin:0 0 20px; max-width:760px; line-height:1.5; }

.kz-hero{
  background:linear-gradient(135deg,var(--kz-g800,#154d22),var(--kz-g700,#1f6b2a));
  border-radius:20px; padding:26px 24px; margin:14px 0 22px; color:#fff;
}
.kz-hero-eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.8; margin-bottom:6px; }
.kz-hero-titulo{ font-size:19px; margin:0 0 14px; font-weight:800; }
.kz-hero-campo{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:12px 16px; color:var(--kz-g900,#0f3a1b); }
.kz-hero-campo svg{ flex-shrink:0; opacity:.6; }
.kz-hero-campo input{ border:0; outline:0; flex:1; font-size:14px; background:none; color:inherit; font-family:inherit; }

.kz-categorias{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.kz-categorias a{
  background:var(--kz-soft,#e8f3e3); color:var(--kz-g700,#1f6b2a); border-radius:20px;
  padding:8px 16px; font-size:13px; font-weight:700; text-decoration:none; transition:filter .15s;
}
.kz-categorias a:hover{ filter:brightness(.97); }

.kz-grupo{ margin-bottom:30px; scroll-margin-top:16px; }
.kz-grupo[hidden]{ display:none; }
.kz-grupo-cab{ margin-bottom:12px; }
.kz-grupo-cab h2{ font-size:19px; margin:0 0 3px; color:var(--kz-g900,#0f3a1b); }
.kz-grupo-cab p{ font-size:13px; color:var(--kz-muted,#5b6b57); margin:0; }

.kz-card{
  background:#fff; border:1px solid var(--kz-line,#dbe5d4); border-radius:14px;
  padding:18px 20px; margin-bottom:14px;
}
.kz-card[hidden]{ display:none; }
.kz-card h3{ font-size:16px; margin:0 0 8px; }
.kz-card p, .kz-card ul{ font-size:13.5px; line-height:1.6; color:var(--kz-muted,#5b6b57); }
.kz-card ul{ padding-left:18px; margin:0 0 8px; }
.kz-card .kz-ajuda-aviso{ background:var(--kz-soft,#e8f3e3); border-radius:10px; padding:10px 12px; font-size:12.5px; margin-top:8px; }
.kz-card .kz-ajuda-video{ display:block; margin-top:10px; border-radius:12px; overflow:hidden; border:1px solid var(--kz-line,#dbe5d4); max-width:560px; }

/* tour guiado (spotlight) */
.kz-tour-luz{
  position:fixed; z-index:9100; border-radius:10px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(8,30,14,.62);
  transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease;
}
.kz-tour-caixa{
  position:fixed; z-index:9101; background:#fff; border-radius:16px; padding:18px 20px;
  width:min(320px,88vw); box-shadow:0 12px 34px rgba(8,30,14,.28);
  font-family:'Inter',Arial,sans-serif; color:var(--kz-g900,#0f3a1b);
  transition:top .25s ease,left .25s ease;
}
.kz-tour-passo{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--kz-g500,#3c8f3f); margin-bottom:6px; }
.kz-tour-caixa h4{ font-size:16px; margin:0 0 8px; }
.kz-tour-caixa p{ font-size:13.5px; line-height:1.55; color:var(--kz-muted,#5b6b57); margin:0 0 16px; }
.kz-tour-rodape{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kz-tour-pular{ background:none; border:0; color:var(--kz-muted,#5b6b57); font-size:12.5px; cursor:pointer; padding:6px 0; }
.kz-tour-botoes{ display:flex; gap:8px; }
.kz-tour-btn{
  border:0; border-radius:10px; padding:8px 16px; font-size:13px; font-weight:700;
  cursor:pointer; font-family:inherit;
}
.kz-tour-btn.kz-prim{ background:var(--kz-g800,#154d22); color:#fff; }
.kz-tour-btn.kz-prim:hover{ filter:brightness(1.08); }
.kz-tour-btn.kz-sec{ background:var(--kz-soft,#e8f3e3); color:var(--kz-g800,#154d22); }

@media (max-width: 520px){
  .kz-tour-caixa{ width:min(300px,86vw); }
}

/* ===== v2 (27/10/2026): botão do tour no quadro, botão flutuante "Ajuda", índice de telas ===== */
.kz-acoes{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--kz-line,#dbe5d4); }
.kz-acoes:empty{ display:none; }
.kz-btn-tour{
  background:var(--kz-g800,#154d22); color:#fff; border:0; border-radius:12px; padding:10px 18px;
  font-size:13.5px; font-weight:800; cursor:pointer; font-family:'Inter',Arial,sans-serif;
}
.kz-btn-tour:hover{ filter:brightness(1.1); }
.kz-card .kz-btn-tour{ margin-top:10px; }
.kz-indice{ list-style:none; padding:0 !important; margin:0 0 6px; }
.kz-indice li{ padding:8px 0; border-bottom:1px solid var(--kz-line,#dbe5d4); font-size:14px; }
.kz-indice a{ color:var(--kz-g700,#1f6b2a); font-weight:700; text-decoration:none; }
.kz-indice a:hover{ text-decoration:underline; }
.kz-tag{ background:var(--kz-soft,#e8f3e3); color:var(--kz-g700,#1f6b2a); border-radius:20px; padding:2px 9px; font-size:11px; font-weight:800; margin-left:6px; }
.kz-fab{
  position:fixed; right:18px; bottom:18px; z-index:8900; display:inline-flex; align-items:center; gap:8px;
  background:var(--kz-g800,#154d22); color:#fff; border:0; border-radius:999px; padding:9px 16px 9px 10px;
  font-family:'Inter',Arial,sans-serif; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 8px 22px rgba(8,30,14,.3);
}
.kz-fab:hover{ filter:brightness(1.1); }
.kz-fab:focus-visible{ outline:3px solid #a3e635; outline-offset:2px; }
.kz-fab-i{ width:24px; height:24px; border-radius:50%; background:#fff; color:var(--kz-g800,#154d22); display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; }
@media (max-width:520px){ .kz-fab-t{ display:none; } .kz-fab{ padding:8px; right:12px; bottom:12px; } }
@media print{ .kz-fab{ display:none; } }