/* ============================================ REF MODE — Overlay de referência para revisão Ativo quando tem a classe .ref-mode ============================================ */ /* Botão de toggle sempre visível */ #ref-toggle { position: fixed; bottom: 24px; left: 24px; z-index: 9999; background: #1A1A2E; color: #F0E130; font-family: monospace; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 6px 10px; border: 2px solid #F0E130; border-radius: 4px; cursor: pointer; user-select: none; box-shadow: 0 2px 8px rgba(0,0,0,0.5); transition: background 0.2s; } #ref-toggle:hover { background: #F0E130; color: #1A1A2E; } #ref-toggle.active { background: #F0E130; color: #1A1A2E; } /* Etiquetas base */ body.ref-mode [data-ref]::before { content: attr(data-ref); position: absolute; top: 4px; left: 4px; z-index: 1000; font-family: monospace; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 3px; pointer-events: none; white-space: nowrap; } /* Seções — etiqueta amarela escura */ body.ref-mode [data-ref^="sec"]::before, body.ref-mode [data-ref^="hdr"]::before, body.ref-mode [data-ref^="ftr"]::before { background: #1A1A2E; color: #F0E130; font-size: 11px; padding: 4px 7px; top: 0; left: 0; border-radius: 0 0 4px 0; } /* Imagens — etiqueta ciano */ body.ref-mode [data-ref^="img"]::before { background: #00BCD4; color: #000; } /* Textos — etiqueta verde */ body.ref-mode [data-ref^="txt"]::before { background: #4CAF50; color: #fff; } /* Botões — etiqueta laranja */ body.ref-mode [data-ref^="btn"]::before { background: #FF6B35; color: #fff; } /* Links de nav — etiqueta roxo */ body.ref-mode [data-ref^="nav"]::before, body.ref-mode [data-ref^="lnk"]::before { background: #9C27B0; color: #fff; } /* Borda de destaque nos elementos marcados */ body.ref-mode [data-ref] { position: relative; outline: 1px dashed rgba(240, 225, 48, 0.35); } body.ref-mode [data-ref^="sec"], body.ref-mode [data-ref^="hdr"], body.ref-mode [data-ref^="ftr"] { outline: 2px dashed rgba(240, 225, 48, 0.5); } body.ref-mode [data-ref^="img"] { outline-color: rgba(0, 188, 212, 0.6); } body.ref-mode [data-ref^="txt"] { outline-color: rgba(76, 175, 80, 0.5); } body.ref-mode [data-ref^="btn"] { outline-color: rgba(255, 107, 53, 0.7); }