:root{--paper:#eeece2;--paper-raised:#f7f5ec;--ink:#1c2420;--ink-soft:#4b544c;--ink-faint:#8a9089;--line:#cac6b6;--line-soft:#ddd9cb;--accent:#2f5942;--accent-soft:#dfe8de;--accent-strong:#1f3f2c;--hombre:#3e5c76;--mujer:#7a4b5e;--otro:#8a6d3a;--danger:#8a3a2c;--danger-soft:#f0ddd6;--shadow:0 1px 2px #1c24200f, 0 4px 14px #1c242012;--focus:#2f5942}@media (prefers-color-scheme:dark){:root{--paper:#14211a;--paper-raised:#1b2a22;--ink:#eaf0ea;--ink-soft:#b4c0b6;--ink-faint:#6f7d72;--line:#33453a;--line-soft:#263229;--accent:#7fb894;--accent-soft:#223930;--accent-strong:#a7d3b6;--hombre:#9fbcda;--mujer:#d9a6bb;--otro:#d8bf83;--danger:#e2a493;--danger-soft:#3a241d;--shadow:0 1px 2px #0000004d, 0 8px 24px #00000059;--focus:#a7d3b6}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--paper);color:var(--ink);font-family:Libre Franklin,system-ui,sans-serif;overflow:hidden}::selection{background:var(--accent-soft)}.app{flex-direction:column;height:100vh;display:flex}.topbar{border-bottom:1px solid var(--line);background:var(--paper-raised);z-index:20;flex-shrink:0;align-items:center;gap:14px;padding:12px 18px;display:flex}.topbar h1{white-space:nowrap;margin:0;font-family:Fraunces,Georgia,serif;font-size:1.1rem;font-weight:600}.topbar .sub{color:var(--ink-faint);white-space:nowrap;font-family:IBM Plex Mono,monospace;font-size:.72rem}.status{color:var(--ink-soft);align-items:center;gap:6px;margin-left:auto;font-family:IBM Plex Mono,monospace;font-size:.72rem;display:flex}.status .dot{background:var(--ink-faint);border-radius:50%;width:7px;height:7px}.status.live .dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.status.loading .dot{background:var(--otro);animation:1.2s ease-in-out infinite pulse}.status.error .dot{background:var(--danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}button.ctl{border:1px solid var(--line);background:var(--paper-raised);color:var(--ink);cursor:pointer;border-radius:7px;padding:6px 10px;font-family:Libre Franklin,sans-serif;font-size:.78rem;font-weight:600;line-height:1}button.ctl:hover{border-color:var(--accent);color:var(--accent-strong)}button.ctl:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);color:var(--paper-raised);border-color:var(--accent)}button.primary:hover{filter:brightness(1.08);color:var(--paper-raised)}.zoomctl{gap:4px;display:flex}.zoomctl button{width:28px;height:28px;padding:0;font-size:1rem}main{flex:1;min-height:0;position:relative}#canvas-wrap{cursor:grab;background-image:radial-gradient(var(--line-soft) 1px, transparent 1px);background-size:22px 22px;position:absolute;inset:0}#canvas-wrap.grabbing{cursor:grabbing}#canvas-wrap svg{width:100%;height:100%;display:block}.card{fill:var(--paper-raised);stroke:var(--line);stroke-width:1px;filter:drop-shadow(0 1px 1px #1418140d)drop-shadow(0 3px 8px #14181412)}.card-hit{cursor:pointer}.card-hit:hover .card{stroke:var(--accent)}.card-hit:focus-visible .card{stroke:var(--focus);stroke-width:2px}.card-name{fill:var(--ink);font-family:Fraunces,Georgia,serif;font-weight:500}.card-years{fill:var(--ink-faint);font-variant-numeric:tabular-nums;font-family:IBM Plex Mono,monospace}.card-initials{fill:var(--paper-raised);text-anchor:middle;dominant-baseline:central;font-family:Libre Franklin,sans-serif;font-size:12px;font-weight:700}.avatar-fallback{opacity:.92}.branch{fill:none;stroke:var(--line);stroke-width:1.4px}.tie{stroke:var(--accent);stroke-width:1.4px;opacity:.55}.selected .card{stroke:var(--accent);stroke-width:2px}.panel-photo{object-fit:cover;border:2px solid var(--line);border-radius:50%;width:84px;height:84px;margin-bottom:14px;display:block}.panel-photo-fallback{color:var(--paper-raised);border:none;justify-content:center;align-items:center;font-family:Libre Franklin,sans-serif;font-size:1.6rem;font-weight:700;display:flex}.skeleton-wrap{flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.skeleton-row{gap:22px;display:flex}.skeleton-card{background:linear-gradient(90deg, var(--paper-raised) 25%, var(--line-soft) 37%, var(--paper-raised) 63%);border:1px solid var(--line);background-size:400% 100%;border-radius:8px;width:150px;height:56px;animation:1.4s infinite shimmer}@keyframes shimmer{0%{background-position:100% 0}to{background-position:0 0}}.skeleton-label{color:var(--ink-faint);font-family:IBM Plex Mono,monospace;font-size:.78rem}.fullstate{justify-content:center;align-items:center;padding:40px;display:flex;position:absolute;inset:0}.fullstate .box{background:var(--paper-raised);border:1px solid var(--line);max-width:420px;box-shadow:var(--shadow);border-radius:12px;padding:28px 26px}.fullstate h2{color:var(--danger);margin:0 0 8px;font-family:Fraunces,Georgia,serif;font-size:1.15rem}.fullstate p{color:var(--ink-soft);margin:0;font-size:.9rem;line-height:1.5}#panel{background:var(--paper-raised);border-left:1px solid var(--line);z-index:15;width:min(380px,92vw);transition:transform .22s;position:absolute;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-8px 0 24px #00000014}@media (prefers-reduced-motion:reduce){#panel{transition:none}}#panel.open{transform:translate(0)}.panel-inner{padding:22px 22px 32px}.panel-close{color:var(--ink-faint);cursor:pointer;background:0 0;border:none;padding:6px;font-size:1.2rem;line-height:1;position:absolute;top:14px;right:14px}.panel-close:hover{color:var(--ink)}.rule{border-radius:2px;width:26px;height:4px;margin-bottom:10px;display:inline-block}#panel h2{margin:0 0 4px;padding-right:24px;font-family:Fraunces,Georgia,serif;font-size:1.3rem;font-weight:600}.years{color:var(--ink-faint);margin-bottom:16px;font-family:IBM Plex Mono,monospace;font-size:.82rem}.notas{color:var(--ink-soft);white-space:pre-wrap;margin-bottom:20px;font-size:.9rem;line-height:1.55}.group{margin-bottom:16px}.group-label{letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px;font-family:IBM Plex Mono,monospace;font-size:.68rem}.chip-row{flex-wrap:wrap;gap:6px;display:flex}.chip{background:var(--accent-soft);color:var(--accent-strong);cursor:pointer;border:none;border-radius:20px;padding:5px 12px;font-family:Libre Franklin,sans-serif;font-size:.82rem;font-weight:600}.chip:hover{filter:brightness(.95)}.suggest-box{border-top:1px solid var(--line);margin-top:6px;padding-top:18px}.suggest-box textarea{border:1px solid var(--line);resize:vertical;background:var(--paper);width:100%;min-height:80px;color:var(--ink);border-radius:8px;padding:10px;font-family:Libre Franklin,sans-serif;font-size:.88rem}.suggest-box input[type=text]{border:1px solid var(--line);background:var(--paper);width:100%;color:var(--ink);border-radius:8px;margin-top:8px;padding:8px 10px;font-family:Libre Franklin,sans-serif;font-size:.85rem}.suggest-box input.hp{position:absolute;left:-9999px}.suggest-box .row{gap:8px;margin-top:10px;display:flex}.suggest-note{color:var(--ink-faint);margin-top:8px;font-size:.78rem;line-height:1.4}.suggest-ok{color:var(--accent-strong);margin-top:10px;font-size:.85rem}.suggest-err{color:var(--danger);margin-top:10px;font-size:.85rem}.legend{color:var(--ink-faint);background:var(--paper-raised);border:1px solid var(--line);z-index:10;border-radius:8px;gap:14px;padding:7px 12px;font-family:IBM Plex Mono,monospace;font-size:.7rem;display:flex;position:absolute;bottom:14px;left:18px}.legend span{align-items:center;gap:5px;display:flex}.legend i{border-radius:50%;width:8px;height:8px;display:inline-block}