/* GestionYa - mockups vivos (capa creada por motion-ui.js)
   Solo transform/opacity para animar; los colores salen de la paleta --u-* de cada mockup.
   Se carga despues de site.css. */

.ui--live { position: relative; }

/* Escritura (typewriter) */
.ui-type { white-space: pre-wrap; }
.ui-caret {
  display: inline-block; width: 1.5px; height: 1em; margin-left: 1px;
  vertical-align: -0.15em; background: var(--u-accent);
  opacity: 0;
}
.ui-caret.is-on { animation: ui-blink 0.9s steps(1) infinite; }
@keyframes ui-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Cronometro dentro del "Atendiendo ahora" */
.ui-timer { font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; }

/* Mini notificacion flotante sobre el mockup */
.ui-toast {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px 7px 9px; border-radius: 10px;
  background: var(--u-panel); color: var(--u-text);
  border: 1px solid var(--u-line);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.35);
  font-size: 11px; font-weight: 700; letter-spacing: -0.01em;
  pointer-events: none; opacity: 0; will-change: transform, opacity;
}
.ui-toast i { font-size: 14px; color: var(--u-accent); }
.ui-toast--banner { left: 10px; right: 10px; justify-content: center; }

/* Puntero simulado (no es el cursor real) y su ripple */
.ui-pointer {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(20, 21, 15, 0.72); border: 2px solid #fff;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.45);
  pointer-events: none; opacity: 0; will-change: transform, opacity;
}
.ui-ripple {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; opacity: 0;
  pointer-events: none; will-change: transform, opacity;
}

/* Globo de chat sobre el boton de WhatsApp */
.ui-chat {
  position: absolute; right: 12px; bottom: 48px; z-index: 3;
  max-width: 170px; padding: 7px 10px;
  border-radius: 10px 10px 2px 10px;
  background: var(--u-panel); color: var(--u-text);
  border: 1px solid var(--u-line);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.35);
  font-size: 10.5px; font-weight: 600; line-height: 1.35;
  pointer-events: none; opacity: 0; will-change: transform, opacity;
}
.ui-chat small { display: block; font-size: 9px; color: var(--u-soft); font-weight: 600; margin-top: 2px; }

/* Boton "Enviar": transicion suave del contenido */
.ui__now > strong { transition: opacity 0.25s var(--ease); }
.ui-sent { display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.ui-sent i { font-size: 14px; }

/* Flujo: los iconos cambian de estado con transicion */
.flow__icon { transition: background-color 0.25s var(--ease), color 0.25s var(--ease); }
.flow__step .ph-check { display: inline-block; will-change: transform, opacity; }

/* Todo apagado con reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ui-caret { animation: none; }
  .ui-toast, .ui-pointer, .ui-ripple, .ui-chat { display: none; }
}