/* Demos interactivas. Comparten armazón: barra de etiqueta honesta + cuerpo + registro.
   Sin dependencias. Los colores salen de los tokens de base.css. */

.demo{border:1px solid var(--border);border-radius:12px;background:var(--surface);
  margin:var(--gap-m) 0;overflow:hidden;max-width:none;}

/* barra superior: qué es esto, sin ambigüedad */
.demo-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--border);background:var(--bg);}
.demo-barra .pt{width:7px;height:7px;border-radius:50%;background:var(--status-running);
  flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--status-running) 18%,transparent);}
.demo-etq{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);}
.demo-etq b{color:var(--text);font-weight:700;}
.demo-reset{margin-left:auto;font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:none;
  border:1px solid var(--border);border-radius:5px;padding:5px 9px;cursor:pointer;}
.demo-reset:hover{color:var(--accent);border-color:var(--accent);}

.demo-cuerpo{display:grid;gap:0;}
@media(min-width:860px){.demo--dos .demo-cuerpo{grid-template-columns:1fr 300px;}}

/* ── registro lateral, estilo bitácora ── */
.demo-log{border-top:1px solid var(--border);background:var(--bg);
  padding:12px 14px;font-family:var(--font-mono);font-size:10.5px;line-height:1.65;
  max-height:230px;overflow-y:auto;overscroll-behavior:contain;}
@media(min-width:860px){.demo--dos .demo-log{border-top:0;border-left:1px solid var(--border);
  max-height:none;}}
.demo-log h4{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:0 0 9px;font-weight:600;font-family:var(--font-mono);}
.demo-log ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.demo-log li{display:grid;grid-template-columns:44px 1fr;gap:9px;color:var(--muted);
  animation:demo-in .22s ease-out;}
.demo-log .t{color:var(--muted);opacity:.6;font-variant-numeric:tabular-nums;}
.demo-log .ok{color:var(--accent);}
.demo-log .no{color:var(--danger);}
.demo-log .wa{color:var(--accent-2);}
.demo-log .vacio{color:var(--muted);opacity:.55;grid-column:1/-1;}
@keyframes demo-in{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}

/* ── controles ── */
.demo-ctrl{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;
  border-top:1px solid var(--border);background:var(--bg);}
.demo-btn{font-family:var(--font-display);font-size:13px;font-weight:600;
  color:var(--text);background:var(--surface);border:1px solid var(--border);
  border-radius:7px;padding:8px 13px;cursor:pointer;transition:border-color .12s,color .12s;}
.demo-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.demo-btn:disabled{opacity:.45;cursor:default;}
.demo-btn--no:hover:not(:disabled){border-color:var(--danger);color:var(--danger);}

/* deslizador del TTL */
.demo-ttl{display:flex;align-items:center;gap:11px;flex:1 1 260px;min-width:230px;}
.demo-ttl label{font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.demo-ttl input[type=range]{flex:1;min-width:90px;accent-color:var(--accent);}
.demo-ttl output{font-family:var(--font-mono);font-size:12px;font-weight:700;
  color:var(--text);font-variant-numeric:tabular-nums;min-width:44px;text-align:right;}
.demo-ttl output[data-vence=""]{color:var(--danger);}

/* ── el chat ── */
.chat{display:flex;flex-direction:column;height:clamp(360px,58vh,470px);}
.chat-hilo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;
  display:flex;flex-direction:column;gap:9px;}
.chat-msg{max-width:82%;padding:9px 12px;border-radius:12px;font-size:14.5px;
  line-height:1.5;animation:demo-in .2s ease-out;white-space:pre-wrap;}
.chat-msg b{font-weight:650;}
.chat-msg--bot{align-self:flex-start;background:var(--bg);border:1px solid var(--border);
  border-bottom-left-radius:4px;color:var(--text);}
.chat-msg--yo{align-self:flex-end;background:var(--accent);color:var(--cta-text);
  border-bottom-right-radius:4px;}
.chat-hora{font-family:var(--font-mono);font-size:9px;opacity:.55;margin-top:4px;display:block;}
.chat-esc{align-self:flex-start;display:flex;gap:4px;padding:11px 13px;background:var(--bg);
  border:1px solid var(--border);border-radius:12px;border-bottom-left-radius:4px;}
.chat-esc i{width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.5;
  animation:chat-pt 1.1s infinite;}
.chat-esc i:nth-child(2){animation-delay:.16s;}
.chat-esc i:nth-child(3){animation-delay:.32s;}
@keyframes chat-pt{0%,60%,100%{opacity:.28;transform:translateY(0);}30%{opacity:.85;transform:translateY(-2px);}}

.chat-sug{display:flex;flex-wrap:wrap;gap:7px;padding:10px 14px;border-top:1px solid var(--border);
  background:var(--bg);}
.chat-sug button{font-size:12.5px;font-family:var(--font-display);color:var(--muted);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:6px 12px;cursor:pointer;text-align:left;}
.chat-sug button:hover{color:var(--accent);border-color:var(--accent);}
.chat-sug button[data-clave]{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));}
.chat-sug .nada{font-family:var(--font-mono);font-size:10px;color:var(--muted);opacity:.6;padding:6px 0;}

