WIP: mejoras de fidelidad, editor, lógica y suite e2e (checkpoint tras reinicio)
This commit is contained in:
urieljareth
+357
-12
@@ -12,7 +12,7 @@
|
||||
--ed-panel: #ffffff;
|
||||
--ed-fondo-suave: #f0f4f3;
|
||||
--ed-texto: #111b21;
|
||||
--ed-texto-suave: #667781;
|
||||
--ed-texto-suave: #4e5f69;
|
||||
--ed-borde: #d9e2e3;
|
||||
--ed-acento: var(--wam-acento, #00a884);
|
||||
--ed-acento-hondo: #008069;
|
||||
@@ -105,7 +105,8 @@ body[data-tema="oscuro"] #panel-editor {
|
||||
font-size: 12px;
|
||||
color: var(--wam-texto, var(--ed-texto-suave));
|
||||
}
|
||||
.ed-campo-e { font-size: 11.5px; }
|
||||
.ed-campo-e { font-size: 12px; font-weight: 500; color: var(--wam-texto-suave, var(--ed-texto-suave)); cursor: default; }
|
||||
label.ed-campo-e { cursor: pointer; }
|
||||
|
||||
.ed-input {
|
||||
width: 100%;
|
||||
@@ -173,15 +174,15 @@ textarea.ed-input { resize: vertical; min-height: 46px; }
|
||||
}
|
||||
|
||||
.ed-btn-primario {
|
||||
background: var(--ed-acento);
|
||||
border-color: var(--ed-acento);
|
||||
background: var(--wam-primario, #008069);
|
||||
border-color: var(--wam-primario, #008069);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ed-btn-primario:hover {
|
||||
background: var(--ed-acento-hondo);
|
||||
border-color: var(--ed-acento-hondo);
|
||||
background: var(--wam-primario-hover, #006e5a);
|
||||
border-color: var(--wam-primario-hover, #006e5a);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -304,9 +305,9 @@ textarea.ed-input { resize: vertical; min-height: 46px; }
|
||||
.ed-dir {
|
||||
flex: 0 0 auto;
|
||||
padding: 1px 6px;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.4px;
|
||||
letter-spacing: 0.3px;
|
||||
text-transform: uppercase;
|
||||
border-radius: 999px;
|
||||
}
|
||||
@@ -322,9 +323,9 @@ textarea.ed-input { resize: vertical; min-height: 46px; }
|
||||
.ed-badge {
|
||||
flex: 0 0 auto;
|
||||
padding: 1px 6px;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4px;
|
||||
letter-spacing: 0.3px;
|
||||
text-transform: uppercase;
|
||||
color: var(--wam-texto, var(--ed-texto-suave));
|
||||
border: 1px solid var(--wam-borde, var(--ed-borde));
|
||||
@@ -382,7 +383,7 @@ textarea.ed-input { resize: vertical; min-height: 46px; }
|
||||
}
|
||||
.ed-sub-titulo {
|
||||
flex: 1;
|
||||
font-size: 10.5px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: uppercase;
|
||||
@@ -552,7 +553,7 @@ textarea.ed-input { resize: vertical; min-height: 46px; }
|
||||
/* ---------- Contadores de caracteres ---------- */
|
||||
.ed-contador {
|
||||
justify-self: end;
|
||||
font-size: 10.5px;
|
||||
font-size: 11px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--wam-texto-suave, var(--ed-texto-suave));
|
||||
transition: color 0.12s ease;
|
||||
@@ -782,3 +783,347 @@ textarea.ed-input { resize: vertical; min-height: 46px; }
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
UX v2: paleta compacta por grupos, cabecera de «Cuenta» plegable,
|
||||
chips de avisos y flujos, control segmentado, toasts, enlace con la
|
||||
vista previa, estados vacíos y destinos táctiles.
|
||||
===================================================================== */
|
||||
|
||||
/* ---------- Paleta: una fila por grupo (Básicos / Medios / Interactivos) ---------- */
|
||||
#panel-editor .wam-alta { display: grid; gap: 8px; }
|
||||
#panel-editor .wam-alta .wam-btn-anadir { width: auto; }
|
||||
.ed-paleta {
|
||||
display: grid;
|
||||
grid-template-columns: none;
|
||||
gap: 6px;
|
||||
}
|
||||
.ed-paleta-grupo {
|
||||
display: grid;
|
||||
grid-template-columns: 84px minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 5px;
|
||||
}
|
||||
.ed-paleta-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
.ed-paleta-titulo {
|
||||
padding-top: 7px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--wam-texto-suave, var(--ed-texto-suave));
|
||||
}
|
||||
.ed-paleta .ed-tipo-card {
|
||||
flex: 0 0 auto;
|
||||
gap: 5px;
|
||||
padding: 5px 9px 5px 7px;
|
||||
border-radius: 999px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.ed-paleta .ed-tipo-card .ed-tipo-card-e { flex: none; overflow: visible; }
|
||||
.ed-paleta .ed-tipo-card.ed-seleccionada {
|
||||
/* último tipo usado: marca sutil (la paleta añade al hacer clic) */
|
||||
background: var(--wam-panel, var(--ed-panel));
|
||||
color: var(--wam-texto, var(--ed-texto));
|
||||
font-weight: 500;
|
||||
box-shadow: none;
|
||||
border-color: var(--ed-seleccion);
|
||||
}
|
||||
.ed-paleta .ed-tipo-card:hover { background: var(--ed-seleccion-suave); }
|
||||
.ed-alta-pie {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px 10px;
|
||||
}
|
||||
.ed-destino-alta {
|
||||
font-size: 12px;
|
||||
color: var(--wam-texto-suave, var(--ed-texto-suave));
|
||||
}
|
||||
.ed-enlace {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font: inherit;
|
||||
color: var(--ed-seleccion);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ---------- Bloque «Cuenta» como <details> ---------- */
|
||||
.ed-bloque-cuenta > .ed-cuenta-sumario {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: -4px 0;
|
||||
padding: 4px 0;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.ed-bloque-cuenta > .ed-cuenta-sumario::-webkit-details-marker { display: none; }
|
||||
.ed-bloque-cuenta > .ed-cuenta-sumario::before {
|
||||
content: "";
|
||||
flex: none;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin: 0 2px 0 3px;
|
||||
border-right: 2px solid var(--wam-texto-suave, var(--ed-texto-suave));
|
||||
border-bottom: 2px solid var(--wam-texto-suave, var(--ed-texto-suave));
|
||||
transform: rotate(-45deg);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
.ed-bloque-cuenta[open] > .ed-cuenta-sumario::before { transform: rotate(45deg); }
|
||||
.ed-bloque-cuenta > .ed-cuenta-sumario .wam-bloque-titulo { margin: 0; }
|
||||
.ed-bloque-cuenta[open] > .ed-cuenta-sumario { margin-bottom: 12px; }
|
||||
.ed-bloque-cuenta:not([open]) { padding-bottom: 16px; }
|
||||
.ed-cuenta-resumen {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 13px;
|
||||
color: var(--wam-texto, var(--ed-texto));
|
||||
}
|
||||
.ed-bloque-cuenta[open] .ed-cuenta-resumen { display: none; }
|
||||
.ed-cuenta-mini {
|
||||
flex: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--wam-borde, var(--ed-borde));
|
||||
}
|
||||
.ed-cuenta-mini-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
|
||||
.ed-cuenta-mini-ok {
|
||||
flex: none;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #1d9bf0;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ---------- Cabecera de la sección Mensajes ---------- */
|
||||
.ed-bloque-cab {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
.ed-avisos-global {
|
||||
padding: 3px 9px;
|
||||
border: 1px solid rgba(180, 83, 9, 0.35);
|
||||
border-radius: 999px;
|
||||
background: rgba(180, 83, 9, 0.08);
|
||||
color: var(--ed-ambar);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ed-avisos-global:hover { background: rgba(180, 83, 9, 0.16); }
|
||||
.ed-lista-herr {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ---------- Cabecera de tarjeta: chips y acciones ---------- */
|
||||
.ed-chips { flex: 0 0 auto; display: inline-flex; gap: 4px; }
|
||||
.ed-chips:empty { display: none; }
|
||||
.ed-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 1px 6px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.ed-chip-aviso { color: var(--ed-ambar); background: rgba(180, 83, 9, 0.12); }
|
||||
.ed-chip-flujo { color: var(--ed-acento-hondo); background: var(--ed-acento-suave); }
|
||||
.ed-chip-flujo-incompleto { color: var(--ed-entrada); background: var(--ed-entrada-suave); }
|
||||
.ed-num-resp { font-size: 12px; }
|
||||
|
||||
/* Las flechas ↑/↓ se muestran al abrir, al pasar el ratón o con el foco
|
||||
dentro (siguen en el orden de Tab: el foco las hace visibles) */
|
||||
.ed-tarjeta { position: relative; }
|
||||
.ed-tarjeta:not(.ed-abierta):not(:hover):not(:focus-within) > .ed-tarjeta-cab .ed-mov {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.ed-acciones .ed-btn-mini { min-width: 26px; min-height: 26px; padding: 2px 6px; }
|
||||
.ed-btn-mini:disabled { opacity: 0.35; }
|
||||
|
||||
/* ---------- Caja de avisos dentro de la tarjeta ---------- */
|
||||
.ed-validacion {
|
||||
padding: 8px 10px;
|
||||
border: 1px solid rgba(180, 83, 9, 0.3);
|
||||
border-radius: 8px;
|
||||
background: rgba(180, 83, 9, 0.07);
|
||||
color: var(--wam-texto, var(--ed-texto));
|
||||
font-size: 12px;
|
||||
}
|
||||
.ed-validacion-titulo { margin: 0 0 3px; font-weight: 700; color: var(--ed-ambar); }
|
||||
.ed-validacion ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
|
||||
|
||||
/* ---------- Respuestas encadenadas ---------- */
|
||||
.ed-resps { border-left: 3px solid var(--ed-acento); }
|
||||
.ed-resps.ed-resps-vacias { border-left-color: var(--ed-entrada); }
|
||||
.ed-resps-vacias .ed-nota { color: var(--ed-entrada); }
|
||||
|
||||
/* ---------- Control segmentado Entrada / Salida ---------- */
|
||||
.ed-comunes > .ed-campo-seg { flex: 0 0 auto; }
|
||||
.ed-comunes > .ed-campo-hora { flex: 0 1 84px; }
|
||||
.ed-seg {
|
||||
display: inline-flex;
|
||||
padding: 2px;
|
||||
border: 1px solid var(--wam-borde, var(--ed-borde));
|
||||
border-radius: 8px;
|
||||
background: var(--ed-fondo-suave);
|
||||
}
|
||||
.ed-seg-op { position: relative; cursor: pointer; }
|
||||
.ed-seg-op input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ed-seg-op span {
|
||||
display: inline-block;
|
||||
padding: 3px 11px;
|
||||
border-radius: 6px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--wam-texto-suave, var(--ed-texto-suave));
|
||||
transition: background-color 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
.ed-seg-op input:checked + span {
|
||||
background: var(--wam-panel, var(--ed-panel));
|
||||
color: var(--wam-texto, var(--ed-texto));
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 32, 0.18);
|
||||
}
|
||||
.ed-seg-op input:focus-visible + span { outline: 2px solid var(--ed-seleccion); outline-offset: 1px; }
|
||||
|
||||
/* ---------- Estado vacío con acciones ---------- */
|
||||
.ed-vacio { display: grid; gap: 8px; justify-items: center; padding: 20px 14px; }
|
||||
.ed-vacio p { margin: 0; }
|
||||
.ed-vacio-titulo { font-weight: 700; font-size: 13.5px; color: var(--wam-texto, var(--ed-texto)); }
|
||||
.ed-vacio-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
|
||||
|
||||
/* ---------- Toasts (fuera del scroll del panel) ---------- */
|
||||
.ed-toasts {
|
||||
position: fixed;
|
||||
left: 16px;
|
||||
bottom: 16px;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
max-width: min(440px, calc(100vw - 32px));
|
||||
pointer-events: none;
|
||||
}
|
||||
.ed-toast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 8px 10px 14px;
|
||||
border-radius: 12px;
|
||||
background: #1f2c33;
|
||||
color: #fff;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.4;
|
||||
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
|
||||
pointer-events: auto;
|
||||
animation: ed-toast-in 0.18s ease-out;
|
||||
}
|
||||
.ed-toast-error { background: #a8322a; }
|
||||
.ed-toast-txt { flex: 1; min-width: 0; }
|
||||
.ed-toast-accion {
|
||||
flex: none;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.45);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ed-toast-accion:hover { background: rgba(255, 255, 255, 0.14); }
|
||||
.ed-toast-cerrar {
|
||||
flex: none;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ed-toast-cerrar:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
|
||||
.ed-toast button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
|
||||
@keyframes ed-toast-in {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.ed-toasts { bottom: calc(var(--wam-tabs-alto, 58px) + 70px); }
|
||||
}
|
||||
|
||||
/* ---------- Enlace con la vista previa ---------- */
|
||||
#chat-cuerpo .wa-row.ed-resaltado {
|
||||
outline: 2px solid var(--wam-acento, #00a884);
|
||||
outline-offset: 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
body.presentacion #chat-cuerpo .wa-row.ed-resaltado { outline: 0; }
|
||||
.ed-tarjeta.ed-destello { animation: ed-destello 1.2s ease-out; }
|
||||
@keyframes ed-destello {
|
||||
0% { box-shadow: 0 0 0 3px var(--ed-acento); }
|
||||
100% { box-shadow: 0 0 0 0 transparent; }
|
||||
}
|
||||
|
||||
/* ---------- Destinos táctiles ---------- */
|
||||
@media (pointer: coarse) {
|
||||
.ed-btn-mini,
|
||||
.ed-acciones .ed-btn-mini { min-width: 32px; min-height: 32px; }
|
||||
.ed-fmt-btn { min-width: 32px; height: 32px; }
|
||||
.ed-paleta .ed-tipo-card { padding: 8px 11px 8px 9px; }
|
||||
.ed-seg-op span { padding: 6px 14px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
/* cabecera de tarjeta: la dirección se lee en el color del número */
|
||||
.ed-tarjeta-cab .ed-dir { display: none; }
|
||||
.ed-num.ed-num-in { color: var(--ed-entrada); background: var(--ed-entrada-suave); }
|
||||
.ed-paleta-grupo { grid-template-columns: 1fr; gap: 4px; }
|
||||
.ed-paleta-titulo { padding-top: 0; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ed-toast, .ed-tarjeta.ed-destello { animation: none; }
|
||||
.ed-bloque-cuenta > .ed-cuenta-sumario::before, .ed-seg-op span { transition: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user