/* Estacionamento em tempo real: a full-screen map of the 100 sensor places with a floating panel (desktop)
   or a bottom sheet (phone). Light, like the rest of the site. */
.page-parking {
  --pk-livre: #2f9e44; --pk-livre-ink: #2b8a3e; --pk-ocupado: #e8590c; --pk-ocupado-ink: #c2410c; --pk-sem: #adb5bd;
  --pk-mob: #1c7ed6; --pk-cargas: #f08c00; --pk-ev: #0c8599;
}

/* the app fills the screen under the nav (and the alert bar when there is one) */
.page-parking .pk-app { position: relative; height: calc(100svh - var(--nav)); min-height: 560px; overflow: hidden; background: var(--p-surface); }
.page-parking .pk-map { position: absolute; inset: 0; z-index: 0; background: #e9ecea; }
.page-parking .pk-map .leaflet-tile-pane { filter: grayscale(1) brightness(1.07) contrast(.9); }
.page-parking .pk-map .leaflet-control-zoom { border: 0; box-shadow: 0 4px 16px rgb(20 41 58 / .16); border-radius: 12px; overflow: hidden; margin: 20px 20px 0 0; }
.page-parking .pk-map .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; color: var(--p-ink); font-size: 20px; }
.page-parking .pk-map .leaflet-control-attribution { font-size: 11px; background: rgb(247 246 242 / .85); }
.page-parking .pk-map .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 10px 32px rgb(20 41 58 / .2); }
.page-parking .pk-map .leaflet-popup-content { margin: 14px 18px; font: 400 14px/1.5 var(--font-text); color: var(--p-ink); min-width: 190px; }
.page-parking .pk-map .leaflet-popup-content strong { font-weight: 600; }
.pk-pop__state { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-weight: 600; }
.pk-pop__state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.pk-pop__state--livre { color: var(--pk-livre-ink); }
.pk-pop__state--ocupado { color: var(--pk-ocupado-ink); }
.pk-pop__state--sem_dados { color: #5c6a76; }
.pk-pop__go { display: inline-flex; margin-top: 8px; font-weight: 600; color: var(--p-action) !important; text-decoration: none; }
.pk-pop__go:hover { text-decoration: underline; }

/* the places: one bay per sensor, its colour the state */
.pk-bay { transition: fill .5s ease, fill-opacity .3s ease, stroke-opacity .3s ease; cursor: pointer; }
.pk-bay:hover { fill-opacity: 1; }
.pk-bay.is-changed { animation: pk-flash 1.6s ease-out 2; }
@keyframes pk-flash { 0%, 100% { stroke: #fff; stroke-width: 1.5; } 30% { stroke: #ffd43b; stroke-width: 5; } }
/* far out, a dot marks each place; close in, the bays carry the picture */
.pk-dot { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgb(20 41 58 / .4); background: var(--pk-sem); transition: transform .2s, opacity .3s; }
.pk-dot--livre { background: var(--pk-livre); }
.pk-dot--ocupado { background: var(--pk-ocupado); }
.pk-map.is-close .pk-dot { opacity: 0; pointer-events: none; }
.pk-map .is-dim { opacity: .15; }
.pk-ev { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pk-ev); color: #fff; font-size: 14px; box-shadow: 0 2px 8px rgb(12 133 153 / .45); border: 2px solid #fff; }
.pk-me { display: block; width: 18px; height: 18px; border-radius: 50%; background: #1c7ed6; border: 3px solid #fff; box-shadow: 0 0 0 8px rgb(28 126 214 / .2); }

/* the panel */
.page-parking .pk-panel {
  position: absolute; z-index: 5; top: 20px; left: 20px; bottom: 20px; width: 400px; overflow-y: auto; overscroll-behavior: contain;
  padding: 28px; background: var(--p-bg); border-radius: 20px; box-shadow: 0 16px 48px rgb(20 41 58 / .18), 0 0 0 1px rgb(20 41 58 / .05);
  scrollbar-width: thin;
}
.page-parking .pk-panel__handle { display: none; }
.page-parking .pk-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-parking .pk-panel .pk-title { margin: 0; font: var(--display-weight) 30px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--p-ink); }
.page-parking .pk-panel .pk-sub { margin: 28px 0 10px; font: 500 13px/1.4 var(--font-text); letter-spacing: .02em; color: var(--p-muted); }
.pk-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: color-mix(in oklab, var(--pk-livre) 12%, var(--p-bg)); color: var(--pk-livre-ink); font: 600 13px/1 var(--font-text); }
.pk-live__ring { width: 18px; height: 18px; transform: rotate(-90deg); }
.pk-live__ring circle { fill: none; stroke: color-mix(in oklab, var(--pk-livre) 25%, transparent); stroke-width: 3; }
.pk-live__ring .pk-live__left { stroke: var(--pk-livre); stroke-dasharray: 50.27; stroke-dashoffset: 0; stroke-linecap: round; }
.pk-live__ring.is-running .pk-live__left { animation: pk-drain var(--pk-every, 30s) linear forwards; }
@keyframes pk-drain { to { stroke-dashoffset: 50.27; } }

.pk-now { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pk-now__num { display: grid; }
.page-parking .pk-now__num strong { font: var(--display-weight) 96px/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--pk-livre-ink); font-variant-numeric: tabular-nums; transition: color .3s; }
.page-parking .pk-now__num strong.is-bump { animation: pk-bump .6s ease; }
@keyframes pk-bump { 40% { transform: translateY(-4px); } }
.pk-now__num span { margin-top: 8px; font: 500 17px/1.2 var(--font-text); color: var(--p-ink); }
.pk-donut { width: 112px; height: 112px; flex: none; }
.pk-donut circle { fill: none; stroke-width: 12; }
.pk-donut__track { stroke: var(--pk-sem); opacity: .45; }
.pk-donut__seg { transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dasharray .8s cubic-bezier(.2,.8,.2,1), stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
.pk-donut__seg--livre { stroke: var(--pk-livre); }
.pk-donut__seg--ocupado { stroke: var(--pk-ocupado); }
.pk-donut__pct { font: 600 24px/1 var(--font-display); fill: var(--p-ink); text-anchor: middle; }
.pk-donut__lbl { font: 500 11px/1 var(--font-text); fill: var(--p-muted); text-anchor: middle; }
.page-parking .pk-meta { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 20px; font-size: 14px; color: var(--p-muted); }

.page-parking .pk-near {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 20px;
  border: 0; border-radius: var(--r-btn); background: var(--p-action); color: var(--p-action-ink); font: 500 16px/1 var(--font-text);
  cursor: pointer; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-parking .pk-near:hover { background: color-mix(in oklab, var(--p-action) 86%, var(--p-ink)); }
.page-parking .pk-near:active { transform: translateY(1px) scale(.985); }
.page-parking .pk-near svg { width: 20px; height: 20px; flex: none; }
.page-parking .pk-near.is-busy { opacity: .7; pointer-events: none; }
.page-parking .pk-status { min-height: 0; margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--p-ink); }
.page-parking .pk-status:empty { display: none; }

.pk-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.page-parking .pk-chip {
  min-height: 36px; padding: 0 14px; border: 1px solid color-mix(in oklab, var(--p-ink) 16%, transparent); border-radius: 999px;
  background: var(--p-bg); color: var(--p-ink); font: 500 13px/1 var(--font-text); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.page-parking .pk-chip:hover { border-color: color-mix(in oklab, var(--p-ink) 35%, transparent); }
.page-parking .pk-chip.is-on { background: var(--p-ink); border-color: var(--p-ink); color: var(--p-bg); }

/* streets */
.pk-zones { margin: 0; padding: 0; list-style: none; }
.page-parking .pk-zone {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; width: 100%; margin: 0; padding: 12px 10px;
  border: 0; border-radius: 12px; background: none; color: var(--p-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s;
}
.page-parking .pk-zone:hover, .page-parking .pk-zone.is-active { background: var(--p-surface); }
.pk-zone__name { display: grid; gap: 1px; font-size: 15px; line-height: 1.3; }
.page-parking .pk-zone__name strong { font-weight: 600; }
.pk-zone__name span { font-size: 13px; color: var(--p-muted); }
.pk-zone__count { align-self: start; font: 500 14px/1.3 var(--font-text); color: var(--p-muted); font-variant-numeric: tabular-nums; }
.page-parking .pk-zone__count b { font-size: 18px; font-weight: 600; color: var(--pk-livre-ink); }
.pk-zone__bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--pk-ocupado) 20%, var(--p-bg)); overflow: hidden; }
.pk-zone__bar i { display: block; height: 100%; border-radius: inherit; background: var(--pk-livre); transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* the feed of the latest changes */
.pk-feed { margin: 0; padding: 0; list-style: none; }
.pk-feed li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 9%, transparent); font-size: 14px; line-height: 1.4; }
.pk-feed li:last-child { border-bottom: 0; }
.pk-feed li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pk-sem); transform: translateY(-1px); }
.pk-feed li.is-livre::before { background: var(--pk-livre); }
.pk-feed li.is-ocupado::before { background: var(--pk-ocupado); }
.pk-feed li.is-new { animation: pk-in .6s ease; }
@keyframes pk-in { from { background: color-mix(in oklab, #ffd43b 35%, transparent); } }
.page-parking .pk-feed b { font-weight: 600; }
.pk-feed time { color: var(--p-muted); font-size: 13px; white-space: nowrap; }
.pk-feed__empty { color: var(--p-muted); }

.pk-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 26px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid color-mix(in oklab, var(--p-ink) 10%, transparent); font-size: 13px; color: var(--p-ink); }
.pk-legend li { display: flex; align-items: center; gap: 8px; }
.pk-key { display: inline-grid; place-items: center; width: 14px; height: 10px; border-radius: 2px; background: var(--pk-sem); font-style: normal; flex: none; }
.pk-key--livre { background: var(--pk-livre); }
.pk-key--ocupado { background: var(--pk-ocupado); }
.pk-key--mobilidade { background: var(--pk-livre); box-shadow: 0 0 0 2px var(--pk-mob); }
.pk-key--cargas { background: var(--pk-livre); box-shadow: 0 0 0 2px var(--pk-cargas); }
.pk-key--ev { width: 16px; height: 16px; border-radius: 50%; background: var(--pk-ev); color: #fff; font-size: 10px; }

/* the footer after the app keeps its own top gap */
.page-parking footer.closing { padding-top: var(--s-9); }

/* phone and tablet: the map on the whole screen, the panel a sheet from the bottom */
@media (max-width: 767px) {
  .page-parking .pk-app { min-height: 520px; }
  .page-parking .pk-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 44%; padding: 8px 20px 20px;
    border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgb(20 41 58 / .2); transition: max-height .35s cubic-bezier(.2,.8,.2,1);
  }
  .page-parking .pk-panel.is-open { max-height: 86%; }
  .page-parking .pk-panel__handle {
    display: grid; justify-items: center; gap: 6px; width: 100%; margin: 0 0 8px; padding: 6px 0; border: 0; background: none;
    color: var(--p-muted); font: 500 12px/1 var(--font-text); cursor: pointer;
  }
  .pk-panel__grip { width: 40px; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--p-ink) 22%, transparent); }
  .page-parking .pk-panel:not(.is-open) .pk-panel__more { display: none; }
  .page-parking .pk-panel .pk-title { font-size: 24px; }
  .page-parking .pk-panel__head { margin-bottom: 10px; }
  .page-parking .pk-now__num strong { font-size: 64px; }
  .pk-donut { width: 84px; height: 84px; }
  .page-parking .pk-meta { margin: 8px 0 12px; }
  .page-parking .pk-map .leaflet-control-zoom { margin: 12px 12px 0 0; }
  .pk-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pk-filters::-webkit-scrollbar { display: none; }
  .page-parking .pk-chip { flex: none; }
  /* the sheet is the page's controls: the floating assistant button would sit on them */
  .page-parking #openChatBtn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-bay.is-changed, .pk-now__num strong.is-bump, .pk-feed li.is-new { animation: none; }
  .pk-live__ring.is-running .pk-live__left { animation: none; }
}