.parkradar-viewport, .parkradar-viewport *{box-sizing:border-box;}

.parkradar-viewport{
  --pr-ink:#161922;
  --pr-muted:#6B7280;
  --pr-line:#E7E8EC;
  --pr-surface:#FFFFFF;
  --pr-canvas:#F4F5F8;
  --pr-teal:#22B57A;
  --pr-teal-soft:#DFF6EA;
  --pr-amber:#F0A430;
  --pr-amber-soft:#FBEBD3;
  --pr-coral:#F0555A;
  --pr-coral-soft:#FCE0DF;
  --pr-blue:#4A63E7;
  --pr-blue-soft:#E4E8FD;
  display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;
  font-family:'Inter',sans-serif;color:var(--pr-ink);
  /* Estado inicial (antes de que parkradar-app.js corra o si JS está
     deshabilitado): ocupa el 100% de su contenedor, en el flujo normal
     de la página. En cuanto el JS corre, se "portaliza" a <body> (ver
     .parkradar-viewport--portaled) para lograr un full-bleed real que
     no depende en absoluto del ancho, padding u overflow del theme. */
  position:relative;
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
  height:var(--pr-app-height, 92vh);
  overflow:hidden;
  z-index:1;
  /* Mientras el JS no haya "portalizado" y posicionado el widget a
     ancho completo, se queda invisible. Sin esto, el usuario alcanza
     a ver el mapa render­eado chico (con el ancho angosto del
     contenedor del theme) durante una fracción de segundo, y luego
     lo ve "saltar/crecer" a su ancho completo apenas corre el JS.
     El fallback de abajo (pr-force-reveal) garantiza que igual se
     muestre si el JS tarda, falla o está deshabilitado. */
  opacity:0;
  animation:pr-force-reveal 0s linear .9s forwards;
}

.parkradar-viewport.pr-ready{
  opacity:1;
  animation:none;
  transition:opacity .18s ease;
}

@keyframes pr-force-reveal{
  to{ opacity:1; }
}

/* Una vez movido a <body> por parkradar-app.js: se posiciona en
   coordenadas de documento (top calculado en JS) y ocupa el ancho
   exacto de la ventana, centrado, sin importar en qué contenedor del
   theme estaba el shortcode originalmente. */
.parkradar-viewport--portaled{
  position:absolute;
  top:0;
  left:0;
  margin-left:0;
  margin-right:0;
  z-index:2;
}

/* Placeholder invisible que queda en el lugar original del shortcode
   para reservar el mismo espacio vertical y que el resto de la página
   (footer, etc.) no salte al portalizar el mapa. */
.parkradar-viewport-placeholder{
  width:100%;
}

.parkradar-app{
  position:relative;
  width:100%;
  max-width:520px;
  height:var(--pr-app-height, 92vh);
  margin:0 auto;
  overflow:hidden;
  background:var(--pr-canvas);
  box-shadow:0 0 60px rgba(0,0,0,.5);
  border-radius:24px;
}
#pr-map{position:absolute;inset:0;z-index:1;}

.pr-topbar{
  position:absolute;top:0;left:0;right:0;z-index:500;
  padding:14px 14px 0;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
}
.pr-searchbar{
  pointer-events:auto;
  display:flex;align-items:center;gap:8px;
  background:var(--pr-surface);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(20,22,30,.16);
  padding:11px 14px;
}
.pr-search-wrap{position:relative;pointer-events:auto;}

