@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#080e17;--side:#0c141e;--surface:#121e2a;--surface2:#172534;--border:#253443;--text:#eaf5fa;--muted:#8197a8;--cyan:#43e2e0;--violet:#a18aff;--danger:#ff8d87;--shadow:0 18px 75px #02060cbb}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}a{color:var(--cyan)}#shell{height:100dvh;display:grid;grid-template-columns:360px minmax(0,1fr);overflow:hidden}.sidebar,#sidebar{background:var(--side);position:relative;z-index:700;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--border)}.brand{height:88px;display:flex;gap:13px;align-items:center;padding:0 27px;border-bottom:1px solid var(--border)}.brand-mark{height:43px;width:43px;border-radius:13px;display:grid;place-items:center;font-size:27px;background:linear-gradient(145deg,#23e1d5,#3f79c9);color:#04111b;box-shadow:0 8px 24px #27cfdf3d}.brand strong{font:700 23px 'Space Grotesk',sans-serif;letter-spacing:-1.2px}.brand strong span{color:var(--cyan)}.brand small{display:block;color:var(--muted);letter-spacing:2px;font-size:9px;margin-top:2px;font-weight:700}.beta{margin-left:auto;border:1px solid #356068;color:#75e4df;font-size:10px;padding:5px 8px;border-radius:6px}.side-inner{min-height:0;overflow:auto;padding:29px 23px 0;scrollbar-color:#2a404e transparent;scrollbar-width:thin}.overline{font-size:10px;font-weight:800;color:var(--cyan);letter-spacing:2.5px}.side-intro h1{font:700 31px/1.12 'Space Grotesk';letter-spacing:-1.5px;margin:14px 0 12px}.side-intro h1 em{font-style:normal;color:var(--cyan)}.side-intro p{color:var(--muted);font-size:12px;line-height:1.75;max-width:280px;margin:0 0 23px}.search{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:11px;background:#101e2b;padding:0 13px;height:47px;transition:border .2s}.search:focus-within{border-color:var(--cyan)}.search span{font-size:25px;color:var(--cyan);line-height:1}.search input{min-width:0;flex:1;color:var(--text);border:0;outline:0;background:transparent;font-size:12px}.search input::placeholder{color:#718597}.search kbd{font-size:10px;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:2px 6px}.tabs{display:flex;gap:6px;padding:4px;background:#0a1119;border:1px solid var(--border);margin:17px 0 30px;border-radius:11px}.tabs button{flex:1;border:0;border-radius:8px;color:var(--muted);background:none;padding:10px;font-size:12px;font-weight:700}.tabs button.active{color:var(--text);background:var(--surface2);box-shadow:0 3px 15px #0004}.section-title{font-size:10px;letter-spacing:1.5px;font-weight:800;color:#a7baca;display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.text-btn{border:0;background:transparent;color:var(--cyan);font-size:11px}.filters{display:grid;gap:7px}.filters button{border:1px solid var(--border);background:var(--surface);color:#c2d4de;border-radius:10px;display:flex;align-items:center;text-align:left;gap:11px;padding:11px 14px;font-size:12px;font-weight:600;transition:transform .18s,background .18s,border .18s}.filters button:hover{transform:translateX(3px);border-color:#446475}.filters button.active{background:#16313a;border-color:#287c86;color:#dffffb}.filters b{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.dot{display:inline-block;flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#a0adb9;box-shadow:0 0 9px #ffffff33}.dot.cyan{background:var(--cyan);box-shadow:0 0 12px #43e2e070}.dot.violet{background:var(--violet);box-shadow:0 0 12px #a18aff88}.dot.amber{background:#ffba69}.list-title{margin:34px 0 14px}.list-title b{font-size:11px;color:var(--cyan);margin-left:4px}.list-title small{display:block;letter-spacing:0;font-weight:500;color:var(--muted);font-size:10px;margin-top:7px}.refresh-btn{font-size:24px;color:var(--cyan);border:1px solid var(--border);border-radius:8px;background:var(--surface);height:32px;width:34px;line-height:0}.refresh-btn:disabled{opacity:.5}.train-list{display:flex;flex-direction:column;gap:9px;padding-bottom:25px}.train-card{width:100%;text-align:left;color:var(--text);border:1px solid var(--border);background:linear-gradient(130deg,#15222d,#101b25);border-radius:12px;padding:14px 15px;transition:border .2s,transform .2s}.train-card:hover{border-color:#39919a;transform:translateY(-2px)}.train-card.selected{border-color:var(--cyan);background:linear-gradient(130deg,#183640,#14212d)}.card-top,.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.train-tag{background:#173e45;color:#6aeeec;border:1px solid #23636b;font-weight:800;font:700 12px 'Space Grotesk';border-radius:5px;padding:5px 8px}.train-tag.long{background:#352d4d;color:#c4acff;border-color:#584684}.gps{font-size:9px;color:#71e9c7;font-weight:800;letter-spacing:1px}.card-body{margin:11px 0 9px;color:#c1d0db;font-size:12px}.card-bottom{color:var(--muted);font-size:10px}.empty{color:var(--muted);padding:34px 10px;text-align:center;line-height:1.7;font-size:12px;border:1px dashed var(--border);border-radius:12px}.side-footer{border-top:1px solid var(--border);padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:wrap;font-size:10px}.side-footer a{color:#98b1bb;text-decoration:none}.status{display:flex;align-items:center;gap:6px;color:#9db9c2}.map-panel{position:relative;min-width:0;overflow:hidden;background:#111921}#map{position:absolute;inset:0;z-index:0;background:#16212a}.map-shade{pointer-events:none;position:absolute;top:0;right:0;left:0;height:240px;background:linear-gradient(#050c15c9,transparent);z-index:410}.topbar{position:absolute;z-index:600;left:30px;right:30px;top:22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.top-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:1.4px;white-space:nowrap}.muted{color:#9ab1be}.slash{color:#3c6775}.live{font-size:10px;letter-spacing:.7px;padding:7px 10px;border:1px solid #196b63;border-radius:30px;color:#74efd4;background:#102e2e;margin-left:13px}.live i{display:inline-block;background:#69efd4;width:6px;height:6px;border-radius:50%;box-shadow:0 0 12px #70fadc;animation:pulse 2s infinite}.topbuttons{display:flex;align-items:center;gap:8px}.topbuttons time{border-radius:9px;border:1px solid #33505f;background:#101d29ce;padding:10px 12px;color:#d4e4ec;font-variant-numeric:tabular-nums;font-size:12px}.icon-button{border:1px solid #36505e;background:#142230dc;color:#e9f8ff;height:37px;min-width:37px;border-radius:9px;font-size:21px}.icon-button:hover,.map-tools button:hover{background:#264253}.stats{position:absolute;z-index:490;left:30px;top:86px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;max-width:690px;min-height:92px;background:#0b1620e8;backdrop-filter:blur(20px);border:1px solid #304452;border-radius:13px;box-shadow:0 15px 45px #0005}.stats>div{padding:18px 18px 14px;border-right:1px solid #233746;display:flex;flex-direction:column;gap:4px;min-width:0}.stats>div:last-child{border:0}.stats small{font-size:9px;color:#96afbc;letter-spacing:1px;font-weight:800;white-space:nowrap}.stats strong{font:700 26px 'Space Grotesk';letter-spacing:-1px;line-height:1.1}.stats>div:last-child strong{font-size:18px;margin:4px 0}.stats span{color:#7796a5;font-size:10px}.cyan-text{color:var(--cyan)}.violet-text{color:var(--violet)}.map-tools{position:absolute;z-index:500;right:28px;top:140px;display:flex;flex-direction:column;box-shadow:var(--shadow);border:1px solid #3a5664;border-radius:11px;overflow:hidden}.map-tools button{height:42px;width:43px;background:#132331e8;border:0;border-bottom:1px solid #304452;color:white;font-size:22px}.map-tools button:last-child{border:0}.legend{position:absolute;z-index:490;left:30px;bottom:25px;display:flex;align-items:center;gap:18px;border:1px solid #354958;border-radius:11px;background:#0a1621e6;padding:14px 16px;backdrop-filter:blur(15px);font-size:11px;color:#c4d7de}.legend span{display:flex;align-items:center;gap:7px}.legend-help{color:#8098a7!important;font-size:10px}.alert{position:absolute;z-index:690;bottom:95px;left:30px;max-width:540px;padding:14px 18px;background:#36251ce8;color:#ffdcb6;border:1px solid #8d624a;border-radius:10px;font-size:12px;line-height:1.5}.detail{position:absolute;z-index:650;right:28px;top:210px;width:340px;max-height:calc(100dvh - 245px);overflow:auto;background:#0e1925f5;border:1px solid #355263;box-shadow:var(--shadow);backdrop-filter:blur(25px);border-radius:16px;padding:25px;animation:enter .25s ease}.detail[hidden],.alert[hidden]{display:none}.close{position:absolute;right:15px;top:12px;border:1px solid var(--border);color:var(--text);background:#1a2b38;border-radius:7px;font-size:22px;width:31px;height:31px}.detail-head{display:flex;align-items:center;gap:13px;margin-top:18px}.train-big{background:linear-gradient(135deg,#144b58,#244054);border:1px solid #337384;color:var(--cyan);width:50px;height:50px;display:grid;place-items:center;border-radius:12px;font-size:27px}.detail h2{font:700 27px 'Space Grotesk';margin:0;letter-spacing:-1px}.detail-head p{margin:4px 0;color:var(--muted);font-size:11px}.tags{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0 26px}.tag{color:#76efc9;background:#12352e;border:1px solid #236450;border-radius:6px;font-size:10px;font-weight:700;padding:7px 9px}.tag.accent{color:#c3aaff;background:#2f2545;border-color:#59457c}.facts{display:grid;gap:0;margin:10px 0 0}.facts div{display:flex;align-items:start;justify-content:space-between;gap:8px;border-bottom:1px solid var(--border);padding:12px 0;font-size:11px}.facts dt{color:#8298a6}.facts dd{margin:0;text-align:right;max-width:60%;overflow-wrap:anywhere;font-weight:700}.disclaimer{background:#1d2b35;border-left:2px solid #b2a26d;padding:11px;color:#afbdc5;font-size:10px;line-height:1.6;margin-top:21px}.detail-actions{display:flex;gap:8px;margin-top:18px}.detail-actions button{flex:1;border-radius:9px;border:1px solid #405663;padding:12px 6px;color:var(--text);font-size:11px;font-weight:800}.primary{background:#1fbec5!important;color:#061923!important;border-color:#27cad2!important}.secondary{background:#172735}.data-link{display:block;text-align:center;font-size:10px;margin-top:18px;text-decoration:none}.train-marker{display:grid;place-items:center;height:32px;width:32px;color:#05151d;background:#49e1e0;border:2px solid #b3fff5;border-radius:11px;box-shadow:0 5px 20px #29dfeb70;font-size:19px;transition:transform .2s}.train-marker.long{background:#ab8aff;border-color:#dfcdff;box-shadow:0 5px 20px #9774ec80}.train-marker.selected{transform:scale(1.35);border-color:white}.train-div-icon{background:transparent;border:0}.trains-tooltip{border-radius:8px!important;background:#0e1b25!important;color:#f1ffff!important;border:1px solid #3e7280!important;box-shadow:var(--shadow)!important}.leaflet-container{font-family:'DM Sans',sans-serif!important}.leaflet-control-attribution{background:#101923bb!important;color:#9fb2c0!important;font-size:9px!important}.leaflet-control-attribution a{color:#9fe0ec!important}.mobile-only,.mobile-tabs{display:none!important}
@keyframes pulse{50%{opacity:.25;box-shadow:0 0 2px #70fadc}}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
body.light{color-scheme:light;--bg:#e8eef2;--side:#f7fafc;--surface:#f0f4f6;--surface2:#e2edf0;--border:#cbd7df;--text:#152532;--muted:#597080;--cyan:#007f88;--violet:#7754b0;--shadow:0 18px 75px #344a5a40}body.light .search,body.light .tabs,body.light .train-card{background:#fff}body.light .brand-mark{color:white}body.light .filters button.active{background:#def4f4}body.light .train-card.selected{background:#e6f5f4}body.light .side-footer{background:#f7fafc}body.light .map-shade{background:linear-gradient(#ecf4faca,transparent)}body.light .top-label{color:#152b36}body.light .stats,body.light .detail,body.light .legend{background:#f5faf9ef;color:#173341}body.light .stats small,body.light .stats span,body.light .facts dt{color:#5b7687}body.light .stats>div{border-color:#d5e1e5}body.light .icon-button,body.light .topbuttons time,body.light .map-tools button{background:#f4f8fb;color:#183443}body.light .disclaimer{background:#eaf0ef;color:#526977}
@media(max-width:1150px){#shell{grid-template-columns:320px minmax(0,1fr)}.stats{grid-template-columns:repeat(2,1fr);max-width:420px}.stats>div{padding:11px 14px}.stats>div:nth-child(2){border:0}.stats>div:nth-child(-n+2){border-bottom:1px solid #2e424c}.stats small{font-size:8px}.stats strong{font-size:22px}.map-tools{top:265px}.detail{top:260px;max-height:calc(100dvh - 295px)}.legend-help{display:none!important}}
@media(max-width:780px){#shell{display:block}.sidebar,#sidebar{position:fixed;left:0;top:0;bottom:0;width:min(92vw,360px);transform:translateX(-105%);transition:transform .25s ease;box-shadow:var(--shadow);z-index:1050}.sidebar.mobile-open,#sidebar.mobile-open{transform:translateX(0)}.map-panel{height:100dvh}.mobile-only{display:inline-flex!important;align-items:center;justify-content:center}.topbar{top:12px;left:12px;right:12px;gap:7px}.top-label{font-size:10px;letter-spacing:.2px}.top-label .muted{display:none}.live{font-size:9px;padding:5px 7px;margin-left:2px}.topbuttons{gap:5px}.topbuttons time{display:none}.icon-button{height:34px;min-width:34px}.stats{left:12px;right:12px;top:62px;grid-template-columns:repeat(3,1fr);max-width:none;min-height:65px}.stats>div{padding:10px 9px!important;border-bottom:0!important;border-right:1px solid #30414d!important}.stats>div:last-child{display:none}.stats strong{font-size:20px}.stats span{font-size:9px}.stats small{font-size:7px;letter-spacing:.3px}.map-tools{top:154px;right:12px}.legend{left:12px;bottom:79px;font-size:10px;gap:12px;padding:11px}.alert{left:12px;right:12px;bottom:142px;max-width:none}.detail{left:0;right:0;top:auto;bottom:63px;width:100%;max-height:min(72dvh,630px);border-radius:22px 22px 0 0;padding:23px;z-index:850}.mobile-tabs{display:flex!important;position:absolute;bottom:0;left:0;right:0;height:65px;background:#0b1824fa;border-top:1px solid #284050;z-index:800;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom)}.mobile-tabs button{background:none;border:0;color:#92aaba;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:1;font-size:21px}.mobile-tabs button span{font-size:10px}.mobile-tabs button.active{color:var(--cyan)}body.light .mobile-tabs{background:#f4fafc}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Base de mapa OSM: les tessel·les conserven l'atribució i la capa GPS queda intacta.
   El mode fosc es crea només amb CSS; no modifica les dades ni els marcadors. */
body:not(.light) #map .leaflet-tile-pane{
  filter:invert(1) hue-rotate(180deg) brightness(.69) contrast(1.12) saturate(.7);
}
body.light #map .leaflet-tile-pane{filter:none}
.leaflet-control-attribution{max-width:calc(100% - 12px);font-size:10px!important}
@media(max-width:780px){
  #map .leaflet-bottom.leaflet-right{bottom:65px}
  .legend{bottom:113px}
}