/* Optional topic map. The triangle is an editable semantic diagram; its symbols reuse WLF raster graphics. */
#app .dm-page{padding:0 24px 24px;gap:0;min-height:100%}
.dm-top{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;align-items:center;min-height:58px;margin-inline:-4px;background:var(--bg)}
.dm-top p{margin:0;text-align:center;color:var(--muted);font-size:13px;font-weight:550}
#app .dm-top button{min-height:44px;min-width:44px;padding:0;font-size:14px}
.dm-heading{display:grid;gap:8px;padding-top:12px}
.dm-heading .dq-eyebrow{font-size:9px;letter-spacing:.055em}
#app .dm-heading h1{font:750 32px/1.13 var(--wlf-font-body);letter-spacing:-.035em;max-width:100%;margin:0}
.dm-heading>p:last-child{margin:0;color:#c2d0de;font-size:14px;line-height:1.5}
.dm-data-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid #3c5067;border-radius:14px;margin-top:14px;background:#142238}
.dm-data-switch button{min-height:44px;border:0;border-radius:10px;background:transparent;color:#bfcddd;font:550 13px/1.3 var(--wlf-font-body)}
.dm-data-switch button[aria-pressed=true]{background:#d7eafb;color:#122437}
.dm-context{margin:10px 0 0;min-height:18px;color:#bdcddd;font-size:11px;line-height:1.6}
.dm-triangle{position:relative;width:100%;max-width:300px;aspect-ratio:320/330;margin:14px auto 0;flex:none;isolation:isolate}
.dm-triangle>svg{display:block;width:100%;height:100%;overflow:visible}
.dm-region{stroke:#5b728b;stroke-width:1.5;stroke-linejoin:round;fill:#162b41;transition:fill 160ms ease,stroke 160ms ease}
.dm-region-deudas{fill:#253449}.dm-region-ahorro{fill:#293c43}.dm-region-proteccion{fill:#1d3b48}.dm-region-retiro{fill:#16364e}
.dm-region.dm-region-active{fill:#185374;stroke:#b6e5ff;stroke-width:2.5}
.dm-region.dm-region-priority{stroke:#e6bd71;stroke-width:2.5}
#app .dm-node{position:absolute;left:var(--map-x);top:var(--map-y);transform:translate(-50%,-50%);display:grid;justify-items:center;align-content:center;gap:2px;width:88px;min-height:80px;padding:3px;border:0;border-radius:12px;background:transparent;color:#f4f8fd;box-shadow:none;font-family:var(--wlf-font-body);cursor:pointer;touch-action:manipulation}
#app .dm-node:active{transform:translate(-50%,-50%)}
.dm-node strong{font-size:14px;line-height:1.3;font-weight:650;white-space:nowrap}
.dm-node>span:last-child{font-size:12px;line-height:1.3;color:#d7e4ee;font-variant-numeric:tabular-nums}
.dm-node .dq-choice-media{width:42px;height:42px;flex:none;border-radius:0;background:transparent!important;overflow:visible}
.dm-node .dq-choice-art{inset:0}
.dm-node-priority strong::after{content:'';display:inline-block;width:5px;height:5px;margin:0 0 2px 4px;border-radius:50%;background:#e6bd71}
.dm-legend{margin:4px 0 0;text-align:center;color:#b3c7da;font-size:11px;line-height:1.6}
.dm-priority{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 14px;padding:12px 0 12px 12px;margin-top:14px;border-left:3px solid #dfbf83}
.dm-priority>span{grid-column:1;font-size:10px;line-height:1.5;letter-spacing:.055em;color:#dfbf83;font-weight:600}
#app .dm-priority h2{grid-column:1;font:650 16px/1.35 var(--wlf-font-body);letter-spacing:-.02em;margin:0}
.dm-priority .text-link{grid-column:2;grid-row:1/span 2;align-self:center;min-height:44px;font-size:12px;padding:8px 0;display:flex;align-items:center;gap:4px}
.dm-detail{display:grid;gap:8px;padding-top:24px}
.dm-detail-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#app .dm-detail h2{font:650 16px/1.4 var(--wlf-font-body);letter-spacing:-.015em;margin:0}
.dm-detail-heading>span{flex:none;color:#bfd6e7;font-size:12px;font-variant-numeric:tabular-nums}
.dm-detail>p{margin:0;color:#bfcfdf;font-size:13px;line-height:1.55}
.dm-detail details{padding:0;border:0;background:transparent}
.dm-detail summary{min-height:44px;display:flex;align-items:center;font-size:13px;color:#8cd1f7;cursor:pointer}
.dm-answer{display:grid;gap:6px;padding:14px 0;border-top:1px solid #32495f}
.dm-answer p{margin:0;font-size:13px;line-height:1.5;color:#b9cddd}
.dm-answer strong{font-size:15px;line-height:1.5;font-weight:550;color:#f3f7fb}
.dm-answer strong.dm-pending{color:#b9cddd;font-weight:400}
.dm-answer .text-link,.dm-review{min-height:44px;justify-self:start;padding:8px 0;font-size:13px;color:#8cd1f7;display:flex;align-items:center;gap:8px}
.dm-footnote{margin:16px 0 0;font-size:11px;line-height:1.55;color:#a9bdcf}
#app #diagnostic-footer:has(.dm-actions){padding:12px 24px 16px;background:var(--bg)}
.dm-actions{display:grid}
#app #diagnostic-footer .dm-actions .btn{min-height:56px;font-size:16px;font-weight:650;border-radius:14px}
.dm-page button:focus-visible,.dm-page summary:focus-visible,.dm-actions button:focus-visible{outline:3px solid #8bd6ff;outline-offset:3px}
@media(max-width:360px){#app .dm-page{padding-inline:20px}.dm-heading{padding-top:12px}#app .dm-heading h1{font-size:29px}.dm-node strong{font-size:13px}.dm-node .dq-choice-media{width:36px;height:36px}#app .dm-node{width:80px;min-height:72px}.dm-node>span:last-child{font-size:11px}.dm-legend{font-size:10px}#app #diagnostic-footer:has(.dm-actions){padding-inline:20px}}
@media(prefers-reduced-motion:reduce){.dm-page *,.dm-actions *{transition:none!important;animation:none!important}}