WIP: mejoras de fidelidad, editor, lógica y suite e2e (checkpoint tras reinicio)

2026-09-27 20:46:51 -06:00
parent dc6e31a9d7
commit 9a5f21badf
33 changed files with 7719 additions and 1129 deletions
@@ -0,0 +1,119 @@
+/* ==========================================================================
+   css/interactividad.css — dueño D (núcleo: js/interactivity.js, js/main.js)
+   Piezas que pinta la interactividad sobre el chat: cita de la respuesta
+   (quoted reply), botón ya pulsado (.usado), pulsación automática de la demo
+   (.wam-pulsando) y controles propios de #barra-movil (velocidad, reiniciar).
+   ========================================================================== */
+
+/* ---------- Cita dentro de la burbuja OUT (lista-respuesta-cita.png) ---------- */
+.wa {
+  --wa-cita-fondo: rgba(0, 0, 0, .05);
+  --wa-cita-acento: #a0763a;         /* barra + nombre, tostado de la captura */
+  --wa-cita-texto: rgba(0, 0, 0, .62);
+}
+.wa.oscuro {
+  --wa-cita-fondo: rgba(0, 0, 0, .18);
+  --wa-cita-acento: #d8a35d;
+  --wa-cita-texto: rgba(255, 255, 255, .72);
+}
+
+.wa .bubble.wa-con-cita { min-width: min(240px, 100%); }
+.wa .wa-cita {
+  display: flex;
+  align-items: stretch;
+  margin: -2px -5px 5px -3px;
+  min-height: 56px;
+  border-radius: 8px;
+  border-left: 4px solid var(--wa-cita-acento);
+  background: var(--wa-cita-fondo);
+  overflow: hidden;
+}
+.wa .wa-cita-txt {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 6px 10px 7px 9px;
+}
+.wa .wa-cita-nombre {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.3;
+  color: var(--wa-cita-acento);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wa .wa-cita-titulo {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.3;
+  color: var(--wa-cita-texto);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wa .wa-cita-extracto {
+  font-size: 15px;
+  line-height: 1.3;
+  color: var(--wa-cita-texto);
+  white-space: pre-line;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+.wa .wa-cita-cam {
+  display: inline-block;
+  vertical-align: -2px;
+  margin-right: 4px;
+  opacity: .8;
+}
+.wa .wa-cita-mini {
+  flex: none;
+  width: 56px;
+  min-height: 56px;
+  object-fit: cover;
+  display: block;
+}
+
+/* ---------- Botón ya pulsado (botones-respuesta-tras-pulsar.png) ---------- */
+.wa .qr-btn.usado,
+.wa .qr-btn.usado * {
+  color: #b0b0b0 !important;
+  fill: currentColor;
+}
+.wa .qr-btn.usado { pointer-events: none; cursor: default; }
+.wa.oscuro .qr-btn.usado,
+.wa.oscuro .qr-btn.usado * { color: #6f7b82 !important; }
+
+/* ---------- Pulsación automática de la demo (autoPulsar) ---------- */
+.wa .wam-pulsando { background: rgba(0, 0, 0, .10) !important; transition: background-color .08s ease; }
+.wa.oscuro .wam-pulsando { background: rgba(255, 255, 255, .12) !important; }
+
+/* ---------- Controles de #barra-movil ---------- */
+#barra-movil .barra-acciones {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+#btn-reiniciar,
+#sel-velocidad {
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--wam-borde, rgba(0, 0, 0, .15));
+  border-radius: 999px;
+  background: var(--wam-panel, #fff);
+  color: var(--wam-texto, #111);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+#sel-velocidad { padding: 0 8px; }
+#btn-reiniciar:hover,
+#sel-velocidad:hover { border-color: var(--wam-acento, #00a884); }
+#btn-reiniciar:focus-visible,
+#sel-velocidad:focus-visible { outline: 2px solid var(--wam-acento, #00a884); outline-offset: 2px; }