:root {
  --sp-free: #16a34a;
  --sp-occupied: #dc2626;
  --sp-paid: #2563eb;
  --sp-infraction: #eab308;
  --sp-no-charge: #6b7280;
}

body { background: #f4f6f9; }

.map-page main { padding: 0 !important; }
#map { height: calc(100vh - 56px); width: 100%; }
.map-panel {
  position: absolute; top: 70px; right: 12px; z-index: 1000; width: 280px; max-width: calc(100vw - 24px);
  background: rgba(255, 255, 255, 0.96); border-radius: .5rem; box-shadow: 0 2px 12px rgba(0,0,0,.15); padding: .75rem;
}
.legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.status-badge { color: #fff; padding: .2rem .5rem; border-radius: .35rem; font-size: .8rem; font-weight: 600; }
.status-free { background: var(--sp-free); }
.status-occupied { background: var(--sp-occupied); }
.status-paid { background: var(--sp-paid); }
.status-infraction { background: var(--sp-infraction); color: #1f2937; }
.status-no_charge { background: var(--sp-no-charge); }

.live-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #9ca3af; }
.live-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }

.space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 50vh; overflow-y: auto; }
.space-cell {
  border: 0; border-radius: .4rem; color: #fff; font-weight: 700; padding: .55rem 0; text-align: center; font-size: .9rem;
  position: relative;
}
.space-cell.selected { outline: 3px solid #111827; outline-offset: 1px; }
.space-cell .verify { position: absolute; top: -4px; right: -4px; font-size: .8rem; }

.kiosk-mode .btn-lg { padding: 1rem 1.25rem; font-size: 1.35rem; }
.kiosk-mode .form-control-lg { font-size: 1.6rem; }
.kiosk-mode h1 { font-size: 2rem; }

.kpi { border-left: 4px solid #2563eb; }
.offline-banner { display: none; }
.offline .offline-banner { display: block; }
.qr-page { max-width: 560px; }
.countdown { font-size: 2.2rem; font-variant-numeric: tabular-nums; font-weight: 700; }

.brand-plate { background: #fff; border-radius: .4rem; padding: 3px 8px; display: inline-flex; align-items: center; }
.brand-logo { height: 30px; max-width: 160px; object-fit: contain; }
.tenant-logo { height: 28px; max-width: 110px; object-fit: contain; background: #fff; border-radius: .25rem; padding: 2px; }
.branding-preview { height: 72px; display: flex; align-items: center; justify-content: flex-start; background: #f8fafc;
  border: 1px dashed #cbd5e1; border-radius: .4rem; padding: .4rem; }
.branding-preview img { max-height: 100%; max-width: 100%; object-fit: contain; }
.branding-preview-sm { height: 48px; }

/* Landing y planes */
.lp-hero{background:radial-gradient(900px 400px at 85% 10%,rgba(255,255,255,.12),transparent 60%),linear-gradient(135deg,#1e3a8a,#2563eb 60%,#0ea5e9)}
.lp-mock{background:#0f172a;border-radius:18px;padding:18px;color:#cbd5e1}
.lp-dots i{display:inline-block;width:10px;height:10px;border-radius:50%;background:#334155;margin-right:6px}
.lp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}
.lp-s{display:block;height:34px;border-radius:7px}.d-inline-block.lp-s{width:14px;height:14px;vertical-align:middle;border-radius:4px}
.lp-f{background:#16a34a}.lp-o{background:#dc2626}.lp-p{background:#2563eb}.lp-i{background:#eab308}
.plan-card{position:relative;border-radius:14px}.plan-featured{box-shadow:0 10px 30px rgba(37,99,235,.18);border-width:2px}
.plan-ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#2563eb;color:#fff;font-size:.75rem;font-weight:700;padding:2px 12px;border-radius:99px}
.plan-price{font-size:1.9rem;font-weight:800}
:root{--acc-pri:#2563eb}