/* ===========================================================================
   AJUDAS CONTEXTUAIS — ícone ⓘ + balão de dica.
   =========================================================================== */

/* Ícone de informação ⓘ */
.cs-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle;
  margin-left: 5px; padding: 0; cursor: help;
  font-size: 12px; line-height: 1;
  color: var(--text-lo, #7d8898);
  background: transparent; border: none; border-radius: 50%;
  transition: color .15s, background .15s, transform .15s;
}
.cs-info:hover, .cs-info:focus-visible {
  color: var(--accent, #00E6A0);
  background: var(--accent-soft, rgba(0,230,160,0.1));
  outline: none; transform: scale(1.1);
}
.cs-info:focus-visible { box-shadow: 0 0 0 2px var(--accent-line, rgba(0,230,160,0.4)); }

/* Balão de dica */
.cs-tooltip {
  position: absolute; z-index: 9999; pointer-events: auto;
  max-width: min(280px, calc(100vw - 24px));
  padding: 9px 12px; border-radius: 10px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12.5px; line-height: 1.45; font-weight: 400;
  color: var(--text-hi, #ECF1F8);
  background: rgba(18, 23, 31, 0.98);
  border: 1px solid var(--line-strong, #232c38);
  box-shadow: 0 10px 32px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(3px); transition: opacity .14s ease, transform .14s ease;
}
.cs-tooltip.visivel { opacity: 1; transform: translateY(0); }

/* Seta */
.cs-tooltip::after {
  content: ""; position: absolute; left: var(--seta-x, 50%);
  width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg);
  background: rgba(18, 23, 31, 0.98);
  border: 1px solid var(--line-strong, #232c38);
}
.cs-tooltip[data-seta="baixo"]::after { bottom: -5px; border-top: none; border-left: none; }
.cs-tooltip[data-seta="cima"]::after  { top: -5px; border-bottom: none; border-right: none; }

@media (max-width: 700px){
  .cs-tooltip { font-size: 13px; max-width: calc(100vw - 20px); }
  .cs-info { width: 18px; height: 18px; font-size: 13px; }
}