Documento
Propuesta de rediseño
El nuevo inicio debe cargar en menos de dos segundos. Así el contenido principal aparece antes.
El resto de enlaces irán subrayados.
- SSarahace 5 min
¿Y si dejamos el carrusel solo en móvil?
- LLeohace 2 min
Lo probamos en la próxima versión.
- TTúahora
- LLeohace 1 h
Revisemos el contraste del color nuevo.
- TTúahora
Comentario resuelto
Comentario anclado al margen
Pulsas una frase resaltada y en el margen aparece su hilo de comentarios unido por una línea, con respuesta y botón de resolver.
Ajustes
Código
<div class="uvq13-cmt"><div class="doc"><p class="kk">Documento</p><p class="h" tabindex="-1">Propuesta de rediseño</p><p class="tx"><span>El nuevo inicio debe cargar en menos de dos segundos.</span> <button type="button" class="hl" aria-expanded="false" aria-controls="uvq13-cmt-0">Proponemos quitar el carrusel y dejar una sola imagen fija.</button> <span>Así el contenido principal aparece antes.</span></p><p class="tx"><button type="button" class="hl" aria-expanded="false" aria-controls="uvq13-cmt-1">Los botones tendrán un único color de acción.</button> <span>El resto de enlaces irán subrayados.</span></p></div><span class="bg" aria-hidden="true">2</span><span class="bg" aria-hidden="true">1</span><svg class="ln" aria-hidden="true"><path/></svg><section class="cm" id="uvq13-cmt-0" role="dialog" aria-label="Comentarios"><ul><li><span class="av" style="--c:#db2777">S</span><div><b>Sara</b><small>hace 5 min</small><p>¿Y si dejamos el carrusel solo en móvil?</p></div></li><li><span class="av" style="--c:#0284c7">L</span><div><b>Leo</b><small>hace 2 min</small><p>Lo probamos en la próxima versión.</p></div></li><li class="tpl" hidden><span class="av" style="--c:#64748b">T</span><div><b>Tú</b><small>ahora</small><p></p></div></li></ul><div class="rp"><input placeholder="Responder…" aria-label="Responder" autocomplete="off"><button type="button" class="sd" aria-label="Enviar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12l16-8-6 16-2.5-6.5z"/></svg></button></div><button type="button" class="rs"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Resolver</span></button></section><section class="cm" id="uvq13-cmt-1" role="dialog" aria-label="Comentarios"><ul><li><span class="av" style="--c:#0284c7">L</span><div><b>Leo</b><small>hace 1 h</small><p>Revisemos el contraste del color nuevo.</p></div></li><li class="tpl" hidden><span class="av" style="--c:#64748b">T</span><div><b>Tú</b><small>ahora</small><p></p></div></li></ul><div class="rp"><input placeholder="Responder…" aria-label="Responder" autocomplete="off"><button type="button" class="sd" aria-label="Enviar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12l16-8-6 16-2.5-6.5z"/></svg></button></div><button type="button" class="rs"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Resolver</span></button></section><p class="toast" aria-live="polite"><span>Comentario resuelto</span></p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Overlays
Ver todos: OverlaysDónde usarlo
Los documentos compartidos dejan la conversación junto al texto, y este overlay recrea esa disposición. Las frases resaltadas llevan un contador en el margen y, al abrir una, su hilo se desliza al lado, alineado con la línea y unido por una curva discontinua. Encaja en editores, herramientas de revisión, contratos y comentarios de diseño.
El color principal es el del resaltado y la línea, el secundario el de contadores y acciones. Envuelve cualquier frase en un botón resaltado que apunte a su hilo, y Escape o un clic fuera cierran la tarjeta y devuelven el foco al texto.