* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: system-ui, Arial; }


.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  background: #111;
  color: #fff;
  z-index: 1000;
}


.top-bar select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #fff;
}


.panel {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  padding: 10px 12px;
  background: rgba(255,255,255,0.95);
  z-index: 999;
  display: grid;
  gap: 10px;
}


.auth, .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}


.auth input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  min-width: 180px;
}


.status { font-size: 13px; opacity: 0.85; }


.btn {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #bbb;
  background: #f3f3f3;
  cursor: pointer;
}


.btn:hover { filter: brightness(0.97); }


.btn.primary {
  background: #111;
  color: #fff;
  border-color: #111;
}


.follow {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #bbb;
  cursor: pointer;
}


.follow.on { background: #111; color: #fff; border-color: #111; }
.follow.off { background: #f3f3f3; color: #111; }


.info { font-weight: 600; }


#map {
  position: absolute;
  top: 52px; /* top-bar */
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 140px; /* panel height aprox */
}




/* Geofence styles */
.geo { margin-top: 10px; }
.geo-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.geo-events {
  margin-top: 8px;
  max-height: 140px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  font-size: 12px;
}
.geo-item { display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom: 1px dashed rgba(255,255,255,0.12); }
.geo-item:last-child { border-bottom: none; }
.geo-type { font-weight: 700; }
.geo-time { opacity: 0.8; white-space: nowrap; }




/* contenedor del panel de arriba */
.panel{
  position: relative;
  z-index: 1000;
}


/* caja eventos geofence: chica y scrolleable */
#gfEvents{
  max-height: 120px;   /* baja/sube a gusto */
  overflow-y: auto;
  background: rgba(255,255,255,0.92);
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
}


/* items del log */
.geo-item{
  display:flex;
  justify-content:space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.15);
  font-size: 12px;
}


.geo-item:last-child{ border-bottom: none; }


/* que el mapa siempre sea “debajo” y ocupe pantalla */
#map{
  height: calc(100vh - 180px); /* ajusta 180px según tu header/panel */
}