:root{--bg:#fff;--soft:#F5F4F0;--ink:#111318;--ink-2:#5B616E;--line:#E6E3DC;--navy:#0E4A57;--accent:#FFB86B;--school:#E77500;
--display:"Archivo","Helvetica Neue",Arial,sans-serif;--ui:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;color-scheme:light}
*{box-sizing:border-box} html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none} body{background:#F4F3EF;color:var(--ink);font:16px/1.5 var(--ui)} button{font:inherit;color:inherit} a{color:inherit}
:focus-visible{outline:2.5px solid var(--navy);outline-offset:2px}

#gmap{position:absolute; inset:0; width:100%; height:100%; cursor:grab}
.glabels{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.bul{display:flex; gap:2px; margin-top:2px; flex-wrap:wrap}
.bul em{font-style:normal; min-width:12px; height:12px; border-radius:6px; padding:0 3px; font:700 8px/12px var(--ui); text-align:center; color:#fff}
.dot{position:absolute; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 2px #fff; pointer-events:auto; cursor:pointer; border:0; padding:0}
.area{position:absolute; transform:translate(-50%,-50%); font-family:var(--display); font-weight:700; font-stretch:85%; text-transform:uppercase; letter-spacing:.14em; font-size:10px; color:#9A9EA6; white-space:nowrap; text-shadow:0 0 3px #F4F3EF,0 0 3px #F4F3EF}
.ring{position:absolute; transform:translate(-50%,-100%); font:700 10.5px var(--mono); letter-spacing:.08em; color:#7A7F89; text-transform:uppercase; background:#F4F3EF; padding:1px 6px}
.edge{position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:8px; background:#fff; border-radius:10px; padding:6px 10px; box-shadow:0 1px 3px rgba(0,0,0,.16),0 4px 14px rgba(0,0,0,.08); font-size:12px; white-space:nowrap}
.edge i{display:block; font-style:normal; color:var(--ink-2); font-size:11px}
.mctrl{position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:6px; z-index:4}
.mctrl button{width:44px; height:44px; border-radius:12px; border:0; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.16),0 4px 14px rgba(0,0,0,.08)}
.legend{position:absolute; left:12px; top:12px; z-index:3; background:rgba(255,255,255,.95); border-radius:12px; padding:10px 12px; box-shadow:0 2px 8px rgba(0,0,0,.08); display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; max-width:calc(100% - 80px)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:12px; height:12px; display:block}
@media (max-width:640px){ .legend{left:8px; right:8px; top:auto; bottom:8px; max-width:none; flex-wrap:nowrap; overflow-x:auto; padding:8px 10px; gap:12px; scrollbar-width:none} .legend::-webkit-scrollbar{display:none} .legend span,.legend .cbtn{white-space:nowrap; flex:none} }
.mcard{position:absolute; left:12px; bottom:12px; z-index:5; width:min(340px, calc(100% - 24px)); background:#fff; border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,.18); overflow:hidden}
.mcard img{display:block; width:100%; height:150px; object-fit:cover}
.mcard .cb{padding:12px 14px 14px; display:flex; flex-direction:column; gap:3px}
.mcard .cb b{font-size:16px}
.mcard .ty, .credit{font-size:12px; color:var(--ink-2)}
.mcard .x{position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:999px; border:0; background:rgba(255,255,255,.94); cursor:pointer}
.mattr{position:absolute; right:10px; bottom:8px; font-size:10.5px; color:var(--ink-2); z-index:3}
.tr{position:absolute; width:20px; height:20px; border-radius:50%; background:#111318; border:2px solid #fff; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; pointer-events:auto; box-shadow:0 1px 4px rgba(0,0,0,.3)}
.sname{position:absolute; transform:translate(-50%,-100%); font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:1; white-space:nowrap; pointer-events:none; text-shadow:0 0 2px #fff,0 0 4px #fff,0 0 8px #fff,0 0 12px #fff; transition:opacity .2s}
.lb{position:absolute; display:flex; align-items:center; gap:5px; transform:translate(-4px,-50%); border:0; background:none; padding:0; cursor:pointer; pointer-events:auto; font:inherit}
.lb::before{content:''; position:absolute; left:-9px; top:-9px; width:26px; height:26px}
.lb .pt{width:8px; height:8px; border-radius:50%; flex:none; box-shadow:0 0 0 2px #fff, 0 1px 2px rgba(0,0,0,.25)}
.lb.local{transform:translate(-4px,-50%)} .lb.local .pt{width:8px; height:8px; box-shadow:0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,.2)}
.lb.campus .pt{border-radius:2px; width:9px; height:9px}
.lb .nm{font-size:11px; font-weight:700; line-height:1.1; white-space:nowrap; color:#3A3F4A; text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 4px #fff}
.lb.local .nm{font-weight:600; font-size:10.5px}
.lb.on .nm{background:#fff; padding:2px 6px; border-radius:6px; box-shadow:0 0 0 2px #E8590C; text-shadow:none}
.lb.on .pt{box-shadow:0 0 0 2px #fff, 0 0 0 4px #E8590C}
.tr.on{box-shadow:0 0 0 3px #E8590C}
.mload{position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-2); font-weight:700; background:#F4F3EF}
.cbtn{display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:2px 0; font:inherit; font-size:12px; cursor:pointer; color:inherit; min-height:24px}
.cbtn[aria-pressed="false"]{opacity:.38; text-decoration:line-through}
.mhint{position:absolute; left:50%; bottom:70px; transform:translateX(-50%); background:rgba(17,19,24,.86); color:#fff; font-size:13px; font-weight:700; padding:7px 14px; border-radius:999px; pointer-events:none; white-space:nowrap; transition:opacity .4s; z-index:6; animation:mpulse 2.4s ease-in-out 3}
.mhint.gone{opacity:0}
.tpin{position:absolute; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%; background:#123C45; color:#fff; border:2px solid #fff; font:800 11px/1 var(--sans,system-ui); display:grid; place-items:center; cursor:pointer; z-index:3; box-shadow:0 1px 4px rgba(0,0,0,.3); padding:0}
.tpin:hover{transform:translate(-50%,-50%) scale(1.15)}

@media (min-width:641px){ .fmap .legend{left:16px; top:16px; border-radius:14px; max-width:calc(100% - 96px)} .fmap .mzoom{right:16px; top:16px} }
#gmap:focus{outline:none} #gmap:focus-visible{outline:none} .mapbox:focus-within:has(#gmap:focus-visible){box-shadow:0 0 0 3px var(--accent)}
.fmap .legend{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none} .fmap .legend::-webkit-scrollbar{display:none} .fmap .legend span{white-space:nowrap; flex:none}
.mcard .cb b:empty{display:none}

/* full-screen layout: map fills the window, panel on the right (bottom sheet on phones) */
#fm{position:fixed;inset:0;display:flex}
.fmap{position:relative;flex:1;min-width:0;height:100%;overflow:hidden;touch-action:none;background:#F4F3EF}
#gmap.drag{cursor:grabbing}
.ftop{position:absolute;left:16px;top:16px;z-index:6;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);border-radius:14px;padding:8px 14px 8px 8px;box-shadow:0 1px 3px rgba(0,0,0,.14),0 6px 18px rgba(0,0,0,.08);max-width:calc(100% - 96px)}
.fback{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--navy);color:#fff;flex:none;text-decoration:none}
.fname{min-width:0;display:flex;flex-direction:column}
.flogo{font:800 11px var(--mono);letter-spacing:.06em;text-decoration:none;color:var(--ink-2)} .flogo span{font-weight:500}
.fname h1{margin:0;font:800 17px/1.15 var(--display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmap .legend{top:78px;left:16px;display:flex;gap:12px;padding:8px 12px;border-radius:12px;max-width:calc(100% - 96px)}
.fmap .mctrl{right:16px;top:16px}
.mattr a{color:inherit}
.tpi{width:14px!important;height:14px!important;border-radius:50%;background:#123C45;color:#fff;font:800 9px/14px var(--ui);text-align:center;font-style:normal}
.bnm{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0 2px;font:700 10px/1.1 var(--ui);color:#8A3F00;white-space:nowrap;cursor:pointer;pointer-events:auto;text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff}
.bnm.on{background:#fff;border-radius:5px;box-shadow:0 0 0 2px var(--navy);text-shadow:none}
.tpin.on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--accent)}
.mcard{width:min(380px,calc(100% - 32px));left:16px;bottom:16px}
.mcard img{height:210px}
.tnav{display:flex;gap:8px;margin-top:8px} .tnav button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-weight:800;font-size:13px;cursor:pointer}
.tnav button.pri{background:var(--navy);border-color:var(--navy);color:#fff} .tnav button:disabled{opacity:.45;cursor:default}
/* panel */
.fpanel{width:400px;flex:none;height:100%;background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;position:relative;z-index:8}
.fgrab{display:none}
.fsum{margin:0;padding:18px 20px 8px;font-size:13.5px;color:var(--ink-2)}
.ftabs{display:flex;gap:6px;padding:8px 20px 12px;border-bottom:1px solid var(--line)}
.ftabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.ftabs button span{font:700 11px var(--mono);color:var(--ink-2);margin-left:2px}
.ftabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .ftabs button[aria-selected="true"] span{color:#CFE3E6}
.fbody{flex:1;overflow-y:auto;padding:4px 20px 28px;overscroll-behavior:contain}
.fbody h2{font:800 20px/1.2 var(--display);letter-spacing:-.02em;margin:16px 0 4px}
.pnote,.pnone{font-size:13.5px;color:var(--ink-2);margin:0 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tplay{border:0;background:var(--accent);color:var(--ink);font-weight:800;font-size:13px;border-radius:999px;padding:7px 14px;cursor:pointer}
.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.tstop{display:grid;grid-template-columns:24px 96px 1fr;gap:10px;align-items:start;width:100%;text-align:left;border:0;background:none;padding:8px;border-radius:12px;cursor:pointer}
.tstop:hover,.tstop.on{background:var(--soft)} .tstop.on{box-shadow:inset 0 0 0 1.5px var(--navy)}
.tstop .tn{width:24px;height:24px;border-radius:50%;background:#123C45;color:#fff;font:800 12px/24px var(--ui);text-align:center;margin-top:2px}
.tstop img{width:96px;height:72px;object-fit:cover;border-radius:8px;background:var(--soft)}
.tstop .tt{display:flex;flex-direction:column;gap:2px;min-width:0} .tstop b{font-size:14px;line-height:1.25} .tstop i{font-style:normal;font-size:12.5px;color:var(--ink-2);line-height:1.3}
.tstop small{font-size:11px;color:var(--ink-2)}
.ph{display:flex;align-items:center;gap:8px;font:800 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:18px 0 6px}
.ph i{width:10px;height:10px;border-radius:50%;flex:none} .ph span{margin-left:auto;font-weight:500}
.plist{list-style:none;margin:0;padding:0}
.plist button{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:8px 2px;cursor:pointer;font-size:14px}
.plist button:hover b{text-decoration:underline} .plist b{font-weight:700;min-width:0} .plist span{font-size:12px;color:var(--ink-2);text-align:right;flex:none;max-width:48%}
.blist{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.blist button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600;cursor:pointer} .blist button:hover{border-color:#E77500}
.fsrc{font-size:12px;color:var(--ink-2);margin-top:24px}
@media (max-width:900px){
 #fm{display:block}
 .fmap{position:absolute;inset:0}
 .ftop{left:12px;top:max(12px,env(safe-area-inset-top));padding:6px 12px 6px 6px} .fname h1{font-size:15px}
 .fmap .legend{left:12px;right:auto;bottom:auto;top:calc(max(12px,env(safe-area-inset-top)) + 58px);max-width:calc(100% - 24px)}
 .fmap .mctrl{right:12px;top:calc(max(12px,env(safe-area-inset-top)) + 104px)}
 .fpanel{position:absolute;left:0;right:0;bottom:0;width:auto;height:62dvh;border-left:0;border-radius:20px 20px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.16);transition:transform .25s ease;padding-bottom:env(safe-area-inset-bottom)}
 .fpanel.min{transform:translateY(calc(62dvh - 104px))}
 .fgrab{display:block;border:0;background:none;padding:10px 0 2px;cursor:pointer;width:100%} .fgrab span{display:block;width:40px;height:5px;border-radius:3px;background:#CFCAC0;margin:0 auto}
 .fsum{display:none} .ftabs{padding:6px 16px 12px;overflow-x:auto} .fbody{padding:0 16px 24px}
 .mcard{left:12px;bottom:116px;width:calc(100% - 24px)} .mcard img{height:150px}
 .mattr{bottom:108px}
}
@media (prefers-reduced-motion:reduce){.fpanel{transition:none}}