/* Demo piloto: centro de control de flota GR Travels */
:root {
    --tracking-ink: #182433;
    --tracking-muted: #6b7a8c;
    --tracking-line: #e8edf3;
    --tracking-soft: #f5f8fb;
    --tracking-blue: #1769e0;
    --tracking-orange: #ee8b2b;
    --tracking-purple: #8062d9;
    --tracking-green: #1aaf72;
}

.tracking-page { background: #f4f7fb; color: var(--tracking-ink); font-size: 14px; }
.tracking-page h1, .tracking-page h2, .tracking-page h3, .tracking-page p { margin-top: 0; }
.tracking-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; }
.tracking-topbar { background: #fff; border-bottom: 1px solid var(--tracking-line); }
.tracking-topbar-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tracking-brand { display: inline-flex; align-items: center; gap: 0.9rem; color: var(--tracking-ink); font-weight: 700; }
.tracking-brand img { width: 142px; height: auto; object-fit: contain; }
.tracking-brand-divider { width: 1px; height: 30px; background: var(--tracking-line); }
.tracking-brand-label { color: var(--tracking-muted); font-size: 0.83rem; font-weight: 500; letter-spacing: 0.02em; }
.tracking-topbar-actions { display: flex; align-items: center; gap: 1.3rem; }
.demo-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem; border: 1px solid #bdebd5; border-radius: 99px; background: #effbf5; color: #16835a; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.demo-dot, .sync-dot, .live-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--tracking-green); box-shadow: 0 0 0 4px rgba(26, 175, 114, 0.12); }
.tracking-back-link { color: var(--tracking-muted); font-size: 0.85rem; font-weight: 600; }
.tracking-back-link:hover { color: var(--tracking-blue); }
.tracking-main { padding: 2.2rem 0 3rem; }
.tracking-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 1.7rem; }
.eyebrow, .panel-kicker { margin-bottom: 0.35rem !important; color: var(--tracking-blue); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.eyebrow i { margin-right: 0.3rem; }
.tracking-intro h1 { max-width: 710px; margin-bottom: 0.55rem; color: var(--tracking-ink); font-family: var(--font-secondary); font-size: clamp(2.1rem, 4vw, 3.5rem); line-height: 1.1; }
.tracking-lead { max-width: 680px; margin-bottom: 0; color: var(--tracking-muted); font-size: 1rem; line-height: 1.65; }
.intro-actions { min-width: 205px; text-align: right; }
.intro-actions .btn { width: 100%; justify-content: center; }
.intro-actions p { margin: 0.7rem 0 0; color: #8b97a6; font-size: 0.72rem; }
.intro-actions p i { margin-right: 0.25rem; color: var(--tracking-green); }
.btn { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 43px; border: 0; border-radius: 8px; padding: 0.72rem 1.15rem; font-family: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(23, 105, 224, .2); }
.tracking-page .btn-primary { background: var(--tracking-blue); color: #fff; }
.tracking-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; margin-bottom: 0.9rem; }
.kpi-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; min-height: 92px; padding: 1rem 1.1rem; border: 1px solid var(--tracking-line); border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(22, 45, 74, .03); }
.kpi-icon { display: grid; width: 41px; height: 41px; place-items: center; border-radius: 11px; font-size: 1rem; }
.kpi-blue .kpi-icon { background: #eaf2ff; color: var(--tracking-blue); } .kpi-green .kpi-icon { background: #e9faf3; color: var(--tracking-green); } .kpi-orange .kpi-icon { background: #fff4e8; color: var(--tracking-orange); } .kpi-purple .kpi-icon { background: #f1edff; color: var(--tracking-purple); }
.kpi-card div { display: flex; flex-direction: column; min-width: 0; }
.kpi-card strong { color: var(--tracking-ink); font-size: 1.35rem; line-height: 1.1; } .kpi-card div span { color: var(--tracking-muted); font-size: 0.72rem; white-space: nowrap; }
.kpi-card small { color: var(--tracking-muted); font-size: 0.68rem; text-align: right; white-space: nowrap; } .kpi-blue small i { color: var(--tracking-blue); } .kpi-green small i { color: var(--tracking-green); } .kpi-orange small i { color: var(--tracking-orange); } .kpi-purple small i { color: var(--tracking-purple); }
.tracking-live-strip { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.live-status-pill { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 34px; padding: 0.46rem 0.8rem; border: 1px solid #dfeaf5; border-radius: 999px; background: rgba(255,255,255,.8); color: #49617a; font-size: 0.68rem; font-weight: 700; }
.live-status-pill.subtle { background: #f4f8fc; color: #627588; }
.live-status-pill i { color: var(--tracking-blue); }
.live-clock { margin-left: auto; padding: 0.46rem 0.8rem; border: 1px solid #dfeaf5; border-radius: 999px; background: #fff; color: var(--tracking-ink); font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tracking-grid { display: grid; gap: 0.9rem; } .tracking-grid-main { grid-template-columns: minmax(0, 1.65fr) minmax(320px, .8fr); } .tracking-grid-secondary { grid-template-columns: minmax(0, 1.65fr) minmax(320px, .8fr); margin-top: .9rem; }
.panel { border: 1px solid var(--tracking-line); border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(22, 45, 74, .03); overflow: hidden; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1.35rem 0; } .panel-heading h2 { margin: 0; color: var(--tracking-ink); font-size: 1.08rem; letter-spacing: -.02em; } .panel-kicker { color: #91a0af; font-size: .65rem; letter-spacing: .09em; }
.map-heading-actions { display: flex; align-items: center; gap: .65rem; } .sync-status { display: inline-flex; align-items: center; gap: .45rem; color: #8693a1; font-size: .7rem; } .sync-status strong { color: var(--tracking-ink); font-weight: 600; }
.icon-button { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--tracking-line); border-radius: 7px; background: #fff; color: var(--tracking-muted); cursor: pointer; } .icon-button:hover { border-color: #b8cbe4; color: var(--tracking-blue); background: #f5f9ff; }
.map-toolbar { display: flex; align-items: center; gap: .45rem; padding: 1rem 1.35rem .7rem; } .map-filter { display: inline-flex; align-items: center; gap: .4rem; min-height: 30px; border: 1px solid transparent; border-radius: 6px; padding: .4rem .6rem; background: transparent; color: #78889a; font-family: inherit; font-size: .72rem; cursor: pointer; } .map-filter:hover, .map-filter.active { border-color: #d8e4f2; background: #f5f9ff; color: var(--tracking-blue); } .map-filter b { color: inherit; font-weight: 700; } .filter-dot { width: 7px; height: 7px; border-radius: 50%; } .all-dot { background: #5e8dca; } .moving-dot { background: var(--tracking-green); } .stop-dot { background: var(--tracking-orange); } .map-legend-note { margin-left: auto; color: #a2acb8; font-size: .68rem; }
.demo-map { position: relative; min-height: 362px; margin: 0 1.35rem 0; overflow: hidden; border: 1px solid #dce8ef; border-radius: 10px; }
#demo-map { width: 100%; height: 362px; background: #dfeecf; }
.leaflet-container { background: #dfeecf; font-family: 'Poppins', sans-serif; }
.leaflet-control-zoom a { border-radius: 8px; }
.fleet-marker-wrap { background: transparent; border: 0; }
.fleet-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 26px;
    padding: 0 10px;
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(18, 28, 40, 0.18);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fleet-marker.blue { background: var(--tracking-blue); }
.fleet-marker.orange { background: var(--tracking-orange); }
.fleet-marker.purple { background: var(--tracking-purple); }
.fleet-marker.selected { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(23, 105, 224, 0.18), 0 8px 16px rgba(18, 28, 40, 0.2); }
.leaflet-div-icon { background: transparent; border: 0; }
.leaflet-tooltip { border: 0; border-radius: 7px; padding: 0.42rem 0.62rem; color: var(--tracking-ink); background: rgba(255,255,255,0.93); box-shadow: 0 6px 14px rgba(21, 31, 43, 0.12); }
.leaflet-tooltip::before { display: none; }
.unit-marker { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: .35rem; border: 2px solid #fff; border-radius: 7px; padding: .42rem .56rem; color: #fff; font-family: inherit; font-size: .68rem; font-weight: 700; box-shadow: 0 5px 11px rgba(24, 36, 51, .2); cursor: pointer; transform: translate(-50%, -50%); transition: transform .2s ease, opacity .2s ease; } .unit-marker:hover, .unit-marker:focus-visible { transform: translate(-50%, -50%) scale(1.08); outline: none; } .unit-marker.is-selected { box-shadow: 0 0 0 4px rgba(23, 105, 224, 0.2), 0 8px 18px rgba(24, 36, 51, .2); z-index: 6; } .unit-marker::after { content: ''; position: absolute; bottom: -9px; left: calc(50% - 5px); border-top: 8px solid currentColor; border-right: 5px solid transparent; border-left: 5px solid transparent; color: inherit; } .marker-blue { left: 59%; top: 38%; background: var(--tracking-blue); } .marker-orange { left: 75%; top: 27%; background: var(--tracking-orange); } .marker-purple { left: 46%; top: 69%; background: var(--tracking-purple); }
.map-pin { position: absolute; z-index: 4; display: flex; align-items: center; gap: .3rem; color: #637584; font-size: .62rem; font-weight: 600; } .map-pin i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #fff; color: var(--tracking-blue); box-shadow: 0 2px 5px rgba(50, 90, 100, .16); } .pin-airport { left: 18%; bottom: 19%; } .pin-marina { left: 43%; top: 54%; } .map-scale { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 4; color: #70828d; font-size: .6rem; } .map-scale span { display: block; width: 42px; height: 4px; margin-bottom: .25rem; border-right: 1px solid #70828d; border-left: 1px solid #70828d; background: #70828d; } .map-compass { position: absolute; z-index: 4; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; align-items: center; color: #7c8b96; font-size: .62rem; } .map-compass i { color: var(--tracking-blue); font-size: 1rem; }
.map-footer { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.35rem 1rem; color: #8995a1; font-size: .68rem; } .map-footer i { margin-right: .25rem; color: var(--tracking-blue); }
.units-panel { display: flex; flex-direction: column; } .heading-count { display: inline-grid; min-width: 21px; height: 21px; margin-left: .3rem; place-items: center; border-radius: 50%; background: #eaf2ff; color: var(--tracking-blue); font-size: .68rem; vertical-align: 2px; } .text-button { border: 0; padding: 0; background: transparent; color: var(--tracking-blue); font-family: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; } .text-button:hover { text-decoration: underline; }
.unit-list { display: grid; gap: .5rem; padding: 1.15rem 1rem; } .unit-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; width: 100%; border: 1px solid transparent; border-radius: 9px; padding: .7rem; background: #fff; color: inherit; font-family: inherit; text-align: left; cursor: pointer; } .unit-card:hover, .unit-card.selected { border-color: #d9e7fa; background: #f6faff; } .unit-card.selected { box-shadow: inset 3px 0 0 var(--tracking-blue); } .unit-avatar { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 9px; font-size: .8rem; } .avatar-blue { background: #eaf2ff; color: var(--tracking-blue); } .avatar-orange { background: #fff3e6; color: var(--tracking-orange); } .avatar-purple { background: #f0ecff; color: var(--tracking-purple); } .unit-card-content { display: grid; gap: .28rem; min-width: 0; } .unit-card-top, .unit-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: .4rem; } .unit-card-top strong { overflow: hidden; color: var(--tracking-ink); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; } .status-label { display: inline-flex; align-items: center; gap: .25rem; font-size: .59rem; font-weight: 700; white-space: nowrap; } .status-label span, .table-status span { width: 6px; height: 6px; border-radius: 50%; } .status-moving { color: var(--tracking-green); } .status-moving span, .progress-status span { background: var(--tracking-green); } .status-stop { color: var(--tracking-orange); } .status-stop span { background: var(--tracking-orange); } .unit-card-meta { overflow: hidden; color: #81909d; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .unit-card-meta i { width: 13px; color: #95a6b6; } .unit-card-bottom { color: #81909d; font-size: .62rem; } .unit-card-bottom span:first-child { color: var(--tracking-ink); } .unit-chevron { color: #b9c4ce; font-size: .7rem; } .units-panel-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: .9rem 1.35rem 1.15rem; border-top: 1px solid var(--tracking-line); color: #8794a0; font-size: .65rem; } .units-panel-footer > span { display: inline-flex; align-items: center; gap: .45rem; } .live-pulse { display: inline-block; width: 6px; height: 6px; }
.route-panel, .video-panel { min-height: 430px; } .route-heading { align-items: flex-start; } .route-live-badge { display: inline-flex; align-items: center; gap: .35rem; margin-left: .4rem; padding: .26rem .46rem; border-radius: 99px; background: #edfbf4; color: #159660; font-size: .58rem; font-weight: 700; vertical-align: 2px; } .route-live-badge span { width: 5px; height: 5px; border-radius: 50%; background: #1abb77; } .route-actions { display: flex; align-items: center; gap: .5rem; } .outline-button { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; border: 1px solid var(--tracking-line); border-radius: 7px; padding: .42rem .65rem; background: #fff; color: #6e7d8c; font-family: inherit; font-size: .68rem; font-weight: 600; cursor: pointer; } .outline-button:hover { border-color: #b9cde6; color: var(--tracking-blue); background: #f7faff; }
.route-summary { display: grid; grid-template-columns: 1fr auto 1fr minmax(130px, .9fr); gap: 1rem; align-items: center; margin: 1.4rem 1.35rem 1rem; padding: .95rem 1rem; border: 1px solid var(--tracking-line); border-radius: 9px; background: #fbfcfd; } .route-summary > div { display: flex; flex-direction: column; gap: .22rem; } .summary-label { color: #9aa7b3; font-size: .59rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .route-summary strong { color: var(--tracking-ink); font-size: .76rem; } .route-summary small { color: #82909d; font-size: .63rem; } .route-arrow { color: #a5b2bf; font-size: 1rem; } .route-progress { width: 100%; height: 6px; overflow: hidden; border-radius: 99px; background: #e7eef5; } .route-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tracking-blue), #53a1ef); } .route-progress-wrap > strong { align-self: flex-end; color: var(--tracking-blue); font-size: .68rem; }
.route-timeline { position: relative; display: grid; gap: 0; margin: 0 1.35rem; } .route-timeline::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: 11px; width: 1px; background: #dce6ef; } .timeline-item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: .7rem; align-items: center; min-height: 52px; } .timeline-node { position: relative; z-index: 1; display: grid; width: 23px; height: 23px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #dfe7ee; color: #fff; font-size: .55rem; box-shadow: 0 0 0 1px #dfe7ee; } .timeline-item.completed .timeline-node { background: var(--tracking-green); box-shadow: 0 0 0 1px var(--tracking-green); } .timeline-item.current .timeline-node { background: var(--tracking-blue); box-shadow: 0 0 0 4px #eaf2ff; color: #fff; } .timeline-item strong { display: block; color: #3a4b5b; font-size: .72rem; } .timeline-item small { display: block; margin-top: .16rem; color: #8a98a5; font-size: .62rem; } .timeline-tag { padding: .22rem .45rem; border-radius: 4px; background: #eaf2ff; color: var(--tracking-blue); font-size: .58rem; font-weight: 700; }
.route-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 1.25rem 1.35rem 0; border-top: 1px solid var(--tracking-line); } .route-insights > div { display: flex; align-items: center; gap: .55rem; padding: .95rem .3rem 0; color: #95a2af; font-size: .62rem; } .route-insights i { color: var(--tracking-blue); font-size: .85rem; } .route-insights span { display: flex; flex-direction: column; gap: .2rem; } .route-insights strong { color: var(--tracking-ink); font-size: .75rem; }
.secure-label { display: inline-flex; align-items: center; gap: .3rem; color: #778898; font-size: .65rem; } .secure-label i { color: var(--tracking-green); } .video-preview, .modal-video-stage { position: relative; display: block; width: calc(100% - 2.7rem); min-height: 215px; margin: 1.25rem 1.35rem .8rem; overflow: hidden; border: 0; border-radius: 9px; background: linear-gradient(141deg, #102a45, #385c70 53%, #c38d63 54%, #e4c292 100%); cursor: pointer; } .video-preview::after, .modal-video-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 20, 36, .55), transparent 38%, rgba(5, 17, 32, .6)); } .video-grid-lines { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255, 255, 255, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .28) 1px, transparent 1px); background-size: 44px 44px; } .video-road { position: absolute; z-index: 1; width: 170%; height: 70px; left: -35%; bottom: 20%; background: rgba(39, 57, 65, .6); transform: rotate(-14deg); box-shadow: 0 -2px 0 rgba(255, 255, 255, .25), 0 2px 0 rgba(255, 255, 255, .16); } .video-vehicle { position: absolute; z-index: 2; left: 48%; bottom: 29%; width: 80px; height: 38px; border-radius: 8px 11px 5px 5px; background: #f7f8fa; box-shadow: 0 6px 8px rgba(0,0,0,.25); transform: rotate(-11deg); } .video-vehicle::before { content: ''; position: absolute; left: 11px; top: 5px; width: 50px; height: 13px; border-radius: 3px; background: #55788b; } .video-vehicle::after { content: ''; position: absolute; left: 10px; bottom: -7px; width: 12px; height: 12px; border-radius: 50%; background: #1e2e3a; box-shadow: 48px 0 0 #1e2e3a; } .video-vehicle.large { width: 120px; height: 55px; } .video-vehicle.large::before { width: 76px; height: 19px; } .video-vehicle.large::after { left: 15px; width: 15px; height: 15px; box-shadow: 74px 0 0 #1e2e3a; }
.video-overlay-label, .video-timecode, .video-preview-caption { position: absolute; z-index: 6; color: #fff; font-size: .62rem; font-weight: 700; } .video-overlay-label { top: .85rem; left: .9rem; letter-spacing: .05em; } .recording-dot { display: inline-block; width: 6px; height: 6px; margin-right: .27rem; border-radius: 50%; background: #ff4e5d; box-shadow: 0 0 0 4px rgba(255, 78, 93, .22); } .video-timecode { top: .85rem; right: .9rem; font-variant-numeric: tabular-nums; } .video-play { position: absolute; z-index: 6; top: 50%; left: 50%; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(8, 28, 47, .52); color: #fff; font-size: .9rem; transform: translate(-50%, -50%); } .video-preview:hover .video-play { background: var(--tracking-blue); } .video-preview-caption { right: .9rem; bottom: .8rem; opacity: .9; } .video-preview-caption i { margin-left: .28rem; } .video-controls { display: flex; align-items: center; gap: .45rem; margin: 0 1.35rem; } .camera-select-wrap { display: inline-flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; color: var(--tracking-blue); } .camera-select-wrap select { width: 100%; border: 0; background: transparent; color: var(--tracking-ink); font: inherit; font-size: .68rem; font-weight: 600; outline: none; } .video-health { display: inline-flex; align-items: center; gap: .3rem; color: #178a5a; font-size: .62rem; white-space: nowrap; } .video-health > span { width: 6px; height: 6px; border-radius: 50%; background: var(--tracking-green); } .video-note { margin: .85rem 1.35rem 1.2rem; color: #8794a0; font-size: .62rem; line-height: 1.45; } .video-note i { margin-right: .25rem; color: var(--tracking-blue); }
.history-panel { margin-top: .9rem; } .history-tools { display: flex; align-items: center; gap: .55rem; } .date-filter { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: .4rem .6rem; border: 1px solid var(--tracking-line); border-radius: 7px; color: #81909e; } .date-filter select { border: 0; background: transparent; color: var(--tracking-ink); font: inherit; font-size: .68rem; outline: none; } .history-table-wrap { overflow-x: auto; padding: 1.1rem 1.35rem 0; } .history-table { width: 100%; min-width: 700px; border-collapse: collapse; } .history-table th { padding: .6rem .75rem; border-bottom: 1px solid var(--tracking-line); color: #9aa7b3; font-size: .61rem; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; } .history-table td { padding: .78rem .75rem; border-bottom: 1px solid #f0f3f6; color: #627282; font-size: .7rem; vertical-align: middle; } .history-table tr:last-child td { border-bottom: 0; } .history-table td strong { display: block; color: #3d4f60; font-size: .7rem; } .history-table td small { display: block; margin-top: .2rem; color: #95a1ad; font-size: .61rem; } .table-unit { display: flex; align-items: center; gap: .35rem; } .table-unit small { margin-left: 1.1rem; } .table-unit-dot { width: 8px; height: 8px; border-radius: 50%; } .table-unit-dot.blue { background: var(--tracking-blue); } .table-unit-dot.orange { background: var(--tracking-orange); } .table-unit-dot.purple { background: var(--tracking-purple); } .table-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .65rem; font-weight: 700; white-space: nowrap; } .progress-status { color: var(--tracking-green); } .done-status { color: var(--tracking-muted); } .done-status span { background: #9ba9b6; } .table-action { border: 0; background: transparent; color: var(--tracking-blue); font: inherit; font-size: .65rem; font-weight: 700; cursor: pointer; } .table-action:hover { text-decoration: underline; } .history-footnote { margin: .2rem 1.35rem 1.1rem; padding-top: .9rem; border-top: 1px solid var(--tracking-line); color: #8d9aa6; font-size: .63rem; } .history-footnote i { margin-right: .3rem; color: var(--tracking-blue); }
.pilot-cta { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; padding: 1.3rem 1.5rem; border: 1px solid #d4e7fb; border-radius: 12px; background: linear-gradient(105deg, #f0f7ff, #f9fbff 70%); } .pilot-cta-icon { display: grid; flex: 0 0 auto; width: 45px; height: 45px; place-items: center; border-radius: 12px; background: #e0efff; color: var(--tracking-blue); font-size: 1.15rem; } .pilot-cta h2 { margin-bottom: .2rem; color: var(--tracking-ink); font-family: var(--font-secondary); font-size: 1.25rem; } .pilot-cta p { margin-bottom: 0; color: #728394; font-size: .72rem; } .pilot-cta .btn { margin-left: auto; flex: 0 0 auto; }
.tracking-footer { padding: 1rem 0; border-top: 1px solid var(--tracking-line); background: #fff; color: #8b98a5; font-size: .65rem; } .tracking-footer .tracking-shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .tracking-footer i { margin-right: .25rem; color: var(--tracking-green); } .tracking-footer a { color: var(--tracking-blue); font-weight: 600; }
.modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; padding: 1rem; place-items: center; background: rgba(10, 23, 40, .68); backdrop-filter: blur(5px); } .modal-backdrop[hidden] { display: none; } .modal-card { position: relative; width: min(650px, 100%); max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: #fff; box-shadow: 0 25px 80px rgba(0,0,0,.3); } .video-modal-card { width: min(800px, 100%); background: #111e2d; } .modal-close { position: absolute; z-index: 10; top: .75rem; right: .75rem; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; cursor: pointer; } .modal-close:hover { background: rgba(0,0,0,.65); } .video-modal-card .modal-video-stage { width: 100%; min-height: 430px; margin: 0; border-radius: 0; } .video-modal-center { position: absolute; z-index: 7; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: .4rem; color: #fff; text-align: center; transform: translate(-50%, -35%); } .video-modal-center i { display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #8fd0ff; font-size: 1.2rem; } .video-modal-center strong { font-size: .9rem; } .video-modal-center span { color: rgba(255,255,255,.7); font-size: .66rem; } .modal-video-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem .6rem; color: #fff; } .modal-video-footer h2 { margin: 0; color: #fff; font-size: 1rem; } .modal-video-footer .panel-kicker { color: #91c7f4; } .modal-video-actions { display: flex; gap: .5rem; padding: .5rem 1.25rem 1.1rem; } .video-modal-card .outline-button { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); } .video-modal-card .outline-button:hover { border-color: #71b8ff; background: rgba(46, 132, 218, .25); color: #fff; }
.contact-modal-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 2rem; } .contact-modal-copy { padding: .6rem .4rem; } .contact-modal-icon { display: grid; width: 44px; height: 44px; margin-bottom: 1rem; place-items: center; border-radius: 12px; background: #eaf2ff; color: var(--tracking-blue); } .contact-modal-copy h2 { margin-bottom: .65rem; color: var(--tracking-ink); font-family: var(--font-secondary); font-size: 1.55rem; line-height: 1.2; } .contact-modal-copy > p:not(.panel-kicker) { color: var(--tracking-muted); font-size: .76rem; line-height: 1.6; } .pilot-form { display: grid; gap: .45rem; padding: 1rem; border: 1px solid var(--tracking-line); border-radius: 10px; background: #fbfcfd; } .pilot-form label { margin-top: .25rem; color: #667788; font-size: .68rem; font-weight: 700; } .pilot-form input, .pilot-form textarea { width: 100%; border: 1px solid #dce5ed; border-radius: 7px; padding: .65rem .7rem; background: #fff; color: var(--tracking-ink); font: inherit; font-size: .75rem; outline: none; } .pilot-form input:focus, .pilot-form textarea:focus { border-color: #7fb5ed; box-shadow: 0 0 0 3px #eaf3ff; } .pilot-form-status { min-height: 1.1rem; margin: .15rem 0 0; color: var(--tracking-green); font-size: .68rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1080px) { .tracking-kpis { grid-template-columns: repeat(2, 1fr); } .tracking-grid-main, .tracking-grid-secondary { grid-template-columns: 1fr; } .units-panel { min-height: auto; } .unit-list { grid-template-columns: repeat(3, 1fr); } .units-panel-footer { margin-top: 0; } }
@media (max-width: 720px) { .tracking-shell { width: min(100% - 28px, 640px); } .tracking-topbar-inner, .tracking-intro, .tracking-footer .tracking-shell { align-items: flex-start; flex-direction: column; } .tracking-topbar-inner { padding: .9rem 0; } .tracking-topbar-actions { width: 100%; justify-content: space-between; } .tracking-intro { gap: 1.1rem; } .intro-actions { width: 100%; text-align: left; } .intro-actions .btn { width: auto; } .tracking-kpis { gap: .55rem; } .kpi-card { grid-template-columns: auto 1fr; min-height: 76px; padding: .75rem; } .kpi-card small { grid-column: 2; text-align: left; } .kpi-card strong { font-size: 1.08rem; } .map-toolbar { flex-wrap: wrap; } .map-legend-note { width: 100%; margin-left: 0; } .demo-map { min-height: 300px; margin-right: .8rem; margin-left: .8rem; } .map-footer { flex-direction: column; gap: .25rem; padding-right: .8rem; padding-left: .8rem; } .panel-heading { padding-right: .8rem; padding-left: .8rem; } .unit-list { grid-template-columns: 1fr; padding-right: .5rem; padding-left: .5rem; } .units-panel-footer { padding-right: .8rem; padding-left: .8rem; } .route-summary { grid-template-columns: 1fr 20px 1fr; gap: .6rem; margin-right: .8rem; margin-left: .8rem; } .route-progress-wrap { grid-column: 1 / -1; } .route-timeline, .route-insights { margin-right: .8rem; margin-left: .8rem; } .route-actions .outline-button { display: none; } .video-preview { width: calc(100% - 1.6rem); min-height: 190px; margin-right: .8rem; margin-left: .8rem; } .video-controls { margin-right: .8rem; margin-left: .8rem; } .video-note { margin-right: .8rem; margin-left: .8rem; } .history-tools { align-items: flex-end; flex-direction: column; } .history-table-wrap { padding-right: .5rem; padding-left: .5rem; } .history-footnote { margin-right: .8rem; margin-left: .8rem; } .pilot-cta { align-items: flex-start; flex-wrap: wrap; padding: 1.1rem; } .pilot-cta .btn { width: 100%; margin-left: 0; justify-content: center; } .contact-modal-card { grid-template-columns: 1fr; padding: 1.3rem; } .video-modal-card .modal-video-stage { min-height: 290px; } .modal-video-actions { flex-wrap: wrap; } }
@media (max-width: 420px) { .tracking-brand-label, .tracking-brand-divider { display: none; } .tracking-kpis { grid-template-columns: 1fr 1fr; } .kpi-card div span { white-space: normal; } .tracking-intro h1 { font-size: 2rem; } .sync-status { display: none; } .route-summary strong { font-size: .67rem; } }