/* ========================================== TOOLTIPS DE AJUDA — componente compartilhado Usa junto com js/tooltip-ajuda.js ========================================== */ .tooltip-ajuda { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: 11px; font-weight: bold; cursor: help; flex-shrink: 0; border: none; padding: 0; } .tooltip-ajuda:hover, .tooltip-ajuda.ativo { background: #2563eb; color: white; } /* A caixa flutuante em si (criada via JS, sempre no , nunca corta) */ .tooltip-ajuda-caixa { position: fixed; max-width: 260px; background: #1e293b; color: white; font-size: 12px; font-weight: normal; line-height: 1.5; padding: 10px 12px; border-radius: 8px; z-index: 9999; pointer-events: none; text-transform: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } @media (max-width: 600px) { .tooltip-ajuda-caixa { max-width: 200px; } }