:root {
  --navy: #07162f;
  --navy-2: #102356;
  --blue: #2378f4;
  --green: #4aaa3b;
  --lime: #86c83f;
  --orange: #f27a12;
  --red: #e74b4b;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e7eaf0;
  --bg: #f4f6f8;
  --card: #fff;
  --radius: 16px;
  --shadow: 0 8px 28px rgba(21, 37, 61, .08);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--ink); background: var(--bg); }
.demo-banner { position:sticky; z-index:90; top:0; padding:8px 16px; color:#5b3b00; background:#fff1bf; border-bottom:1px solid #efd47c; text-align:center; font-size:11px; font-weight:800; letter-spacing:.35px; }
button, input { font: inherit; }
button { cursor: pointer; }
.icon { width: 21px; height: 21px; display: inline-grid; place-items: center; }
.icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.app { min-height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; color: white; font-size: 24px; font-weight: 800; letter-spacing: -.7px; }
.brand b { color: var(--lime); }
.brand-mark { width: 40px; height: 48px; display: grid; place-items: center; border-radius: 55% 55% 55% 0; transform: rotate(-45deg); background: var(--lime); color: var(--navy); }
.brand-mark .icon { transform: rotate(45deg); }

.mobile-shell { min-height: 100vh; max-width: 540px; margin: auto; background: #fff; padding-bottom: 76px; box-shadow: 0 0 35px rgba(3, 15, 35, .08); }
.mobile-header { padding: 22px 20px 18px; color: white; background: linear-gradient(145deg, #10255c, #07162f); }
.mobile-header.compact { padding-bottom: 14px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 38px; }
.topbar h1 { margin: 0; font-size: 19px; }
.topbar .ghost { color: white; }
.hello { margin: 18px 0 3px; font-size: 23px; letter-spacing: -.5px; }
.subtitle { color: #c7d0e3; margin: 0; font-size: 14px; }
.search { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding: 14px; background: white; color: var(--muted); border-radius: 10px; box-shadow: var(--shadow); }
.search input { width: 100%; border: 0; outline: 0; color: var(--ink); }
.content { padding: 18px; }
.point-hero { display: flex; align-items: center; justify-content: space-between; padding: 18px; border-radius: 12px; color: white; background: linear-gradient(135deg, #07162f, #10255c); }
.point-hero small, .point-hero p { color: #cbd4e4; }
.point-hero h2 { margin: 5px 0; font-size: 20px; }
.point-hero p { margin: 0; font-size: 13px; }
.round-action { width: 54px; height: 54px; border: 0; border-radius: 50%; display: grid; place-items: center; color: #173410; background: var(--lime); }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.section-title h2 { margin: 0; font-size: 17px; }
.link-btn { border: 0; background: none; color: #17644f; font-size: 12px; }
.card { border: 1px solid #edf0f4; background: white; border-radius: var(--radius); box-shadow: var(--shadow); }
.route-list { overflow: hidden; }
.route-row { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.empty-list{display:grid;place-items:center;padding:28px;color:var(--muted);font-size:12px;text-align:center}
.route-row:last-child { border-bottom: 0; }
.route-code { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 9px; color: white; font-weight: 700; font-size: 16px; }
.route-copy { min-width: 0; flex: 1; }
.route-copy strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-copy small { color: var(--muted); font-size: 10px; }
.eta { text-align: right; }
.eta small { color: var(--muted); font-size: 9px; display: block; }
.eta strong { font-size: 14px; }
.green { color: var(--green); } .blue { color: var(--blue); } .orange { color: var(--orange); }
.promo { margin-top: 14px; padding: 14px; color: white; background: linear-gradient(120deg, #0c2450, #172f6d); border-radius: 12px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; }
.promo b { color: var(--lime); }

.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%); width: min(540px, 100%); height: 72px; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
.nav-btn { border: 0; background: transparent; color: #7b8391; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-size: 9px; }
.nav-btn.active { color: var(--green); font-weight: 700; }

.map { position: relative; min-height: 390px; overflow: hidden; background-color: #eef0e9; background-image: linear-gradient(33deg, transparent 46%, #fff 47%, #fff 50%, transparent 51%), linear-gradient(-22deg, transparent 45%, #fff 46%, #fff 50%, transparent 51%), linear-gradient(90deg, transparent 48%, rgba(255,255,255,.8) 49%, rgba(255,255,255,.8) 51%, transparent 52%); background-size: 170px 140px, 220px 170px, 100px 100px; }
.map:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(186,221,161,.42) 0 32px, transparent 33px), radial-gradient(circle at 82% 72%, rgba(180,218,239,.45) 0 48px, transparent 49px); pointer-events: none; }
.real-map { z-index:1; background:#e9ece6; background-image:none; }
.real-map:after { display:none; }
.bus-map-icon { background:transparent!important; border:0!important; }
.bus-map-icon>span { width:38px; height:38px; display:grid; place-items:center; border:3px solid white; border-radius:50%; color:white; box-shadow:0 3px 10px rgba(0,0,0,.3); }
.bus-map-icon .icon { width:20px; height:20px; }
.leaflet-popup-content { font-family:Inter,system-ui,sans-serif; font-size:12px; line-height:1.6; }
.leaflet-control-attribution { font-size:9px!important; }
.map-demo-notice{position:absolute;z-index:1000;left:50%;top:12px;transform:translateX(-50%);padding:7px 11px;border-radius:7px;color:#614100;background:#fff1bf;border:1px solid #e8ca66;box-shadow:0 3px 12px #0002;font-size:9px;font-weight:800;white-space:nowrap;pointer-events:none}
/* Leaflet essencial incorporado para o mapa não depender do CSS da CDN. */
.leaflet-container{overflow:hidden;outline:0;-webkit-tap-highlight-color:transparent}.leaflet-container,.leaflet-pane{position:relative}.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-map-pane svg,.leaflet-map-pane canvas,.leaflet-zoom-box{position:absolute;left:0;top:0}.leaflet-map-pane{z-index:400}.leaflet-tile-pane{z-index:200}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}.leaflet-control{position:relative;z-index:800;pointer-events:auto}.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}.leaflet-top .leaflet-control{margin-top:10px}.leaflet-left .leaflet-control{margin-left:10px}.leaflet-right .leaflet-control{margin-right:10px}.leaflet-bottom .leaflet-control{margin-bottom:10px}.leaflet-tile{visibility:hidden;user-select:none;-webkit-user-drag:none}.leaflet-tile-loaded{visibility:inherit}.leaflet-zoom-animated{transform-origin:0 0}.leaflet-control-zoom a{display:block;width:30px;height:30px;border-bottom:1px solid #ddd;color:#253248;background:#fff;text-align:center;text-decoration:none;font:bold 18px/30px Arial}.leaflet-control-zoom a:first-child{border-radius:5px 5px 0 0}.leaflet-control-zoom a:last-child{border-radius:0 0 5px 5px;border-bottom:0}.leaflet-control-attribution{padding:3px 6px;background:rgba(255,255,255,.82);color:#555}.leaflet-control-attribution a{color:#1769aa}.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}.leaflet-popup-content-wrapper{padding:1px;border-radius:10px;background:white;box-shadow:0 4px 20px #0003}.leaflet-popup-content{margin:13px 18px}.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-left:-20px;overflow:hidden}.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;transform:rotate(45deg);background:white;box-shadow:3px 3px 7px #0002}
.map-line { position: absolute; z-index: 2; left: 18%; top: 24%; width: 66%; height: 45%; border: 4px dashed var(--green); border-left-color: transparent; border-radius: 40% 28% 38% 15%; transform: rotate(9deg); }
.marker { position: absolute; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; color: white; background: var(--green); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.marker.bus { background: var(--blue); }
.filter-pill { position: absolute; z-index: 4; top: 18px; left: 18px; border: 0; border-radius: 13px; padding: 12px 16px; background: white; box-shadow: var(--shadow); font-weight: 600; }
.floating-sheet { position: relative; z-index: 5; margin: -30px 14px 0; border-radius: 17px 17px 0 0; background: white; box-shadow: 0 -5px 25px rgba(0,0,0,.08); }
.floating-sheet .section-title { padding: 18px 16px 8px; margin: 0; }
.vehicle-card { padding: 16px; }
.vehicle-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); }
.vehicle-title { display:flex; gap:12px; align-items:center; }
.vehicle-title .round-action { width:42px; height:42px; }
.next-stop { display:flex; justify-content:space-between; padding-top:14px; }
.next-stop small { display:block; color:var(--muted); margin-bottom:5px; }
.timeline { padding: 6px 18px 24px; }
.stop { position:relative; padding:12px 0 12px 29px; border-left:2px solid #d5dfd1; margin-left:7px; }
.stop:before { content:""; position:absolute; left:-7px; top:17px; width:10px; height:10px; border:2px solid var(--green); border-radius:50%; background:white; }
.stop.current:before { background:var(--green); box-shadow:0 0 0 5px #e6f4e3; }
.stop small { color:var(--muted); display:block; margin-top:4px; }

.filter-tabs { display:flex; gap:8px; overflow:auto; padding-bottom:4px; }
.chip { white-space:nowrap; border:1px solid var(--line); background:white; color:var(--muted); border-radius:99px; padding:9px 13px; }
.chip.active { color:white; border-color:var(--navy); background:var(--navy); }
.line-card { margin-top:12px; padding:16px; display:flex; gap:14px; align-items:flex-start; }
.line-card .route-code { border-radius:50%; }
.line-meta { margin-top:11px; display:flex; gap:15px; color:var(--muted); font-size:11px; }
.line-meta span { display:flex; align-items:center; gap:5px; }
.point-details { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:15px 0; }
.detail { padding:14px; display:flex; gap:10px; align-items:center; color:#3d4654; font-size:12px; }
.primary-btn { width:100%; border:0; border-radius:11px; padding:14px; color:white; background:var(--blue); font-weight:700; }

.admin { display:grid; grid-template-columns:238px minmax(0,1fr); min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; padding:22px 16px; color:#c7cfdb; background:linear-gradient(175deg, #081a35, #061225); }
.sidebar-label { margin:36px 8px 10px; font-size:10px; text-transform:uppercase; letter-spacing:.7px; }
.side-nav { display:flex; flex-direction:column; gap:3px; }
.side-btn { display:flex; align-items:center; gap:12px; border:0; border-radius:8px; padding:11px 12px; color:inherit; background:transparent; text-align:left; }
.side-btn.active { color:white; background:linear-gradient(90deg, #32862c, #58ae38); }
.admin-user { position:absolute; left:16px; right:16px; bottom:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); display:flex; gap:10px; align-items:center; }
.avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#dde3ea; color:var(--navy); font-weight:700; }
.admin-main { min-width:0; }
.admin-top { height:74px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; background:white; border-bottom:1px solid var(--line); }
.admin-top h1 { font-size:21px; }
.toolbar { display:flex; gap:10px; }
.toolbar button { padding:10px 13px; border:1px solid var(--line); border-radius:8px; background:white; }
.dashboard { padding:20px; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat { padding:18px; display:flex; align-items:flex-start; gap:12px; }
.stat-icon { width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; background:#e8f0ff; color:var(--blue); }
.stat strong { display:block; font-size:23px; }
.stat small { color:var(--muted); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(280px,.8fr); gap:16px; margin-top:16px; }
.panel { overflow:hidden; }
.panel-title { display:flex; justify-content:space-between; padding:15px 16px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px; }
.panel .map { min-height:400px; }
.alert { padding:15px; display:flex; gap:11px; border-bottom:1px solid var(--line); }
.alert:last-child { border:0; }
.alert-icon { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:50%; background:#fff0f0; color:var(--red); }
.alert strong, .alert small { display:block; }
.alert strong { font-size:12px; margin-bottom:4px; }
.alert small { color:var(--muted); font-size:10px; line-height:1.5; }
.lower-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.bars { padding:18px; }
.bar-row { display:grid; grid-template-columns:65px 1fr 38px; gap:10px; align-items:center; font-size:11px; margin:20px 0; }
.bar-track { height:7px; background:#edf0f4; border-radius:99px; overflow:hidden; }
.bar-fill { height:100%; border-radius:99px; background:var(--green); }
.chart { padding:16px; height:190px; display:flex; align-items:flex-end; gap:5px; border-bottom:1px solid #eff1f4; }
.chart i { flex:1; min-width:4px; border-radius:4px 4px 0 0; background:linear-gradient(#5ab04c, #dff0dc); }
.mobile-only { display:none; }
.toast { position:fixed; z-index:100; right:24px; bottom:-80px; padding:13px 18px; border-radius:10px; color:white; background:#267d31; box-shadow:var(--shadow); opacity:0; transition:.25s; }
.toast.show { bottom:24px; opacity:1; }
.toast.bad { background:#b22f2f; }
.management-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.management-head h2 { margin:0 0 5px; }
.management-head p { margin:0; color:var(--muted); font-size:13px; }
.compact-btn { width:auto; padding:11px 16px; }
.data-table { overflow:auto; }
table { width:100%; border-collapse:collapse; background:white; }
th,td { padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; font-size:12px; white-space:nowrap; }
th { color:var(--muted); background:#fafbfc; font-size:10px; text-transform:uppercase; letter-spacing:.4px; }
td small { display:block; margin-top:4px; color:var(--muted); }
.status { display:inline-flex; padding:5px 9px; border-radius:99px; color:#237a31; background:#e9f7e8; font-size:10px; font-weight:700; }
.status.stopped { color:#b0640b; background:#fff2df; }
.status.offline { color:#757b85; background:#eceef1; }
.table-btn { border:1px solid var(--line); border-radius:7px; padding:7px 9px; margin-right:5px; color:#334155; background:white; }
.table-btn.danger { color:#c33d3d; }
.manage-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.manage-card { display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:14px; padding:17px; }
.manage-card h3 { margin:2px 0 7px; font-size:14px; }
.manage-card p { margin:0 0 10px; color:var(--muted); font-size:11px; line-height:1.5; }
.manage-actions { white-space:nowrap; }
.live-dot { color:#3b9b37; font-size:11px; font-weight:800; }
.empty-state { min-height:400px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); }
.empty-state>.icon { width:46px; height:46px; color:var(--blue); }
.empty-state h2 { color:var(--ink); margin-bottom:4px; }
.empty-state p { max-width:430px; }
.modal-backdrop { position:fixed; z-index:200; inset:0; padding:20px; display:grid; place-items:center; background:rgba(2,10,26,.62); backdrop-filter:blur(3px); }
.modal { width:min(560px,100%); padding:22px; border-radius:16px; background:white; box-shadow:0 24px 70px rgba(0,0,0,.24); }
.modal-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.modal-title h2 { margin:0; font-size:19px; }
.modal-title button { border:0; background:none; font-size:27px; color:var(--muted); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid label { display:flex; flex-direction:column; gap:7px; color:#4b5563; font-size:11px; font-weight:600; }
.form-grid input,.form-grid select { width:100%; padding:11px 12px; border:1px solid #dce1e8; border-radius:8px; color:var(--ink); background:white; }
.modal-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:22px; }
.activation-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px}.activation-form label{display:flex;flex-direction:column;gap:7px;color:#4b5563;font-size:11px;font-weight:700}.activation-form select{padding:12px;border:1px solid #dce1e8;border-radius:8px;background:white}.activation-form button{align-self:end}.activation-result{margin-top:16px;padding:20px}.activation-result h3{margin-top:0}.activation-result p{color:var(--muted);font-size:12px}.activation-code{margin:14px 0;padding:14px;border-radius:8px;background:#f1f5f9;font-family:monospace;font-size:12px;line-height:1.5;word-break:break-all}

@media (max-width: 900px) {
  .admin { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .stats { grid-template-columns:1fr 1fr; }
  .dashboard-grid { grid-template-columns:1fr; }
  .admin-top { padding:0 16px; }
  .mobile-only { display:block; }
  .manage-grid { grid-template-columns:1fr; }
}
@media (max-width: 540px) {
  .stats { grid-template-columns:1fr 1fr; gap:9px; }
  .stat { padding:13px 10px; gap:8px; }
  .stat strong { font-size:18px; }
  .stat-icon { width:34px; height:34px; }
  .lower-grid { grid-template-columns:1fr; }
  .dashboard { padding:12px; }
  .toolbar button:first-child { display:none; }
  .admin-top h1 { font-size:18px; }
  .form-grid { grid-template-columns:1fr; }
  .activation-form { grid-template-columns:1fr; }
  .management-head { align-items:flex-start; flex-direction:column; }
  .manage-card { grid-template-columns:auto 1fr; }
  .manage-actions { grid-column:2; }
}