/* nota al margen: lo que hay que entender de esta pantalla */
.demo-nota{border-left:2px solid var(--accent);padding:10px 0 10px 16px;margin:14px 14px 16px;
  font-size:13.5px;line-height:1.55;color:var(--muted);}
.demo-nota strong{color:var(--text);font-weight:650;}
.demo-nota[hidden]{display:none;}

/* ── la barrera ── */
.escena{padding:14px;}
.escena svg{width:100%;height:auto;display:block;overflow:visible;}
.escena .lin{stroke:var(--border);stroke-width:1.4;fill:none;}
.escena .sup{stroke:var(--muted);stroke-width:1.4;fill:none;opacity:.5;}
.escena .cja{fill:var(--surface);stroke:var(--muted);stroke-width:1.3;opacity:.9;}
.escena .rot{font-family:var(--font-mono);font-size:8.5px;font-weight:600;fill:var(--muted);
  letter-spacing:.05em;text-transform:uppercase;}
.escena .placa{font-family:var(--font-mono);font-size:8px;font-weight:700;fill:var(--text);}
.escena .carro{transition:transform .1s linear;}
.escena .brazo{transform-origin:0 0;transition:transform .55s cubic-bezier(.4,0,.2,1);}
.escena .haz{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3;opacity:.35;}
.escena .haz[data-on=""]{stroke:var(--accent);opacity:1;}
.escena .led{fill:var(--border);transition:fill .18s;}
.escena .led[data-e=ok]{fill:var(--status-running);}
.escena .led[data-e=no]{fill:var(--danger);}
.escena .led[data-e=espera]{fill:var(--status-progress);}

/* estado grande, para que se lea de lejos */
.demo-estado{display:flex;align-items:center;gap:9px;padding:0 14px 14px;}
.demo-estado .cha{font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:5px;
  border:1px solid var(--border);color:var(--muted);}
.demo-estado .cha[data-e=ok]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent);}
.demo-estado .cha[data-e=no]{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent);}
.demo-estado .cha[data-e=espera]{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2) 50%,transparent);}

/* a 350px de ancho la escena mide ~105px de alto: los rótulos necesitan cuerpo */
@media(max-width:700px){
  .escena{padding:10px 8px;}
  .escena .rot{font-size:11px;}
  .escena .placa{font-size:10.5px;}
  .demo-barra{padding:10px 12px;}
  .demo-etq{font-size:9.5px;}
  .demo-ctrl .demo-btn{flex:1 1 100%;}
  .demo-log{max-height:200px;}
}

@media (prefers-reduced-motion:reduce){
  .demo-log li,.chat-msg{animation:none;}
  .escena .brazo,.escena .carro{transition:none;}
  .chat-esc i{animation:none;opacity:.5;}
}


/* ── instancia viva ──────────────────────────────────────────────────
   Las otras dos demos son simulaciones escritas para el sitio. Esta no:
   es el software del caso corriendo de verdad, con su propia base. Por eso
   la etiqueta es distinta y por eso lleva credenciales a la vista. */
.demo-viva{border:1px solid var(--border);border-radius:12px;background:var(--surface);
  margin:var(--gap-m) 0;overflow:hidden;max-width:none;}
.demo-viva .vcuerpo{padding:clamp(18px,3vw,26px);}
.demo-viva h3{margin:0 0 10px;font-size:clamp(19px,2.2vw,24px);}
.demo-viva p{color:var(--muted);margin:0 0 14px;max-width:62ch;font-size:15px;line-height:1.6;}
.demo-viva p:last-of-type{margin-bottom:0;}

.vllaves{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px;padding:0;list-style:none;}
.vllaves li{font-family:var(--font-mono);font-size:11px;color:var(--muted);
  border:1px solid var(--border);border-radius:6px;padding:7px 10px;background:var(--bg);
  display:flex;gap:8px;align-items:baseline;}
.vllaves b{color:var(--text);font-weight:600;letter-spacing:.02em;}
.vllaves span{opacity:.75;}

.ventrar{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-size:15px;font-weight:600;background:var(--cta-bg);color:var(--cta-text);
  border-radius:8px;padding:12px 20px;text-decoration:none;}
.ventrar:hover{text-decoration:none;filter:brightness(1.06);}
.ventrar::after{content:"→";font-weight:400;}

/* la nota va DESPUES y mas especifica que `.demo-viva p`, o hereda de ella
   el cuerpo de 15px y el ancho de 62ch, que le corta el fondo a media caja */
.demo-viva p.vnota{border-top:1px solid var(--border);background:var(--bg);
  margin:0;max-width:none;padding:12px 16px;font-family:var(--font-mono);
  font-size:10.5px;line-height:1.7;color:var(--muted);}
@media(max-width:700px){
  .ventrar{width:100%;justify-content:center;}
  .vllaves li{width:100%;}
}