/* ===== ChatLog · passo a passo e convite de instalar =====
 *
 * Usa as variáveis de cor que já existem no index.html, então o modo escuro vem de
 * graça. Cor da marca solta só onde o verde e o ouro precisam aparecer iguais nos
 * dois temas.
 *
 * Empilhamento, para não brigar com o que já existe:
 *   .modal-overlay do sistema  1000
 *   convite de instalar        8500
 *   passo a passo              9000
 *   .cl-modal                 99998
 *   tela de login             99999
 */

/* ---------- passo a passo ---------- */

.cl-tut-fundo{
  position:fixed; inset:0; z-index:9000;
  background:rgba(12,23,18,.5);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:cl-surge .18s ease-out;
}
html.dark .cl-tut-fundo{ background:rgba(0,0,0,.62); }

.cl-tut-caixa{
  background:var(--bg-surface,#fff);
  border-radius:14px;
  width:400px; max-width:100%;
  max-height:88vh; overflow-y:auto;
  padding:26px 26px 20px;
  box-shadow:0 24px 60px rgba(12,23,18,.28);
  animation:cl-sobe .22s ease-out;
}

.cl-tut-passo{
  font-family:'Inter',system-ui,sans-serif;
  font-size:10.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:#C89B3C; margin-bottom:9px;
}

.cl-tut-caixa h3{
  font-family:'Sora','Inter',system-ui,sans-serif;
  font-size:19px; font-weight:700; line-height:1.3;
  color:var(--text-primary,#0C1712);
  margin:0 0 9px;
}
html.dark .cl-tut-caixa h3{ color:#f0f0f0; }

.cl-tut-caixa p{
  font-family:'Inter',system-ui,sans-serif;
  font-size:14px; line-height:1.65;
  color:var(--text-secondary,#5F5E5A);
  margin:0;
}

.cl-tut-pontos{ display:flex; gap:6px; margin:18px 0 0; }
.cl-tut-ponto{
  width:6px; height:6px; border-radius:50%;
  background:var(--border-thin,#ececec); transition:background .15s;
}
.cl-tut-ponto.aceso{ background:#0F4435; }
html.dark .cl-tut-ponto.aceso{ background:#C89B3C; }

.cl-tut-rodape{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:14px;
}

.cl-tut-pular{
  background:none; border:none; padding:6px 0; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:13px;
  color:var(--text-tertiary,#888780); text-decoration:underline;
}
.cl-tut-pular:hover{ color:var(--text-primary,#0C1712); }

.cl-tut-botoes{ display:flex; gap:9px; }

.cl-tut-btn{
  padding:9px 18px; border-radius:9px; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:13.5px; font-weight:600;
  border:1px solid var(--border-thin,#ececec);
  background:var(--bg-surface,#fff); color:var(--text-secondary,#5F5E5A);
  transition:all .15s;
}
.cl-tut-btn:hover{ background:var(--bg-soft,#faf9f5); }
.cl-tut-btn.prim{ background:#0F4435; border-color:#0F4435; color:#fff; }
.cl-tut-btn.prim:hover{ background:#146049; }

/* ---------- botão de reabrir, na barra de cima ---------- */

/* Segue o desenho do botão de tema, que fica ao lado. */
.cl-ajuda-btn{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; padding:5px 8px;
  border:1px solid var(--border-thin,#ececec); border-radius:6px;
  background:transparent; color:var(--text-secondary,#5F5E5A);
  cursor:pointer; font-family:inherit; transition:all .15s;
}
.cl-ajuda-btn:hover{ background:var(--bg-soft,#faf9f5); color:#0F4435; }
html.dark .cl-ajuda-btn:hover{ color:#C89B3C; }

/* ---------- convite de instalar ---------- */

.cl-inst{
  position:fixed; right:20px; bottom:20px; z-index:8500;
  width:340px; max-width:calc(100vw - 32px);
  background:var(--bg-surface,#fff);
  border:1px solid var(--border-thin,#ececec);
  border-radius:14px; padding:22px 22px 18px;
  box-shadow:0 18px 48px rgba(12,23,18,.22);
  text-align:center;
  animation:cl-sobe .26s ease-out;
}

.cl-inst svg{ margin:0 auto 12px; display:block; }

.cl-inst b{
  display:block;
  font-family:'Sora','Inter',system-ui,sans-serif;
  font-size:16px; font-weight:700;
  color:var(--text-primary,#0C1712);
  margin-bottom:7px;
}
html.dark .cl-inst b{ color:#f0f0f0; }

.cl-inst p{
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px; line-height:1.6;
  color:var(--text-secondary,#5F5E5A);
  margin:0 0 14px;
}
.cl-inst p strong{ color:var(--text-primary,#0C1712); font-weight:600; }
html.dark .cl-inst p strong{ color:#f0f0f0; }

.cl-inst button{
  display:block; width:100%; padding:11px;
  border-radius:9px; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:14px; font-weight:600;
  border:1px solid var(--border-thin,#ececec);
  background:var(--bg-surface,#fff); color:var(--text-secondary,#5F5E5A);
  transition:all .15s;
}
.cl-inst button:hover{ background:var(--bg-soft,#faf9f5); }
.cl-inst button.prim{
  background:#0F4435; border-color:#0F4435; color:#fff; margin-bottom:8px;
}
.cl-inst button.prim:hover{ background:#146049; }

/* ---------- movimento ---------- */

@keyframes cl-surge{ from{opacity:0} to{opacity:1} }
@keyframes cl-sobe{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .cl-tut-fundo,.cl-tut-caixa,.cl-inst{ animation:none; }
}

/* ---------- celular ---------- */

@media (max-width:768px){
  .cl-tut-caixa{ padding:22px 20px 18px; }
  .cl-tut-caixa h3{ font-size:17.5px; }
  .cl-tut-rodape{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
  .cl-tut-botoes{ gap:8px; }
  .cl-tut-botoes .cl-tut-btn{ flex:1; }
  .cl-tut-pular{ text-align:center; }
  .cl-inst{ right:12px; left:12px; bottom:12px; width:auto; }
}