
:root{
 --bg:#07111f;--panel:#0d1828;--card:#14243a;--card2:#101f33;--text:#f6f8fb;--muted:#9bacbf;
 --border:#253b59;--accent:#55aaff;--walk:#f4c542;--car:#4185ff;--train:#20b884;--flight:#e66bcb;--ok:#57d7a5;--warn:#e7a93f
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);overscroll-behavior:none}
button,input{font:inherit}
#app{height:100%;display:grid;grid-template-columns:390px minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,#0a1423,#0d1828);border-right:1px solid var(--border);padding:16px;overflow:auto;z-index:20}
.brand{font-size:21px;font-weight:850}.subtitle{font-size:13px;color:var(--muted);line-height:1.4;margin:4px 0 12px}
.group-title{font-size:10.5px;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;font-weight:850;margin-top:13px}
.row{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}
.btn{border:1px solid #2e4a70;background:#14243a;color:#fff;padding:8px 10px;border-radius:10px;font-weight:750;cursor:pointer}
.btn.active{background:#173d66;outline:2px solid var(--accent)}.btn.primary{background:#175991}.btn.warn{background:#5c3e13}.btn.good{background:#15563f}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11.5px;color:#b7c4d5;margin:7px 0 10px}
.legend span{display:flex;align-items:center;gap:6px}.sw{width:20px;height:5px;border-radius:5px}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:9px 0}
.metric{background:var(--card2);border:1px solid var(--border);border-radius:11px;padding:9px}
.metric .v{font-size:16px;font-weight:850}.metric .l{font-size:10px;color:var(--muted);margin-top:2px}
.next-card{background:linear-gradient(135deg,#163354,#122641);border:1px solid #315b84;border-radius:13px;padding:11px;margin:10px 0}
.next-card .eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#91bde5;font-weight:800}
.next-card .dest{font-size:15px;font-weight:850;margin:3px 0}.next-card .sub{font-size:11px;color:#c6d5e5}
.daycard{border:1px solid var(--border);background:var(--card);border-radius:14px;margin:9px 0;padding:11px}
.daycard h3{margin:0 0 5px;font-size:14px}.day-summary{font-size:10.5px;color:#9eb0c7;margin-bottom:5px}
.route-row{display:grid;grid-template-columns:25px minmax(0,1fr) auto;gap:6px;align-items:center;border-top:1px solid rgba(255,255,255,.06);padding:7px 0}
.route-row:first-of-type{border-top:0}.route-name{font-size:12px;line-height:1.3}.route-meta{font-size:10.5px;color:var(--muted);margin-top:2px}
.route-actions{display:flex;gap:5px;align-items:center}.mini{border:1px solid #365476;background:#102039;color:#dce9f7;border-radius:8px;padding:5px 7px;font-size:10px;cursor:pointer}
.route-status{font-size:10px;border:1px solid #365476;color:#b8c9dd;border-radius:999px;padding:3px 6px;white-space:nowrap}
.route-status.ok{color:#9be7cb;border-color:#277f64}.route-status.error{color:#ffb0b0;border-color:#884447}
.checklist{margin-top:8px}.check-item{display:flex;gap:8px;align-items:center;padding:5px 0;font-size:11.5px;color:#d6e0ec}.check-item input{width:16px;height:16px}
.mapwrap{position:relative;min-width:0;height:100%}#map{position:absolute;inset:0}
.mapbar{position:absolute;z-index:9;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;pointer-events:none}
.mapbar .left,.mapbar .right{display:flex;gap:7px;pointer-events:auto;flex-wrap:wrap}
.pill{background:rgba(7,17,31,.94);color:#fff;border:1px solid #355370;border-radius:10px;padding:9px 10px;font-weight:750;cursor:pointer;backdrop-filter:blur(8px)}
.status{position:absolute;z-index:8;left:12px;bottom:12px;max-width:min(620px,calc(100% - 24px));background:rgba(7,17,31,.94);border:1px solid #365473;border-radius:11px;padding:9px 11px;font-size:11.5px;color:#d5dfec}
.api-modal,.phone-modal{position:fixed;inset:0;background:rgba(2,7,14,.84);z-index:99;display:flex;align-items:center;justify-content:center;padding:18px}
.api-modal.hidden,.phone-modal.hidden{display:none}.modal{width:min(580px,100%);background:#101d31;border:1px solid #335171;border-radius:18px;padding:20px}
.modal h2{margin:0 0 7px}.modal p,.note{color:var(--muted);font-size:13px;line-height:1.45}.modal code{color:#d6e9ff;word-break:break-all}
.keyrow{display:flex;gap:8px}.keyrow input{flex:1;min-width:0;background:#091526;color:#fff;border:1px solid #385778;border-radius:10px;padding:11px 12px}
.check{display:flex;align-items:center;gap:8px;margin:10px 0;color:#c5d2e1;font-size:13px}
.drag-handle,.mobile-toggle{display:none}.info-title{font-weight:800;font-size:14px}.info-sub{font-size:12px;color:#5c6775;margin-top:4px}
@media(max-width:850px){
 #app{display:block;height:100%}.mapwrap{height:100%}
 .sidebar{position:fixed;z-index:30;left:0;right:0;bottom:0;height:min(66%,620px);border-right:0;border-top:1px solid var(--border);border-radius:18px 18px 0 0;padding:11px 13px 18px;transform:translateY(calc(100% - 62px));transition:transform .22s ease;box-shadow:0 -10px 40px rgba(0,0,0,.28)}
 .sidebar.open{transform:translateY(0)}.drag-handle{display:block;width:48px;height:5px;border-radius:6px;background:#53677f;margin:0 auto 7px}.mobile-toggle{display:inline-flex}
 .brand{font-size:16px}.subtitle{display:none}.status{bottom:69px;font-size:10.5px}.sidebar.open + .mapwrap .status{display:none}
 .summary{grid-template-columns:repeat(3,1fr)}.metric{padding:7px}.metric .v{font-size:14px}
}

.version-badge{display:inline-block;margin-left:7px;font-size:10px;vertical-align:middle;padding:3px 6px;border-radius:999px;background:#1d5b8f;border:1px solid #5aa9e9;color:white}
.route-stats{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.stat-chip{display:inline-flex;align-items:center;gap:3px;border:1px solid #385676;background:#0c1b2e;color:#dce8f6;border-radius:999px;padding:3px 6px;font-size:10px;font-weight:750}
.stat-chip.time{border-color:#7c6230;color:#ffe093}.stat-chip.dist{border-color:#315e83;color:#a9d5ff}.stat-chip.mode{border-color:#2b725d;color:#9ce5ca}
.map-summary{position:absolute;z-index:8;top:64px;left:50%;transform:translateX(-50%);display:flex;gap:7px;background:rgba(7,17,31,.94);border:1px solid #365473;border-radius:13px;padding:7px;backdrop-filter:blur(8px);box-shadow:0 7px 25px rgba(0,0,0,.18)}
.map-summary .ms{min-width:92px;text-align:center;padding:5px 7px;border-right:1px solid #29415e}
.map-summary .ms:last-child{border-right:0}
.map-summary .num{font-size:14px;font-weight:850;color:#fff}.map-summary .lbl{font-size:9px;color:#9fb1c8;margin-top:1px;text-transform:uppercase;letter-spacing:.05em}
.update-banner{background:linear-gradient(135deg,#12375c,#162b47);border:1px solid #3e6e9c;border-radius:12px;padding:9px 10px;margin:9px 0;font-size:11.5px;color:#d7e7f7}
.update-banner b{color:white}
@media(max-width:850px){
 .map-summary{top:58px;left:10px;right:10px;transform:none;justify-content:center}
 .map-summary .ms{min-width:0;flex:1}
}

/* V3.6: cronograma y rutas del 21 NOV */
.timeline{margin:10px 0;padding:9px;background:#102944;border:1px solid #32577c;border-radius:12px}
.timeline>summary{cursor:pointer;font-size:12px;font-weight:850;color:#e5f2ff;line-height:1.45}
.timeline-note{padding:8px 7px;margin:10px 0 4px;background:#493718;border-left:3px solid #e9b35a;border-radius:6px;font-size:11px;color:#ffe9b4;line-height:1.4}
.time-event{display:grid;grid-template-columns:88px 1fr 30px;align-items:start;gap:6px;padding:9px 0;border-bottom:1px solid #28405b}
.time-event:last-child{border-bottom:0}
.time-hour{font-size:11px;font-weight:850;color:#95ceff}
.time-main{font-size:11.5px;line-height:1.4}.time-main strong{display:inline;font-size:11.8px}.time-detail{font-size:11px;color:#b5c6d9;margin-top:3px}
.time-tag{font-size:9px;border:1px solid #32725d;color:#a1edcd;border-radius:999px;padding:2px 5px;margin-left:5px;white-space:nowrap}
.time-map{padding:5px;min-width:28px}.route-scheduled{font-size:11px;color:#bce2ff;font-weight:750;margin-top:4px}
.update-banner .btn{display:inline-flex;margin-top:7px;padding:6px 10px}
.daycard[data-daycard="21 NOV"]{border-color:#347c91}
@media(max-width:850px){.time-event{grid-template-columns:76px 1fr 30px}.timeline{padding:8px}}

.daycard[data-daycard="22 NOV"]{border-color:#6b78a9}

/* V3.11 mobile polish: full screen map + pull-up trip itinerary */
html,body{min-height:100%;}
@media(max-width:850px){
 html,body,#app{height:100%;height:100dvh;overflow:hidden}
 #app{height:100dvh}.mapwrap{height:100dvh;width:100vw}
 .sidebar{height:min(84dvh,850px);max-height:calc(100dvh - 48px);padding-bottom:calc(20px + env(safe-area-inset-bottom));overscroll-behavior:contain;scrollbar-width:thin;transform:translateY(calc(100% - 56px));}
 .sidebar.open{transform:translateY(0)}
 .sidebar:not(.open) .drag-handle{margin-bottom:12px}
 .mapbar{top:calc(9px + env(safe-area-inset-top));left:8px;right:8px}
 .mapbar .pill{padding:8px;font-size:12px}
 .map-summary{top:calc(55px + env(safe-area-inset-top));padding:4px;gap:2px;left:7px;right:7px}
 .map-summary .ms{padding:4px 3px}.map-summary .num{font-size:12px}.map-summary .lbl{font-size:8px}
 .status{bottom:65px;left:8px;right:8px;width:auto;max-width:unset}
 .route-row{grid-template-columns:22px minmax(0,1fr);gap:5px}
 .route-actions{grid-column:2;justify-content:flex-start}
 .row .btn{font-size:12px;padding:8px}
 .time-event{grid-template-columns:65px minmax(0,1fr) 30px}
 .sidebar .brand{line-height:1.4}
}
@media(min-width:851px){.mobile-toggle{display:none}}