.pr-search-suggestions{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:600;
  background:var(--pr-surface);border-radius:14px;
  box-shadow:0 12px 28px rgba(20,22,30,.2);
  overflow:hidden;display:none;max-height:240px;overflow-y:auto;
}
.pr-search-suggestions.pr-show{display:block;}
.pr-suggestion{
  padding:10px 14px;font-size:13px;color:var(--pr-ink);cursor:pointer;
  border-bottom:1px solid var(--pr-line);
}
.pr-suggestion:last-child{border-bottom:none;}
.pr-suggestion:hover{background:var(--pr-canvas);}
.pr-searchbar svg{flex:none;color:var(--pr-muted);}
.pr-searchbar input{
  border:none;outline:none;flex:1;font-family:'Inter';font-size:14.5px;color:var(--pr-ink);background:transparent;
}
.pr-searchbar input::placeholder{color:#9AA0AC;}
.pr-search-clear{
  flex:none;border:none;background:var(--pr-canvas);color:var(--pr-muted);
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;
}
.pr-search-clear:hover{background:var(--pr-line);color:var(--pr-ink);}
.pr-searchbar button:not(.pr-search-clear){
  border:none;background:var(--pr-ink);color:#fff;border-radius:10px;
  padding:8px 12px;font-size:13px;font-weight:600;font-family:'Inter';cursor:pointer;
  white-space:nowrap;
}
.pr-chips{
  pointer-events:auto;
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
}
.pr-chips::-webkit-scrollbar{display:none;}
.pr-chip{
  flex:none;background:rgba(22,25,34,.55);backdrop-filter:blur(6px);
  color:#fff;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;
  display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.14);
}
.pr-chip .pr-d{width:7px;height:7px;border-radius:50%;}

/* Fila de reservas activas (cuenta regresiva para llegar al parking).
   Vive dentro del flujo del topbar, no superpuesta al mapa: crece en
   altura sin tapar nada más. Los chips son discretos (mismo estilo
   translúcido que .pr-chip) y solo cambian de color cuando queda
   poco tiempo, para no llamar la atención de más mientras todo va
   bien. */
.pr-reservations-tray{
  pointer-events:auto;
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
}
.pr-reservations-tray::-webkit-scrollbar{display:none;}
.pr-reservations-tray[hidden]{display:none;}
.pr-res-chip{
  flex:none;background:rgba(22,25,34,.72);backdrop-filter:blur(6px);
  color:#fff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:600;
  display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.14);
  white-space:nowrap;cursor:pointer;
}
.pr-res-chip .pr-res-dot{
  width:7px;height:7px;border-radius:50%;background:var(--pr-blue);flex:none;
  animation:pr-res-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes pr-res-dot-pulse{
  0%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.9);opacity:.45;}
  100%{transform:scale(1);opacity:1;}
}
.pr-res-chip .pr-res-label{color:rgba(255,255,255,.78);}
.pr-res-chip .pr-res-time{font-family:'Space Grotesk';font-weight:700;font-variant-numeric:tabular-nums;}

/* Iconos "cómo llegar" (Google Maps / Waze) dentro del contador de
   reserva: solo aparecen si el parking tiene coordenadas o dirección
   cargada (ver mapsUrl()/wazeUrl()). Círculos pequeños y discretos,
   apenas más claros que el chip, que no compiten con el tiempo. */
.pr-res-nav{ display:flex; gap:4px; margin-left:2px; padding-left:6px; border-left:1px solid rgba(255,255,255,.18); }
.pr-res-nav-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  transition:background .12s ease, transform .1s ease;
  animation:pr-res-nav-zoom 2.2s ease-in-out infinite;
}
.pr-res-nav-btn:hover{ background:rgba(255,255,255,.28); }
.pr-res-nav-btn:active{ transform:scale(.92); }
/* Aro que "invita a tocar" alrededor de cada icono, mismo lenguaje
   visual que el pulso de los marcadores del mapa (ver .pr-marker
   .pr-ring / @keyframes pr-pulse), a escala reducida para un botón
   chiquito dentro del chip. Waze arranca con un pequeño retraso para
   que no pulsen exactamente al mismo tiempo. */
.pr-res-nav-btn::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  border:1.4px solid rgba(255,255,255,.65);
  animation:pr-res-nav-ring 2.2s cubic-bezier(.4,0,.5,1) infinite;
  pointer-events:none;
}
.pr-res-nav-btn[data-nav="waze"]{ animation-delay:.35s; }
.pr-res-nav-btn[data-nav="waze"]::after{ animation-delay:.35s; }
@keyframes pr-res-nav-zoom{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.14); }
}
@keyframes pr-res-nav-ring{
  0%{ transform:scale(.8); opacity:.7; }
  70%{ transform:scale(1.55); opacity:0; }
  100%{ transform:scale(1.55); opacity:0; }
}
.pr-res-chip.pr-res-warn .pr-res-dot{background:var(--pr-amber);}
.pr-res-chip.pr-res-warn .pr-res-time{color:var(--pr-amber);}
.pr-res-chip.pr-res-critical .pr-res-dot{background:var(--pr-coral);}
.pr-res-chip.pr-res-critical .pr-res-time{color:var(--pr-coral);animation:pr-blink 1s step-start infinite;}
@keyframes pr-blink{50%{opacity:.35;}}

