.tramos-map-host { display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; width:100%; }
.tramos-map-wrapper { flex:1 1 0%; min-width:0; display:flex; flex-direction:column; gap:20px; position:relative; }
.tramos-mapa-map { position:relative; flex:1 1 auto; min-height:520px; width:100%; border:1px solid #ddd; border-radius:6px; overflow:hidden; }
.tramos-info-panel { position:absolute; top:32px; width:420px; max-width:calc(100% - 64px); pointer-events:none; z-index:900; display:flex; opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity .25s ease, transform .25s ease; }
.tramos-info-panel.is-active { opacity:1; visibility:visible; transform:translateY(0); }
.tramos-info-panel--right { right:24px; justify-content:flex-end; }
.tramos-info-panel--left { left:24px; justify-content:flex-start; }
.tramos-info-panel__inner { width:100%; pointer-events:auto; background:linear-gradient(150deg, rgba(9,16,27,0.96), rgba(13,23,36,0.96)); border:1px solid rgba(94,234,212,0.18); border-radius:18px; box-shadow:0 28px 56px rgba(8,16,28,0.6); padding:20px 22px; display:flex; flex-direction:column; gap:16px; max-height:calc(100vh - 120px); overflow:hidden; }
.tramos-info-panel.is-idle .tramos-info-panel__inner { opacity:.88; }
.tramos-info-panel__header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tramos-info-panel__title { font-size:12px; text-transform:uppercase; letter-spacing:.7px; font-weight:700; color:#5eead4; }
.tramos-info-panel__close { border:0; background:rgba(37,186,203,0.16); color:#5eead4; padding:6px 14px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.55px; text-transform:uppercase; cursor:pointer; transition:background .2s ease, color .2s ease; }
.tramos-info-panel__close:hover { background:rgba(37,186,203,0.28); color:#bffdf3; }
.tramos-info-panel__close:focus { outline:none; box-shadow:0 0 0 2px rgba(94,234,212,0.3); }
.tramos-info-panel__body { flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding-right:6px; }
.tramos-info-panel__body::-webkit-scrollbar { width:6px; }
.tramos-info-panel__body::-webkit-scrollbar-thumb { background:rgba(94,234,212,0.25); border-radius:999px; }
.tramos-info-panel__placeholder { display:flex; flex-direction:column; gap:12px; padding:24px 10px; color:rgba(148,163,184,0.85); text-align:left; }
.tramos-info-panel__placeholder-title { font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:#5eead4; font-weight:700; }
.tramos-info-panel__placeholder-text { font-size:13px; line-height:1.5; color:rgba(203,213,225,0.86); }
.tramos-info-panel__status { margin-top:12px; }
.tramos-info-panel__status--error { margin-top:18px; }
.tramos-info-panel__loading { display:flex; align-items:center; gap:12px; padding:12px 4px; color:rgba(148,163,184,0.88); font-size:13px; letter-spacing:.2px; }
.tramos-info-panel__loading-text { font-weight:600; text-transform:none; }
.tramos-info-panel__spinner { width:18px; height:18px; border-radius:50%; border:2px solid rgba(94,234,212,0.18); border-top-color:rgba(94,234,212,0.85); animation:tramos-spin .9s linear infinite; }
.tramos-info-panel__error { padding:14px 4px; border-radius:12px; border:1px solid rgba(248,113,113,0.25); background:rgba(248,113,113,0.1); color:#fecaca; font-size:13px; font-weight:600; letter-spacing:.3px; }
.tramos-info-section { display:flex; flex-direction:column; gap:12px; }
.tramos-info-section--headline { gap:8px; }
.tramos-info-section__kicker { font-size:11px; text-transform:uppercase; letter-spacing:.65px; color:#38bdf8; font-weight:600; }
.tramos-info-section__headline { font-size:20px; font-weight:700; color:#f8fafc; line-height:1.2; text-shadow:0 14px 28px rgba(8,16,28,0.46); }
.tramos-info-section__subheadline { font-size:13px; color:rgba(148,163,184,0.85); font-weight:500; }
.tramos-info-meta-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.tramos-info-meta-card { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:12px; background:linear-gradient(150deg, rgba(22,33,45,0.9), rgba(15,24,36,0.9)); border:1px solid rgba(94,234,212,0.08); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); }
.tramos-info-meta-card__label { font-size:10px; text-transform:uppercase; letter-spacing:.55px; color:rgba(148,163,184,0.75); font-weight:600; }
.tramos-info-meta-card__value { font-size:14px; font-weight:600; color:#f8fafc; text-shadow:0 2px 6px rgba(2,6,23,0.35); }
.tramos-info-tags { display:flex; flex-wrap:wrap; gap:8px; }
.tramos-info-tag { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(37,186,203,0.16); border:1px solid rgba(37,186,203,0.26); color:#cbd5f5; font-size:11px; font-weight:600; letter-spacing:.35px; }
.tramos-info-tag__label { text-transform:uppercase; letter-spacing:.6px; color:#5eead4; }
.tramos-info-tag__value { color:#f8fafc; }
.tramos-info-section--points { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.tramos-info-point { display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:12px; background:linear-gradient(145deg, rgba(17,27,40,0.92), rgba(13,22,34,0.92)); border:1px solid rgba(94,234,212,0.08); }
.tramos-info-point__label { font-size:11px; text-transform:uppercase; letter-spacing:.55px; color:rgba(148,163,184,0.85); font-weight:600; }
.tramos-info-point__name { font-size:13px; font-weight:600; color:#f8fafc; }
.tramos-info-point__coords { font-size:12px; font-family:"JetBrains Mono", "Fira Mono", "SFMono-Regular", monospace; color:rgba(94,234,212,0.85); letter-spacing:.4px; }
.tramos-info-panel.is-active .tramos-info-panel__inner { opacity:1; }
.tramos-popup { font-size:12px; display:flex; flex-direction:column; gap:6px; padding:16px 20px; border-radius:16px; background:rgba(12,20,32,0.95); border:1px solid rgba(94,234,212,0.2); box-shadow:0 24px 50px rgba(5,12,24,0.55); min-width:220px; max-width:320px; color:#e2e8f0; }
.tramos-popup__row { display:flex; flex-direction:column; align-items:flex-start; gap:4px; line-height:1.45; padding:8px 0; border-bottom:1px solid rgba(148,163,184,0.12); }
.tramos-popup__row:first-child { padding-top:4px; }
.tramos-popup__row:last-child { border-bottom:0; padding-bottom:2px; }
.tramos-popup__row--standalone { align-items:center; text-align:center; font-weight:600; color:#5eead4; padding:10px 0; border-bottom:0; }
.tramos-popup__label { font-weight:600; text-transform:uppercase; letter-spacing:.55px; font-size:11px; color:rgba(148,163,184,0.8); }
.tramos-popup__separator { display:none; }
.tramos-popup__value { font-weight:600; color:#f8fafc; text-align:left; word-break:break-word; font-size:13px; letter-spacing:.1px; }
.tramos-popup__point { display:flex; flex-direction:column; gap:6px; padding:12px 0; border-bottom:1px solid rgba(148,163,184,0.14); }
.tramos-popup__point .tramos-popup__label { display:block; }
.tramos-popup__point-body { display:flex; flex-direction:column; gap:2px; padding-left:0; }
.tramos-popup__point-name { font-weight:600; color:#f8fafc; }
.tramos-popup__point-coords { font-size:12px; font-family:"JetBrains Mono", "Fira Mono", "SFMono-Regular", monospace; color:rgba(94,234,212,0.85); letter-spacing:.4px; }
.tramos-popup__divider { width:100%; height:1px; background:rgba(148,163,184,0.18); margin:4px 0 10px; }
.tramos-popup__section-title { font-size:11px; letter-spacing:.6px; font-weight:700; text-transform:uppercase; color:#5eead4; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.tramos-popup__meta-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.tramos-popup__meta-item { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:12px; background:linear-gradient(150deg, rgba(22,33,45,0.86), rgba(15,24,36,0.88)); border:1px solid rgba(94,234,212,0.08); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); }
.tramos-popup__meta-label { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:rgba(148,163,184,0.75); font-weight:600; }
.tramos-popup__meta-value { font-size:14px; font-weight:600; color:#f8fafc; text-shadow:0 2px 6px rgba(2,6,23,0.35); }
.tramos-popup__tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.tramos-popup__tag { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; background:rgba(37,186,203,0.12); border:1px solid rgba(37,186,203,0.2); color:#cbd5f5; font-size:11px; font-weight:600; letter-spacing:.3px; }
.tramos-popup__tag-label { text-transform:uppercase; letter-spacing:.55px; color:#5eead4; }
.tramos-popup__tag-value { color:#f8fafc; }
.tramos-popup--station { gap:10px; }
.tramos-popup__realtime,
.tramos-info-panel__realtime { position:relative; display:flex; flex-direction:column; gap:16px; padding:18px; border-radius:18px; background:linear-gradient(135deg, rgba(13,20,29,0.96), rgba(18,30,42,0.94)); border:1px solid rgba(94,234,212,0.18); box-shadow:0 22px 48px rgba(5,12,24,0.55); overflow:hidden; }
.tramos-info-panel__realtime { margin-top:4px; }
.tramos-popup__realtime::before,
.tramos-info-panel__realtime::before { content:""; position:absolute; inset:-80% 50% 40% -50%; background:radial-gradient(circle at center, rgba(94,234,212,0.35), rgba(94,234,212,0)); opacity:.35; pointer-events:none; transform:rotate(4deg); }
.tramos-realtime { position:relative; display:flex; flex-direction:column; gap:14px; z-index:1; color:#cbd5f5; }
.tramos-realtime__header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.tramos-realtime__title { font-size:13px; font-weight:700; letter-spacing:.65px; text-transform:uppercase; color:#5eead4; }
.tramos-realtime__updated { display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(148,163,184,0.95); }
.tramos-realtime__updated-label { font-weight:600; text-transform:uppercase; letter-spacing:.45px; color:#38bdf8; }
.tramos-realtime__updated-value { font-weight:600; color:#e2e8f0; }
.tramos-realtime__grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.tramos-realtime__metric { position:relative; display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:14px; background:linear-gradient(160deg, rgba(28,41,55,0.92), rgba(18,27,39,0.92)); border:1px solid rgba(94,234,212,0.1); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 28px rgba(5,12,24,0.45); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tramos-realtime__metric::after { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(94,234,212,0.12); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.tramos-realtime__metric:hover { transform:translateY(-3px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 18px 40px rgba(5,12,24,0.55); border-color:rgba(94,234,212,0.28); }
.tramos-realtime__metric:hover::after { opacity:1; }
.tramos-realtime__metric-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:rgba(148,163,184,0.9); }
.tramos-realtime__metric-value { display:flex; align-items:baseline; gap:6px; font-size:22px; font-weight:700; color:#f8fafc; text-shadow:0 2px 8px rgba(2,6,23,0.35); }
.tramos-realtime__metric-unit { font-size:11px; font-weight:600; letter-spacing:.45px; text-transform:uppercase; color:#38bdf8; }
.tramos-realtime__metric-delta { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:11px; color:rgba(148,163,184,0.85); }
.tramos-realtime__metric--trend-up .tramos-realtime__metric-value { color:#5eead4; }
.tramos-realtime__metric--trend-down .tramos-realtime__metric-value { color:#f87171; }
.tramos-realtime__metric--trend-up .tramos-realtime__trend-icon { color:#34d399; }
.tramos-realtime__metric--trend-down .tramos-realtime__trend-icon { color:#f87171; }
.tramos-realtime__metric--trend-steady .tramos-realtime__trend-icon { color:#60a5fa; }
.tramos-realtime__trend-icon { font-size:11px; line-height:1; }
.tramos-realtime__delta-value { font-weight:600; color:#e2e8f0; }
.tramos-realtime__delta-label { opacity:.7; }
.tramos-realtime__trend-label { font-weight:500; color:rgba(94,234,212,0.92); }
.tramos-realtime__footer { display:flex; flex-wrap:wrap; gap:8px 12px; font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:rgba(148,163,184,0.75); }
.tramos-realtime__dot { color:rgba(94,234,212,0.35); }
.tramos-realtime__source-label { font-weight:600; color:#5eead4; }
.tramos-realtime__caption { font-weight:500; color:rgba(148,163,184,0.85); }
.tramos-realtime__skeleton-text { font-size:11px; color:rgba(148,163,184,0.65); letter-spacing:.45px; text-transform:uppercase; }
.tramos-realtime__skeleton-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.tramos-realtime__skeleton-card { position:relative; border-radius:12px; height:64px; background:linear-gradient(140deg, rgba(26,38,52,0.8), rgba(17,27,40,0.8)); overflow:hidden; border:1px solid rgba(94,234,212,0.08); }
.tramos-realtime__skeleton-card::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(94,234,212,0), rgba(94,234,212,0.25), rgba(94,234,212,0)); transform:translateX(-100%); animation:tramos-realtime-shimmer 1.8s infinite; }
.tramos-realtime__spinner { width:18px; height:18px; border-radius:50%; border:2px solid rgba(94,234,212,0.25); border-top-color:rgba(94,234,212,0.9); animation:tramos-spin .9s linear infinite; }
.tramos-realtime__empty, .tramos-realtime__error { font-size:12px; font-weight:600; color:#e2e8f0; }
.tramos-realtime__error { color:#f87171; }
.tramos-realtime__retry { align-self:flex-start; padding:9px 18px; border-radius:12px; border:1px solid rgba(94,234,212,0.25); background:linear-gradient(135deg, rgba(34,197,214,0.9), rgba(56,189,248,0.9)); color:#0b1120; font-size:11px; font-weight:700; letter-spacing:.55px; text-transform:uppercase; cursor:pointer; box-shadow:0 16px 28px rgba(13,148,136,0.3); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tramos-realtime__retry:hover { transform:translateY(-2px); box-shadow:0 20px 38px rgba(13,148,136,0.38); border-color:rgba(94,234,212,0.4); }
.tramos-realtime__retry:focus { outline:none; box-shadow:0 0 0 2px rgba(94,234,212,0.3); }
.tramos-realtime--empty .tramos-realtime__empty { opacity:.9; }
.tramos-realtime--loading .tramos-realtime__grid,
.tramos-realtime--loading .tramos-realtime__footer { opacity:.55; }
.tramos-realtime--error .tramos-realtime__retry { margin-top:6px; }
.tramos-realtime--error .tramos-realtime__header { margin-bottom:6px; }
.tramos-realtime__trend-icon[aria-hidden="true"] { display:inline-flex; align-items:center; justify-content:center; }
.leaflet-popup { background:transparent !important; border:none; box-shadow:none; }
.leaflet-popup-content-wrapper { border-radius:18px; background:transparent !important; border:0; box-shadow:none; padding:0; }
.leaflet-popup-content { margin:0; padding:0; }
.leaflet-container .leaflet-popup-close-button { top:10px; right:8px; width:28px; height:28px; border-radius:50%; background:rgba(15,26,38,0.88); color:#cbd5f5; font-size:16px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(94,234,212,0.22); transition:background .2s ease, color .2s ease, border-color .2s ease; }
.leaflet-container .leaflet-popup-close-button:hover { background:rgba(17,30,44,0.92); color:#67e8f9; border-color:rgba(94,234,212,0.32); }
.leaflet-container .leaflet-popup-close-button:focus { outline:none; box-shadow:0 0 0 2px rgba(94,234,212,0.35); }
.leaflet-popup-tip { background:rgba(12,20,32,0.95); border:1px solid rgba(94,234,212,0.2); box-shadow:0 12px 24px rgba(5,12,24,0.45); }

.tramos-point-marker { display:flex; align-items:center; justify-content:center; width:20px; height:20px; font-size:18px; line-height:1; font-weight:700; text-align:center; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.75); pointer-events:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.tramos-point-marker span { display:block; transform:translateY(-1px); }
.tramos-point-start { color:#2ca25f; }
.tramos-point-end { color:#de2d26; }
.tramos-station-marker { color:#0ea5e9; }

.tramos-map-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:rgba(0,36,46,0.78); color:#fff; font-size:14px; font-weight:600; z-index:800; transition:opacity .25s ease; }
.tramos-map-loading.is-hidden { opacity:0; pointer-events:none; }
.tramos-map-spinner { width:36px; height:36px; border:3px solid rgba(255,255,255,0.25); border-top-color:#2ec7c9; border-radius:50%; animation:tramos-spin 1s linear infinite; }

@keyframes tramos-spin {
	from { transform:rotate(0deg); }
	to { transform:rotate(360deg); }
}

@keyframes tramos-realtime-shimmer {
	0% { transform:translateX(-100%); }
	100% { transform:translateX(100%); }
}

.tramos-filters { position:relative; width:320px; max-height:calc(100vh - 80px); overflow:auto; padding:20px 20px 16px; border-radius:14px; background:rgba(15,22,28,0.88); color:#f1f5f9; box-shadow:0 12px 32px rgba(0,0,0,0.35); backdrop-filter:blur(8px); margin-bottom:20px; }
.tramos-filters::-webkit-scrollbar { width:8px; }
.tramos-filters::-webkit-scrollbar-thumb { background:rgba(94,110,131,0.55); border-radius:4px; }

.tramos-filters__header { position:relative; font-size:16px; font-weight:600; margin-bottom:16px; padding-bottom:12px; text-transform:none; letter-spacing:.3px; }
.tramos-filters__header::after { content:""; position:absolute; left:0; bottom:0; width:56px; height:2px; border-radius:999px; background:#2ec7c9; }
.tramos-filters__title { margin-bottom:6px; }
.tramos-filters__clear { width:100%; padding:10px 14px; border-radius:10px; border:0; background:rgba(46,199,201,0.18); color:#2ec7c9; font-weight:600; cursor:pointer; transition:background .2s ease, color .2s ease; margin-bottom:16px; }
.tramos-filters__clear:hover { background:rgba(46,199,201,0.28); color:#64f1f4; }
.tramos-filter-field { display:flex; flex-direction:column; margin-bottom:0; font-size:13px; }
.tramos-filter-field label { margin-bottom:6px; text-transform:uppercase; letter-spacing:.8px; font-size:12px; color:#8fa3b8; }
.tramos-filter-fields { display:flex; flex-direction:column; gap:14px; }
.tramos-filter-select { background:rgba(27,37,45,0.85); border:1px solid rgba(72,87,99,0.7); border-radius:10px; padding:10px 12px; color:#e2e8f0; font-size:14px; appearance:none; transition:border-color .2s ease, box-shadow .2s ease; }
.tramos-filter-select:focus { border-color:#2ec7c9; box-shadow:0 0 0 2px rgba(46,199,201,0.25); outline:none; }
.tramos-filters__footer { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.tramos-layer-toggles { margin:18px 0 0; padding:14px 12px; border-radius:12px; background:rgba(27,35,43,0.85); border:1px solid rgba(55,70,91,0.6); display:flex; flex-direction:column; gap:10px; }
.tramos-layer-toggles__title { font-size:13px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#96b4ce; }
.tramos-layer-toggle { display:flex; align-items:center; gap:10px; font-size:13px; color:#e2e8f0; cursor:pointer; user-select:none; }
.tramos-layer-toggle__checkbox { width:16px; height:16px; accent-color:#2ec7c9; cursor:pointer; }
.tramos-layer-toggle__label { flex:1 1 auto; }
.tramos-filters__count { margin-top:12px; padding:12px; border-radius:10px; background:rgba(32,41,49,0.9); text-align:center; color:#8ee5e7; font-size:14px; font-weight:600; }
.tramos-count-number { display:block; font-size:18px; font-weight:700; color:#2ec7c9; }

.tramos-layout-left { flex-direction:row; align-items:stretch; }
.tramos-layout-right { flex-direction:row; align-items:stretch; }
.tramos-layout-top,
.tramos-layout-bottom { flex-direction:column; align-items:stretch; }
.tramos-layout-left .tramos-filters,
.tramos-layout-right .tramos-filters { flex:0 0 320px; margin-bottom:0; }
.tramos-layout-top .tramos-filters,
.tramos-layout-bottom .tramos-filters { width:100%; max-height:none; flex:0 0 auto; }
.tramos-layout-bottom .tramos-filters { margin:0; }
.tramos-layout-top .tramos-filters { margin:0; }
.tramos-filters--horizontal { padding:18px 24px 20px; }
.tramos-filters--horizontal .tramos-filter-fields { flex-direction:row; flex-wrap:wrap; gap:16px; margin-bottom:6px; }
.tramos-filters--horizontal .tramos-filter-field { flex:1 1 180px; min-width:180px; margin-bottom:0; }
.tramos-filters--horizontal .tramos-filter-select { width:100%; }
.tramos-filters--horizontal .tramos-filters__footer { flex-direction:row; align-items:center; justify-content:space-between; gap:24px; margin-top:10px; }
.tramos-filters--horizontal .tramos-layer-toggles { flex-direction:row; align-items:center; justify-content:flex-start; padding:8px 12px; margin:0; background:rgba(27,35,43,0.75); gap:16px; border-radius:999px; align-self:flex-start; }
.tramos-filters--horizontal .tramos-layer-toggles__title { margin-right:6px; }
.tramos-filters--horizontal .tramos-layer-toggle { gap:8px; }
.tramos-filters--horizontal .tramos-layer-toggle__label { flex:0 0 auto; }
.tramos-filters--horizontal .tramos-filters__count { margin-top:0; margin-left:auto; padding:10px 18px; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px; min-width:200px; }
.tramos-filters--horizontal .tramos-count-number { display:inline-block; }
.tramos-filters--horizontal .tramos-filters__clear { width:auto; max-width:none; align-self:flex-start; padding:10px 20px; }
.tramos-filters--horizontal .tramos-layer-toggle__checkbox { width:18px; height:18px; }

@media (max-width: 1024px) {
	.tramos-map-host { flex-direction:column; }
	.tramos-filters { width:100%; max-height:none; order:0; }
}

@media (max-width: 768px) {
	.tramos-info-panel { position:relative; top:0; right:auto; left:auto; width:100%; max-width:100%; margin-top:16px; }
}

@media (max-width: 480px) {
	.tramos-realtime__grid { grid-template-columns:repeat(1, minmax(0, 1fr)); }
	.tramos-realtime__skeleton-grid { grid-template-columns:repeat(1, minmax(0, 1fr)); }
	.tramos-popup__meta-grid,
	.tramos-info-meta-grid { grid-template-columns:repeat(1, minmax(0, 1fr)); }
	.tramos-info-section--points { grid-template-columns:repeat(1, minmax(0, 1fr)); }
}