/* ==========================================================================
   ticonline | ilustración de la página «Automatizaciones con IA»
   Un chat que responde y crea el pedido, el flujo que lo mueve y las herramientas conectadas.
   ========================================================================== */

.mk-chat { left: 0; top: 0; width: 56%; }
.mk-chat__body { display: grid; gap: 3cqw; align-content: start; justify-items: start; padding: 4.6cqw; }
.mk-msg { margin: 0; max-width: 86%; padding: 2.8cqw 3.8cqw; font-size: 3.5cqw; line-height: 1.35; border-radius: 3.6cqw; }
.mk-msg--user { justify-self: end; background: var(--tile-ink); color: var(--tile); border-bottom-right-radius: 1cqw; }
.mk-bot { display: grid; justify-items: start; }
.mk-bot > * { grid-area: 1 / 1; }
.mk-msg--bot { background: #fff; border: 1px solid var(--tile-line); border-bottom-left-radius: 1cqw; }
.mk-typing { display: inline-flex; align-items: center; gap: 1cqw; align-self: start; padding: 3.2cqw 3.8cqw; background: #fff; border: 1px solid var(--tile-line); border-bottom-left-radius: 1cqw; opacity: 0; visibility: hidden; }
.mk-typing i { width: 1.8cqw; height: 1.8cqw; background: var(--tile-muted); border-radius: 50%; animation: typing 1s ease-in-out infinite; }
.mk-typing i:nth-child(2) { animation-delay: 0.15s; }
.mk-typing i:nth-child(3) { animation-delay: 0.3s; }
.mk-done { display: inline-flex; align-items: center; gap: 1.8cqw; margin: 0; padding: 1.8cqw 3.4cqw; background: var(--ok-bg); color: var(--ok); border-radius: 99px; font-size: 3.2cqw; font-weight: 500; }
.mk-done svg { width: 3.6cqw; height: 3.6cqw; }

.mk-flow { right: 0; top: 0; width: 42%; }
.mk-flow__list { display: grid; justify-items: stretch; padding: 4cqw; }
.mk-node { display: grid; gap: 0.6cqw; padding: 3cqw 3.6cqw; background: #fff; border: 1px solid var(--tile-line); border-radius: 2.8cqw; }
.mk-node b { font-size: 3.8cqw; font-weight: 500; }
.mk-node span { font-size: 3cqw; color: var(--tile-muted); }
.mk-node--ai { background: #f4f8fe; border-color: #9bb8e8; }
.mk-link { justify-self: center; width: 2px; height: 5cqw; background: var(--tile-accent); transform-origin: 50% 0; }

.mk-tools { right: 0; top: 46%; width: 42%; }
.mk-tools ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.mk-tool { display: flex; align-items: center; gap: 1.8cqw; padding: 2cqw 2.4cqw; background: rgba(248, 238, 226, 0.08); border: 1px solid rgba(248, 238, 226, 0.14); border-radius: 2.4cqw; font-size: max(0.75rem, 3cqw); white-space: nowrap; }
.mk-tool svg { flex: none; width: 4cqw; height: 4cqw; color: var(--img-accent); }

.mk-stat { left: 0; bottom: 0; width: 56%; display: flex; align-items: center; gap: 3cqw; }
.mk-stat__dot { flex: none; width: 3cqw; height: 3cqw; border-radius: 50%; background: #5fcf86; box-shadow: 0 0 0 1.2cqw rgba(95, 207, 134, 0.22); }
.mk-stat div { display: grid; gap: 0.6cqw; }
.mk-stat b { font-size: max(0.875rem, 3.6cqw); font-weight: 500; }
.mk-stat span { font-size: max(0.75rem, 2.8cqw); color: var(--img-muted); }

@media (max-width: 860px) {
  .mk-chat { width: 58%; }
  .mk-flow { width: 40%; }
  .mk-tools { left: 0; right: auto; top: 58%; width: 100%; }
  .mk-stat { display: none; }
}