/* Variante "ocupado" del chip: ya no cuenta regresiva para llegar,
   sino tiempo estacionado + monto pendiente (igual que la tarjeta del
   panel de conductor). Punto fijo en coral -mismo lenguaje que el
   estado "ocupado" del resto del plugin- en vez del pulso azul, ya
   que aquí no hay riesgo de expiración por tiempo. */
.pr-res-chip-occupied .pr-res-dot{background:var(--pr-coral);animation:none;}
.pr-res-chip-occupied .pr-res-sep{color:rgba(255,255,255,.32);}
.pr-res-chip-occupied .pr-res-amount{font-family:'Space Grotesk';font-weight:700;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.78);}
.pr-res-chip-occupied.pr-occ-due .pr-res-amount{color:var(--pr-coral);}

.pr-fab{
  position:absolute;right:14px;bottom:calc(150px);z-index:500;
  box-sizing:border-box !important;
  width:46px !important;height:46px !important;min-width:46px !important;min-height:46px !important;
  padding:0 !important;margin:0;line-height:1;border-radius:50% !important;
  background:#fff !important;color:#161922 !important;
  display:flex !important;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(20,22,30,.22) !important;border:1px solid rgba(20,22,30,.08) !important;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
.pr-fab:hover,.pr-fab:focus{background:#f4f5f8 !important;color:#161922 !important;outline:none;}
.pr-fab .pr-fab-icon{display:block !important;width:22px !important;height:22px !important;flex:none;pointer-events:none;stroke:#161922 !important;}
.pr-fab.pr-loading{opacity:.7;pointer-events:none;}
.pr-fab.pr-loading .pr-fab-icon{animation:pr-fab-pulse 1s ease-in-out infinite;}
@keyframes pr-fab-pulse{0%,100%{transform:scale(1)}50%{transform:scale(.78)}}

.pr-legend{
  position:absolute;left:14px;bottom:20px;z-index:500;
  background:var(--pr-surface);border-radius:14px;padding:10px 12px;
  box-shadow:0 8px 20px rgba(20,22,30,.14);
  display:flex;gap:12px;font-size:11.5px;font-weight:600;color:var(--pr-muted);
}
.pr-legend div{display:flex;align-items:center;gap:5px;}
.pr-legend .pr-d{width:8px;height:8px;border-radius:50%;}

.pr-marker{position:relative;width:26px;height:26px;}
.pr-marker .pr-ring{
  position:absolute;inset:-14px;border-radius:50%;
  animation:pr-pulse 2.2s cubic-bezier(.4,0,.5,1) infinite;
}
.pr-marker .pr-core{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
@keyframes pr-pulse{
  0%{transform:scale(.55);opacity:.55;}
  70%{transform:scale(1.9);opacity:0;}
  100%{transform:scale(1.9);opacity:0;}
}
.pr-cluster-div{
  background:var(--pr-teal);border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk';font-weight:700;font-size:14px;
  box-shadow:0 0 0 6px rgba(34,181,122,.28), 0 6px 16px rgba(0,0,0,.22);
}

.pr-action-row{
  pointer-events:auto;
  display:flex;gap:8px;
}
.pr-pill-btn{
  display:flex;align-items:center;gap:7px;
  background:var(--pr-ink);color:#fff;border:none;border-radius:999px;
  padding:9px 15px;font-family:'Inter';font-weight:700;font-size:12.5px;
  cursor:pointer;box-shadow:0 8px 20px rgba(20,22,30,.22);
  white-space:nowrap;
}
.pr-pill-btn.pr-ghost{background:var(--pr-surface);color:var(--pr-ink);}
.pr-pill-btn svg{flex:none;}
.pr-pill-btn.pr-loading{opacity:.65;pointer-events:none;}

.pr-gesture-hint{
  position:absolute;left:50%;bottom:100px;z-index:850;
  background:rgba(22,25,34,.88);color:#fff;
  font-family:'Inter';font-weight:600;font-size:12.5px;
  padding:9px 16px;border-radius:999px;
  box-shadow:0 8px 20px rgba(20,22,30,.28);
  opacity:0;pointer-events:none;white-space:nowrap;
  transform:translate(-50%,8px);
  transition:opacity .2s ease, transform .2s ease;
}
.pr-gesture-hint.pr-show{opacity:1;transform:translate(-50%,0);}

.pr-scrim{
  position:absolute;inset:0;background:rgba(14,16,22,.42);z-index:900;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.pr-scrim.pr-show{opacity:1;pointer-events:auto;}
.pr-sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:950;
  background:var(--pr-surface);
  border-radius:24px 24px 0 0;
  box-shadow:0 -12px 40px rgba(20,22,30,.28);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.22,.9,.32,1);
  max-height:82vh;display:flex;flex-direction:column;
}
.pr-sheet.pr-show{transform:translateY(0);}
.pr-sheet-handle{width:38px;height:4px;background:var(--pr-line);border-radius:99px;margin:10px auto 4px;}

.pr-sheet-head{padding:6px 20px 14px;border-bottom:1px solid var(--pr-line);}
.pr-sheet-title{font-family:'Space Grotesk';font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px;}
.pr-sheet-sub{font-size:12.5px;color:var(--pr-muted);margin-top:2px;}
/* Avisos puntuales (falta vehículo, reserva confirmada, error) se
   resaltan como una alerta real en vez de texto plano suelto. */
.pr-sheet-sub.pr-alert-warn{
  color:#8a4a12;background:var(--pr-amber-soft, #FBEBD3);border:1px solid rgba(240,164,48,.35);
  border-radius:9px;padding:7px 10px;margin-top:6px;font-weight:600;display:inline-flex;align-items:center;gap:6px;
}
.pr-sheet-sub.pr-alert-warn::before{content:'⚠';font-size:12px;line-height:1;}
.pr-sheet-sub.pr-alert-ok{
  color:#146c47;background:var(--pr-teal-soft, #DFF6EA);border:1px solid rgba(34,181,122,.35);
  border-radius:9px;padding:7px 10px;margin-top:6px;font-weight:600;display:inline-flex;align-items:center;gap:6px;
}
.pr-sheet-sub.pr-alert-ok::before{content:'✓';font-size:12px;line-height:1;}
.pr-sheet-hours{font-size:12.5px;color:var(--pr-muted);margin-top:2px;font-variant-numeric:tabular-nums;}
.pr-sheet-hours.pr-hours-countdown{font-weight:700;color:var(--pr-blue);}
.pr-sheet-hours.pr-hours-closing-soon{color:var(--pr-amber);}
.pr-sheet-closed .pr-sheet-hours.pr-hours-countdown{color:var(--pr-coral);}

.pr-sheet-controls{display:flex;gap:8px;padding:12px 20px 4px;flex-wrap:wrap;}
.pr-ctrl{
  display:flex;align-items:center;gap:6px;
  background:var(--pr-canvas);border:1px solid var(--pr-line);border-radius:10px;
  padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--pr-ink);
}
.pr-ctrl select{border:none;background:transparent;font-family:'Inter';font-weight:600;font-size:12.5px;color:var(--pr-ink);outline:none;}
.pr-ctrl.pr-search{flex:1;min-width:120px;}
.pr-ctrl.pr-search input{border:none;background:transparent;outline:none;font-family:'Inter';font-size:12.5px;width:100%;}

.pr-vehicle-row{
  display:flex;align-items:center;gap:8px;padding:10px 20px 4px;flex-wrap:wrap;
}
.pr-vehicle-select-ctrl{flex:1;min-width:160px;}
.pr-vehicle-select-ctrl select{width:100%;}
.pr-vehicle-add-btn{
  border:1px solid var(--pr-line);background:var(--pr-canvas);color:var(--pr-ink);
  border-radius:10px;padding:7px 10px;font-family:'Inter';font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap;
  transition:box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
/* Se ilumina cuando el usuario intenta reservar sin vehículo, para
   señalar el botón que resuelve el aviso. */
.pr-vehicle-add-btn.pr-glow,
.pr-vehicle-select-ctrl.pr-glow{
  border-color:var(--pr-blue);background:var(--pr-blue-soft, #E4E8FD);color:var(--pr-blue);
  box-shadow:0 0 0 4px rgba(74,99,231,.18);
  animation:pr-vehicle-glow 1.1s ease-in-out 2;
}
.pr-vehicle-select-ctrl.pr-glow select{color:var(--pr-blue);}
@keyframes pr-vehicle-glow{
  0%,100%{box-shadow:0 0 0 4px rgba(74,99,231,.18);}
  50%{box-shadow:0 0 0 8px rgba(74,99,231,.28);}
}
.pr-vehicle-form{
  display:flex;gap:8px;flex-wrap:wrap;width:100%;padding-top:6px;
}
.pr-vehicle-form[hidden]{display:none;}
.pr-vehicle-form input{
  flex:1;min-width:90px;border:1px solid var(--pr-line);border-radius:10px;
  padding:8px 10px;font-family:'Inter';font-size:12.5px;background:var(--pr-canvas);color:var(--pr-ink);
}
.pr-vehicle-form-actions{display:flex;gap:8px;width:100%;}
.pr-vehicle-save-btn{
  border:none;background:var(--pr-blue);color:#fff;border-radius:10px;
  padding:8px 14px;font-family:'Inter';font-weight:700;font-size:12px;cursor:pointer;
}
.pr-vehicle-save-btn:disabled{opacity:.6;cursor:not-allowed;}
.pr-vehicle-cancel-btn{
  border:1px solid var(--pr-line);background:transparent;color:var(--pr-muted);border-radius:10px;
  padding:8px 14px;font-family:'Inter';font-weight:700;font-size:12px;cursor:pointer;
}

.pr-payment-row{
  display:flex;align-items:center;gap:8px;padding:10px 20px;flex-wrap:wrap;
  border-bottom:1px solid var(--pr-line);
}
.pr-payment-option{
  display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  background:var(--pr-canvas);border:1px solid var(--pr-line);border-radius:10px;padding:7px 10px;cursor:pointer;
}
.pr-payment-option input{margin:0;}
.pr-reserve-btn{
  margin-left:auto;
  border:none;background:var(--pr-blue);color:#fff;border-radius:10px;
  padding:9px 16px;font-family:'Inter';font-weight:700;font-size:12.5px;cursor:pointer;
}
.pr-reserve-btn:disabled{opacity:.6;cursor:not-allowed;}

.pr-garage{padding:6px 16px 26px;overflow-y:auto;}
.pr-garage-grid{display:grid;grid-template-columns:1fr 34px 1fr;gap:0 4px;}
.pr-col{display:flex;flex-direction:column;gap:10px;}
.pr-road{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border-left:2px dashed var(--pr-line);border-right:2px dashed var(--pr-line);
  padding:6px 0;
}
.pr-road .pr-arrow{color:#C6C9D2;font-size:13px;}

.pr-spot{
  position:relative;border:1.5px solid var(--pr-line);border-radius:12px;
  padding:10px 10px;min-height:58px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:var(--pr-canvas);
}
.pr-spot.pr-free{background:var(--pr-surface);}
.pr-spot .pr-id{font-size:11px;font-weight:700;color:var(--pr-muted);}
.pr-spot .pr-status{
  align-self:flex-start;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.3px;border-radius:99px;padding:2px 7px;
}
.pr-spot .pr-status.libre{background:var(--pr-teal-soft);color:var(--pr-teal);}
.pr-spot .pr-status.ocupado{background:var(--pr-coral-soft);color:var(--pr-coral);}
.pr-spot .pr-status.reservado{background:var(--pr-blue-soft);color:var(--pr-blue);}
.pr-spot.pr-free{cursor:pointer;}
.pr-spot.pr-free:active{transform:scale(.97);}
.pr-spot.pr-selected{outline:2px solid var(--pr-blue);}

.pr-spot.pr-mine{outline:1.5px solid var(--pr-blue);}
.pr-spot .pr-mine-badge{
  position:absolute;top:-7px;right:-6px;z-index:2;
  background:var(--pr-blue);color:#fff;font-size:8.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.3px;border-radius:99px;
  padding:2px 6px;box-shadow:0 2px 6px rgba(20,22,30,.25);
}

/* Parking cerrado ahora mismo: los espacios que normalmente estarían
   libres se muestran bloqueados (sin click, color distinto) para que
   quede claro que no se puede reservar hasta que abra de nuevo. */
.pr-spot.pr-closed{background:var(--pr-canvas);cursor:not-allowed;opacity:.6;}
.pr-spot .pr-status.pr-closed{background:var(--pr-line);color:var(--pr-muted);}
.pr-sheet-closed .pr-sheet-sub{color:var(--pr-coral);font-weight:600;}

.pr-sheet-legend{display:flex;gap:14px;padding:10px 20px 4px;font-size:11px;font-weight:600;color:var(--pr-muted);}
.pr-sheet-legend div{display:flex;align-items:center;gap:5px;}
.pr-sheet-legend .pr-d{width:8px;height:8px;border-radius:50%;}

.leaflet-control-attribution{font-size:9px !important;}

div#parkradar-viewport {
    top: 100px !important;
}

/* Móvil: el mapa pasa a ocupar la pantalla completa (fixed, sin
   depender del scroll ni de dónde quedó insertado el shortcode) y se
   pone por encima del header del theme, en vez de quedar empujado
   100px hacia abajo (regla de arriba, pensada para tablet/escritorio).
   Como queda "fixed" y a pantalla completa, ya no necesita el
   placeholder que reserva espacio en el flujo del documento (ver
   prFullBleed() en parkradar-app.js): se oculta para que no deje un
   hueco en blanco donde estaba el shortcode. */
@media (max-width:520px){
  div#parkradar-viewport{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* alto real de pantalla en móvil, sin la barra de direcciones */
    max-width: 100vw !important;
    margin: 0 !important;
    z-index: 999999 !important;
  }
  .parkradar-viewport-placeholder{
    display: none !important;
    height: 0 !important;
  }
  .parkradar-app{
    height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Tablet: mantiene el "mockup" pero un poco más redondeado. */
@media (min-width:521px) and (max-width:899px){
  .parkradar-app{border-radius:36px;}
}

/* Escritorio: pantalla completa, sin marco de teléfono. El panel de
   detalle (pr-sheet) pasa de hoja inferior a panel acoplado a la
   derecha, ocupando toda la altura. */
@media (min-width:900px){
  .parkradar-viewport{
    background:var(--pr-canvas);
  }
  .parkradar-app{
    max-width:none;
    width:100%;
    height:100%;
    margin:0;
    border-radius:0;
    box-shadow:none;
  }

  .pr-topbar{ max-width:420px; left:50%; right:auto; transform:translateX(-50%); padding:20px 0 0; align-items:center; }
  .pr-topbar .pr-search-wrap, .pr-topbar .pr-chips, .pr-topbar .pr-action-row{ width:100%; }
  .pr-topbar .pr-action-row{ justify-content:center; }
  .pr-legend{ left:50%; bottom:24px; transform:translateX(-50%); }
  .pr-fab{ right:20px; }

  .pr-sheet{
    left:auto;right:0;top:0;bottom:0;
    width:440px;max-width:34vw;
    height:100%;max-height:none;
    border-radius:0;
    box-shadow:-16px 0 48px rgba(20,22,30,.22);
    transform:translateX(100%);
  }
  .pr-sheet.pr-show{transform:translateX(0);}
  .pr-garage{max-height:none;flex:1;}
}

/* Estilo "gris" sobre los mosaicos de OpenStreetMap */
.pr-tiles-gray{filter:grayscale(1) contrast(.92) brightness(1.08);}