/* =========================================================
   OfertaFlow V7.6 - Ajuda contextual limpa e neutra
   ========================================================= */

/* Aviso discreto e neutro */
.of-help-guide{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  padding:7px 10px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(148,163,184,.06);
  color:var(--muted);
  border-radius:10px;
  font-size:9.5px;
  line-height:1.35;
}
.of-help-guide .of-help-guide-dot{
  width:18px;height:18px;border-radius:999px;display:grid;place-items:center;
  flex:none;
  background:#d1d5db;
  border:1px solid #9ca3af;
  color:#475569;
  font-weight:950;
  font-size:11px;
}
.auth-card .of-help-guide{
  margin:10px 0 2px;width:100%;box-sizing:border-box;
}

/* Bolinha ? em cinza-claro, sem parecer erro/alerta */
.of-help-dot{
  --help-size:17px;
  width:var(--help-size);
  height:var(--help-size);
  min-width:var(--help-size);
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  border:1px solid #9ca3af;
  background:#e5e7eb;
  color:#475569;
  font-size:10px;
  font-weight:950;
  line-height:1;
  font-family:Arial,sans-serif;
  cursor:help;
  user-select:none;
  vertical-align:middle;
  margin-left:6px;
  box-shadow:0 2px 7px rgba(0,0,0,.10);
  transition:.14s ease;
  z-index:3;
}
.of-help-dot:hover,
.of-help-dot.help-open{
  background:#f3f4f6;
  border-color:#cbd5e1;
  color:#334155;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,23,42,.16);
}

label>.of-help-dot,
summary>.of-help-dot{
  margin-left:5px;
}
button>.of-help-dot,
a>.of-help-dot{
  --help-size:15px;
  margin-left:7px;
  background:#e5e7eb;
  border-color:#9ca3af;
  color:#475569;
}

/* Tooltip também neutro */
#ofHelpPopover{
  position:fixed;
  z-index:999999;
  display:none;
  max-width:min(330px,calc(100vw - 24px));
  padding:10px 12px;
  border-radius:11px;
  border:1px solid rgba(148,163,184,.46);
  background:color-mix(in srgb,var(--surface) 96%,#000 4%);
  color:var(--text);
  font-size:11px;
  line-height:1.48;
  box-shadow:0 16px 42px rgba(0,0,0,.30);
  pointer-events:none;
}
#ofHelpPopover.show{display:block}
#ofHelpPopover:before{
  content:"?";
  display:inline-grid;
  place-items:center;
  width:17px;
  height:17px;
  margin-right:7px;
  border-radius:999px;
  background:#e5e7eb;
  border:1px solid #9ca3af;
  color:#475569;
  font-size:10px;
  font-weight:950;
  vertical-align:top;
}
#ofHelpPopover .of-help-text{display:inline}

@media(max-width:700px){
  .of-help-guide{font-size:9px}
  #ofHelpPopover{font-size:11px;max-width:calc(100vw - 20px)}
}