:root{
  --bg:#0b1220; --panel:#0f1730; --card:#121a2d;
  --txt:#e9eefc; --muted:rgba(233,238,252,.75);
  --free:#1f8f4a; --occ:#c0392b; --res:#d4a017;
  --b:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;margin:0;background:var(--bg);color:var(--txt)}
header{
  position:sticky; top:0; z-index:5;
  position:relative;
  background:rgba(11,18,32,.88);
  backdrop-filter:blur(10px);
  padding:14px 16px;
  border-bottom:1px solid var(--b);
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.title{font-weight:900;font-size:18px;letter-spacing:.2px}
.sub{font-size:12px;color:var(--muted);margin-top:2px}

main{padding:16px;padding-bottom:92px;display:grid;gap:14px}
.floor{background:rgba(255,255,255,.04);border:1px solid var(--b);border-radius:16px;padding:12px}
.floor h2{margin:0 0 10px 0;font-size:15px;color:var(--muted);font-weight:800;letter-spacing:.2px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}

.spot{
  background:var(--card); border:1px solid var(--b);
  padding:12px; border-radius:14px;
  cursor:pointer; user-select:none;
  transition:transform .06s ease, filter .2s ease, opacity .2s ease;
  position:relative; overflow:hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.spot, .spot *{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
.spot:active{transform:scale(.99)}
.spot .code{font-weight:900;font-size:15px}
.spot .state{margin-top:6px;font-size:13px;color:var(--muted)}
.meta{margin-top:10px;font-size:11px;color:rgba(233,238,252,.65);line-height:1.25}
.hint{position:absolute;right:10px;top:10px;font-size:11px;color:rgba(233,238,252,.55)}

.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:11px;margin-top:8px;border:1px solid var(--b);background:rgba(255,255,255,.04)}
.dot{width:8px;height:8px;border-radius:50%}
.LIBRE .dot{background:var(--free)}
.OCUPADO .dot{background:var(--occ)}
.RESERVADO .dot{background:var(--res)}

.spot.LIBRE{outline:2px solid rgba(31,143,74,.35)}
.spot.OCUPADO{outline:2px solid rgba(192,57,43,.35)}
.spot.RESERVADO{outline:2px solid rgba(212,160,23,.35)}

.spot.dim{filter:grayscale(.25) brightness(.75); opacity:.55}
.spot.locked{opacity:.55; cursor:not-allowed}
.spot.locked:active{transform:none}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.btn{
  appearance:none;border:1px solid var(--b);
  background:rgba(255,255,255,.06);color:var(--txt);
  padding:8px 10px;border-radius:12px;cursor:pointer;font-size:13px
}
.btn.active{outline:2px solid rgba(255,255,255,.16)}
.btn-primary{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.10)}
.btn-danger{border-color:rgba(192,57,43,.35);background:rgba(192,57,43,.12)}
.btn-warn{border-color:rgba(212,160,23,.35);background:rgba(212,160,23,.12)}
.btn-ghost{background:transparent}

.header-left{display:flex;gap:14px;flex-flow:column;align-items:flex-start}
.logo{height:38px;width:auto;object-fit:contain;display:block}
.title-block{display:flex;flex-direction:column}
.header-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.plate-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;border:1px solid var(--b);
  background:rgba(255,255,255,.06);color:var(--txt);
  font-size:13px;white-space:nowrap;
}
.plate-chip .dot{width:8px;height:8px;border-radius:50%;background:rgba(31,143,74,.55)}

.sync-badge{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:12px; border:1px solid var(--b);
  background:rgba(255,255,255,.06); font-size:13px; color:var(--txt);
  white-space:nowrap; position:absolute; z-index:10; right:15px; top:14px;
  backdrop-filter: blur(6px);
}
.sync-dot{width:8px;height:8px;border-radius:50%;background:rgba(233,238,252,.55)}

.kpi-bar{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:55;
  background:rgba(11,18,32,.88); backdrop-filter:blur(12px);
  border:1px solid var(--b); border-radius:18px; padding:10px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.kpi{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:14px; border:1px solid var(--b);
  background:rgba(255,255,255,.06); font-size:13px; min-width:0;
}
.kpi strong{font-size:16px}
.kpi .label{color:var(--muted)}
.kpi .chip{display:inline-flex;align-items:center;gap:8px}
.kpi .chip .dot{width:10px;height:10px}
.kpi.free .dot{background:var(--free)}
.kpi.occ  .dot{background:var(--occ)}
.kpi.res  .dot{background:var(--res)}

.toast{
  position:fixed; left:50%; bottom:102px; transform:translateX(-50%);
  background:rgba(15,23,48,.92); border:1px solid var(--b); color:var(--txt);
  padding:10px 12px; border-radius:14px; display:none; gap:10px;
  align-items:center; max-width:min(560px,92vw); z-index:50
}
.toast.show{display:flex}
.toast .t{font-size:13px;color:var(--txt)}
.toast .x{margin-left:auto;cursor:pointer;opacity:.7}

.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal-back.show{display:flex}
.modal{width:min(520px,100%);background:rgba(15,23,48,.98);border:1px solid var(--b);border-radius:18px;padding:14px}
.modal h3{margin:0 0 6px 0;font-size:15px}
.modal p{margin:0 0 12px 0;color:var(--muted);font-size:13px;line-height:1.35}
.modal .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.field{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.input{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--b);
  color:var(--txt);
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  outline:none;
  letter-spacing:.6px;
  text-transform:uppercase;
}

@media (max-width:720px){
  .grid{grid-template-columns:repeat(2,1fr)}
  main{padding-bottom:120px}
  .kpi strong{font-size:15px}
  .sync-badge{font-size:12px;padding:6px 9px}
  .plate-chip{font-size:12px;padding:6px 9px}
  .btn{font-size:12px;padding:7px 9px}
}