/* Vetra — extras.css */

/* mapa com zoom: mantém hubs, veículos e rótulos legíveis (--k = escala do zoom) */
#map { --k: 1; cursor: pointer; }
#map.zoomed .hub .core { r: calc(7px * var(--k)); stroke-width: calc(2.5px * var(--k)); }
#map.zoomed .hub .pulse { display: none; }
#map.zoomed .truck .dot { r: calc(5.4px * var(--k)); stroke-width: calc(1.8px * var(--k)); }
#map.zoomed .truck .arrow, #map.zoomed .truck .halo { display: none; }
#map.zoomed .route { stroke-width: calc(1.4px * var(--k)); stroke-dasharray: calc(3px * var(--k)) calc(5px * var(--k)); }
#map.zoomed .lbl { font-size: calc(11.5px * var(--k)); stroke-width: calc(3.5px * var(--k)); }
#map.zoomed .land { stroke-width: calc(1.4px * var(--k)); }
#map.zoomed .gr { stroke-width: calc(1px * var(--k)); }
#map .land:hover { fill: color-mix(in srgb, var(--accent) 7%, var(--map-land)); }
.uf-fx { pointer-events: none; }
.uf-fx circle { fill: rgb(var(--accent-rgb) / .06); stroke: var(--accent); stroke-width: calc(2px * var(--k)); stroke-dasharray: calc(8px * var(--k)) calc(6px * var(--k)); animation: ufspin 40s linear infinite; transform-box: fill-box; transform-origin: center; }
.uf-fx text { font: 700 calc(64px * var(--k)) var(--f-head); fill: var(--accent); opacity: .13; letter-spacing: .06em; dominant-baseline: middle; }
@keyframes ufspin { to { transform: rotate(360deg); } }
.has-uf .hub-card, .has-uf .map-legend { opacity: 0; pointer-events: none; }

/* painel do estado */
.uf-panel { position: absolute; right: 12px; top: 12px; bottom: 12px; width: 310px; padding: 14px; overflow-y: auto; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line-2); border-top: 3px solid var(--accent); border-radius: 8px; box-shadow: var(--shadow); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateX(16px); transition: opacity .35s, transform .45s var(--e), visibility .35s; }
.uf-panel.on { opacity: 1; visibility: visible; transform: none; }
.up-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.up-head > div { flex: 1; min-width: 0; }
.up-head h4 { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .05em; }
.up-head small { color: var(--muted); font: 500 .7rem var(--f-mono); }
.up-badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--accent); color: #fff; font: 700 1.3rem var(--f-head); letter-spacing: .06em; flex: none; }
.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.up-grid > div { padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; }
.up-grid small { display: block; color: var(--muted); font: 500 .64rem var(--f-mono); text-transform: uppercase; letter-spacing: .05em; }
.up-grid b { font: 600 1.25rem var(--f-mono); letter-spacing: -.02em; }
.up-pt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 2px; font: 500 .72rem var(--f-mono); color: var(--muted); }
.up-pt .d { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.up-pt .d:not(:first-child) { margin-left: 6px; }
.up-panel h5, .uf-panel h5 { font: 700 .9rem var(--f-head); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 14px 0 8px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.up-car { display: grid; gap: 10px; }
.up-car em { color: var(--faint); font: 500 .7rem var(--f-mono); font-style: normal; margin-left: 4px; }
.up-car .cs-bar i { width: var(--w); transition: none; }
.up-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* botão e modo apresentação */
.btn-present { height: 40px; white-space: nowrap; }
.present-bar { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 120; opacity: 0; pointer-events: none; }
.present-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
body.present .present-bar { opacity: 1; }
body.present .present-bar i { animation: presentbar 9s linear forwards; }
@keyframes presentbar { to { width: 100%; } }
body.present { cursor: none; }
body.present .hero-tools, body.present .foot, body.present .tabs { display: none; }
body.present .top { position: static; }
body.present h1 { font-size: clamp(3rem, 6vw, 5rem); }
body.present .map-wrap { height: 640px; }
body.present .sec { min-height: 90vh; scroll-margin-top: 10px; }

@media (max-width: 899px) {
  .uf-panel { left: 12px; right: 12px; top: auto; width: auto; max-height: 52%; }
  .btn-present { padding: 0 10px; font-size: .78rem; }
}
@media (max-width: 719px) { .btn-present { display: none; } }