/* El componente común de los esquemas: lo cargan la landing, la demo y el monitor junto a conectores.js.
   Aquí solo va la mecánica (la capa de trazos, el trazo, la punta y su entrada); el color y
   el grosor los pone cada hoja con tres variables, así la landing conserva su estilo y el producto el
   suyo sin que los dos esquemas se separen. */
@property --esq-omitir { syntax: "*"; inherits: false; }
@property --esq-sale { syntax: "*"; inherits: false; }
@property --esq-entra { syntax: "*"; inherits: false; }
@property --esq-sale-x { syntax: "*"; inherits: false; }
@property --esq-sale-y { syntax: "*"; inherits: false; }
@property --esq-entra-y { syntax: "*"; inherits: false; }

[data-esquema] { position: relative; }
.esq-trazos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.esq-trazo { fill: none; stroke: var(--esq-color-trazo, currentColor); stroke-width: var(--esq-grosor, 1.5); stroke-linejoin: round; }
.esq-punta { fill: var(--esq-color-punta, currentColor); }
[data-espera] .esq-trazo { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-espera] .esq-punta { opacity: 0; }
[data-trazando] .esq-trazo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: esq-traza .5s .1s cubic-bezier(.2, .8, .2, 1) forwards; }
[data-trazando] .esq-punta { opacity: 0; animation: esq-aparece .2s .5s forwards; }
@keyframes esq-traza { to { stroke-dashoffset: 0; } }
@keyframes esq-aparece { to { opacity: 1; } }