/* ===== PANEL ISO 20022 · el complemento del demo en tiempo real =====
   Orden del CEO 2026-11-04 22:52: aprovechar la columna derecha vacía del
   demo con un panel VIVO y TRANSPARENTE (vidrio) sobre la familia
   ISO 20022. Se alimenta de la MISMA lectura (window.__demo): cero
   llamadas nuevas. CSS/transform solamente; respeta reduced-motion. */
.demo-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start;margin-top:14px}
.demo-layout .dcards{margin-top:0}
@media (max-width:1023px){.demo-layout{grid-template-columns:1fr}}
.iso-panel{position:relative;border-radius:20px;padding:18px 18px 14px;overflow:hidden;
 background:linear-gradient(160deg,rgba(46,139,255,.13),rgba(14,28,58,.38) 42%,rgba(47,191,90,.07));
 border:1.5px solid rgba(120,180,255,.35);
 box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.14);
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (min-width:1024px){.iso-panel{position:sticky;top:86px}}
.iso-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(420px 180px at 18% -40px,rgba(255,194,31,.14),transparent 70%)}
.iso-chip{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:#0A1122;
 background:linear-gradient(90deg,var(--gold),#FFD95E);padding:3px 10px;border-radius:999px}
.iso-panel h3{margin:10px 0 6px;font-size:19px;line-height:1.3;color:#fff}
.iso-honest{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--mut)}
.iso-honest b{color:#CFE3FF}
/* El flujo del idioma común: una luz que viaja orden → liquidación → sello → raíz */
.iso-flow{position:relative;margin:6px 0 16px;padding-top:2px}
.iso-track{position:absolute;left:12px;right:12px;top:13px;height:2px;border-radius:2px;
 background:linear-gradient(90deg,rgba(46,139,255,.25),rgba(47,191,90,.45),rgba(255,194,31,.55))}
.iso-dot{position:absolute;top:8px;left:12px;width:12px;height:12px;border-radius:50%;
 background:#fff;box-shadow:0 0 10px 3px rgba(255,194,31,.75),0 0 22px 6px rgba(46,139,255,.35);
 animation:isoViaje 6s ease-in-out infinite}
@keyframes isoViaje{0%{transform:translateX(0);opacity:0}10%{opacity:1}
 80%{transform:translateX(var(--iso-end,240px));opacity:1}
 94%{transform:translateX(var(--iso-end,240px));opacity:0}
 100%{transform:translateX(0);opacity:0}}
.iso-steps{position:relative;display:flex;justify-content:space-between;gap:4px}
.iso-step{flex:1;text-align:center;font-size:11px;line-height:1.35;color:var(--mut);padding-top:20px;position:relative}
.iso-step::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
 width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--blue)}
.iso-step:nth-child(2)::before{border-color:var(--green)}
.iso-step:nth-child(3)::before{border-color:var(--gold)}
.iso-step:nth-child(4)::before{border-color:#CFE3FF}
.iso-step b{display:block;color:#EAF2FF;font-size:12px}
.iso-step .iso-msg{color:var(--gold);font-weight:700;font-size:10.5px;letter-spacing:.03em}
/* Las seis redes en cristal, con su pulso en vivo */
.iso-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.iso-tile{appearance:none;text-align:left;cursor:pointer;width:100%;
 border:1.5px solid rgba(120,180,255,.28);border-radius:14px;padding:9px 11px;color:var(--txt);
 background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
 transition:transform .22s ease,border-color .22s ease,background .22s ease;font:inherit}
.iso-tile:hover,.iso-tile:focus-visible{transform:translateY(-2px);border-color:var(--gold)}
.iso-tile.on{border-color:var(--gold);background:linear-gradient(180deg,rgba(255,194,31,.13),rgba(255,255,255,.03))}
.iso-tile .iso-net{display:flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:#fff}
.iso-pdot{width:9px;height:9px;border-radius:50%;flex:none;background:#5B729A}
.iso-pdot.ok{background:var(--green);box-shadow:0 0 8px rgba(47,191,90,.9);animation:isoLatido 2.4s infinite}
.iso-pdot.bad{background:var(--gold);box-shadow:0 0 8px rgba(255,194,31,.8)}
@keyframes isoLatido{0%{box-shadow:0 0 0 0 rgba(47,191,90,.55)}70%{box-shadow:0 0 0 6px rgba(47,191,90,0)}100%{box-shadow:0 0 0 0 rgba(47,191,90,0)}}
.iso-tile .iso-dato{display:block;margin-top:3px;font-size:12px;color:var(--mut)}
.iso-tile .iso-ms{color:#CFE3FF;font-weight:700}
.iso-detail{margin-top:10px;border-top:1px dashed rgba(120,180,255,.35);padding-top:10px;
 font-size:13.5px;line-height:1.55;color:var(--mut);display:none}
.iso-detail.show{display:block;animation:isoNace .35s ease}
@keyframes isoNace{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.iso-detail b{color:#fff}
.iso-stamp{margin:12px 0 2px;font-size:12px;color:var(--mut);display:flex;align-items:center;gap:7px}
.iso-wait{grid-column:1/-1;font-size:13px;color:var(--mut);margin:2px 0}
@media (prefers-reduced-motion:reduce){
 .iso-dot,.iso-pdot.ok{animation:none}
 .iso-tile,.iso-detail.show{transition:none;animation:none}}