:root{--azul:#0F6190;--vivo:#1875FF;--amarillo:#FFE815;--tinta:#10202B;--gris:#5F7787;--papel:#FFFFFF;--zebra:#EDF3F6}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;-webkit-user-select:none;user-select:none;background:var(--papel);color:var(--tinta);font-family:"Open Sans","Segoe UI",system-ui,sans-serif;line-height:1.45}
header{display:flex;align-items:center;gap:14px;padding:16px 20px 10px}
header img{width:44px;height:44px}
h1{margin:0;font-size:clamp(18px,2.4vw,26px);color:var(--azul);letter-spacing:.2px;text-transform:uppercase}
.sub{margin:2px 0 0;font-size:14px;color:var(--gris)}
.barra{display:flex;flex-wrap:wrap;gap:8px;padding:6px 20px 12px;align-items:center}
.barra button{font:inherit;font-size:14px;font-weight:700;padding:9px 14px;min-height:40px;border:2px solid var(--tinta);background:var(--papel);color:var(--tinta);border-radius:8px;cursor:pointer}
.barra button:hover{background:var(--amarillo)}
.barra button[aria-pressed="true"]{background:var(--tinta);color:#fff}
.barra button:focus-visible,.nodo:focus-visible{outline:3px solid var(--vivo);outline-offset:2px}
.aviso{font-size:13px;color:var(--gris);margin-left:auto}
main{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,27vw,380px);gap:16px;padding:0 20px 24px;align-items:start}
.lienzo{border:2px solid var(--tinta);border-radius:10px;background:var(--papel);overflow-x:auto}
.nodo{touch-action:none}
svg{display:block;width:100%;height:auto;min-width:min(100%,900px)}
.panel{border:2px solid var(--tinta);border-radius:10px;background:var(--zebra);padding:16px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.panel dl{margin:0 0 8px}
.panel dt{font-weight:700;font-size:13.5px;margin-top:8px;color:var(--tinta)}
.panel dd{margin:1px 0 0;font-size:13px}
.panel h2{margin:0 0 6px;font-size:18px;color:var(--azul)}
.panel .grupo{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px;margin-bottom:8px}
.panel p{margin:0 0 10px;font-size:14px}
.panel h3{margin:12px 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--gris)}
.panel ul{margin:0;padding-left:18px;font-size:14px}
.panel li button{font:inherit;background:none;border:0;padding:2px 0;color:var(--azul);text-decoration:underline;cursor:pointer;text-align:left}
.leyenda{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 20px 18px;font-size:13px}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda i{width:14px;height:14px;border-radius:3px;border:1px solid var(--tinta);display:inline-block}
@media (max-width:1000px){main{grid-template-columns:minmax(0,1fr)}.panel{position:static;max-height:none}.aviso{margin-left:0;width:100%}}
@media (max-width:900px){svg{min-width:900px}}
header{flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

g.nodo{cursor:grab}
.leyenda i{border:0}